Статьи

Привязка jQuery UI DatePicker к динамически создаваемым элементам управления текстовым полем

Октябрь 10, 2017

JQuery UI DatePicker — это один из наиболее широко используемых плагинов jQuery UI, в котором реализованы все необходимые функции для очень богатого средства выбора даты. Реализация функциональности datepicker для данного поля текстового поля довольно проста, особенно если вы будете следовать примерам, приведенным на демонстрационном веб-сайте jQuery UI DatePicker .

Итак, давайте сначала сделаем некоторую базовую реализацию jQuery UI DatePicker на нашем веб-сайте ASP.NET.

1. Откройте VS.NET или Visual Web Developer.NET.

2. Создайте новый проект -> Веб-сайт ASP.NET или Веб-приложение ASP.NET или используйте существующий.

3. Создайте новую пустую страницу веб-формы ASP.NET (или, если вы используете ASP.NET MVC, создайте новое представление и соответствующий метод в контроллере).

4. Вот полный код ASPX, с которого вы должны начать:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link type="text/css" href="http://ajax.microsoft.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css" rel="Stylesheet" />
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.4.js"></script>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $(".hajanDatePicker").datepicker();
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="txtDatePicker" class="hajanDatePicker" runat="server" />
    </div>    
    </form>
</body>
</html>

 

Итак, после запуска в браузере это даст следующий результат:

JQuery UI Date Picker

Итак, это jQuery UI Datepicker, реализованный самым простым способом. Мы добавляем два скрипта и одну таблицу стилей CSS, которые все размещены в Microsoft Ajax CDN .

Теперь предположим, что у нас есть сценарий, в котором мы хотим привязать скрипт к динамически создаваемому элементу управления textbox, которого не существует в первый раз при отображении HTML веб-страницы. Давайте сначала добавим такую ​​функциональность на нашу страницу.

1. Добавьте class = ” myDatePickers ” в div, который находится внутри тела

<div class="myDatePickers">
    <asp:TextBox ID="txtDatePicker" class="hajanDatePicker" runat="server" />
</div>

 

2. Сразу после закрывающего тега div добавьте новую кнопку (вы можете добавить кнопку ASPX или просто ввести HTML-элемент type = ”button”):

<asp:Button ID="btnAddNew" runat="server" Text="Add New Text Box" />

3. Теперь давайте добавим скрипт, который в основном добавит новое текстовое поле на стороне клиента.

//code to add new text box inside
//div with class myDatePickers once the btnAddNew is clicked
$("#<%= btnAddNew.ClientID %>").click(function (event) {
    event.preventDefault(); //this code is added to prevent the default submit functionality of the button
    $("<input type='text' class='hajanDatePicker' />").appendTo(".myDatePickers");
});

В этом сценарии я в основном создаю строку HTML и добавляю ее в класс myDatePicker .

Примечание: пожалуйста, не смущайтесь, потому что у нас есть один <asp: TextBox ID = ”txtDatePicker” class = ”hajanDatePicker” runat = ”server” /> и теперь мы добавляем <input type = ‘text’ class = ‘hajanDatePicker’ / >. В основном, <asp: TextBox… /> отображается как <input type = ”text ‘… /> в клиентском HTML-коде. Таким образом, у нас должен быть только тот же класс hajanDatePicker, который используется в коде jQuery для создания функции выбора даты.

4. Давайте посмотрим на результат

— Как только мы загрузим страницу, у нас есть это

JQuery UI Date Picker

— Если мы нажмем кнопку «Добавить новое текстовое поле» три раза, мы получим следующий результат

JQuery UI Date Picker

вы заметите, что если вы нажмете на первое текстовое поле, появится средство выбора даты, однако оно не будет отображаться для следующих текстовых полей, которые добавляются после рендеринга HTML-кода и создаются обработчики событий для текстового поля. который существовал в то время. Таким образом, хотя они все с одним и тем же классом, он не работает для остальных текстовых полей.

JQuery Делегат и Live

В этом случае мы можем использовать функцию jQuery Delegate или jQuery Live. Я буду использовать JQuery Delegate.

Вместо $ («. HajanDatePicker»). Datepicker (); теперь мы будем использовать следующий скрипт:

 

$(".myDatePickers").delegate(".hajanDatePicker", "focusin", function () {    $(this).datepicker();});//$(".hajanDatePicker").datepicker();

 

Итак, скрипт довольно прост. В этом случае я использую контекст .myDatePickers, где у нас есть текстовые поля, к которым мы привязываем указатель даты.

Первый параметр — это селектор, в нашем случае это класс выбора даты.

The second parameter is the event (eg. click, mouseover, mouseenter, focusin etc) to which event we bind the function in the callback handler. So, in the callback handler function, we mainly say $(this).datepicker(); where this is the current selector.

If we run this now, for any text box you will add after the HTML is rendered, the date picker functionality will be also attached to it, mainly to all text boxes with class ‘hajanDatePicker’.

JQuery UI Date Picker

I hope this was interesting blog post for you.

Regards,
Hajan

33
Share: