Применить jQuery datepicker к нескольким экземплярам

У меня есть элемент управления выбора даты jQuery, который отлично работает на один экземпляр экземпляра, но я не уверен, как заставить его работать для нескольких экземпляров.

<script type="text/javascript">
    $(function() {
        $('#my_date').datepicker();
    });
</script>

<% Using Html.BeginForm()%>
<% For Each item In Model.MyRecords%>
<%=Html.TextBox("my_date")%> <br/>
<% Next%>
<% End Using%>

Без цикла For Each он работает нормально, но если в коллекции "MyRecords" есть более одного элемента, тогда только первое текстовое поле получает выбор даты (что имеет смысл, поскольку оно связано с идентификатором). Я попытался присвоить класс текстовому полю и указать:

$('.my_class').datepicker();

но пока отображается сборщик дат, все они обновляют первое текстовое поле.

Каков правильный способ сделать эту работу?

Ответ 1

HTML:

<input type="text" class="datepick" id="date_1" />
<input type="text" class="datepick" id="date_2" />
<input type="text" class="datepick" id="date_3" />

script:

$('.datepick').each(function(){
    $(this).datepicker();
});

(псевдокодировано немного, чтобы упростить его)

Ответ 2

У меня была такая же проблема.

Правильный способ использования выбора даты - $('.my_class').datepicker();, но вам нужно убедиться, что вы не назначаете один и тот же идентификатор нескольким фидапикам.

Ответ 3

Очевидным ответом будет генерация разных идентификаторов, отдельный идентификатор для каждого текстового поля, что-то вроде

[int i=0]
<% Using Html.BeginForm()%>
<% For Each item In Model.MyRecords%>
[i++]
<%=Html.TextBox("my_date[i]")%> <br/>
<% Next%>
<% End Using%>

Я не знаю ASP.net, поэтому я просто добавил общий код синтаксиса типа C в квадратных скобках. Перевод его в реальный код ASP.net не должен быть проблемой.

Затем вам нужно найти способ генерации как можно большего количества

$('#my_date[i]').datepicker();

в качестве элементов в Model.MyRecords. Опять же, в квадратных скобках находится ваш счетчик, поэтому ваша функция jQuery будет выглядеть примерно так:

<script type="text/javascript">
    $(function() {
        $('#my_date1').datepicker();
        $('#my_date2').datepicker();
        $('#my_date3').datepicker();
        ...
    });
</script>

Ответ 4

<html>
<head>
 <!-- jQuery JS Includes -->
 <script type="text/javascript" src="jquery/jquery-1.3.2.js"></script>
 <script type="text/javascript" src="jquery/ui/ui.core.js"></script>
 <script type="text/javascript" src="jquery/ui/ui.datepicker.js"></script>

 <!-- jQuery CSS Includes -->
 <link type="text/css" href="jquery/themes/base/ui.core.css" rel="stylesheet" />
 <link type="text/css" href="jquery/themes/base/ui.datepicker.css" rel="stylesheet" />
 <link type="text/css" href="jquery/themes/base/ui.theme.css" rel="stylesheet" />

 <!-- Setup Datepicker -->
 <script type="text/javascript"><!--
  $(function() {
   $('input').filter('.datepicker').datepicker({
    changeMonth: true,
    changeYear: true,
    showOn: 'button',
    buttonImage: 'jquery/images/calendar.gif',
    buttonImageOnly: true
   });
  });
 --></script>
</head>
<body>

 <!-- Each input field needs a unique id, but all need to be datepicker -->
 <p>Date 1: <input id="one" class="datepicker" type="text" readonly="true"></p>
 <p>Date 2: <input id="two" class="datepicker" type="text" readonly="true"></p>
 <p>Date 3: <input id="three" class="datepicker" type="text" readonly="true"></p>

</body>
</html>

Ответ 5

Существует простое решение.

<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>      
        <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"> </script> 
        <script type="text/javascript" src="../js/jquery.min.js"></script>
        <script type="text/javascript" src="../js/flexcroll.js"></script>
        <script type="text/javascript" src="../js/jquery-ui-1.8.18.custom.min.js"></script>
        <script type="text/javascript" src="../js/JScript.js"></script>
        <title>calendar</title>    
        <script type="text/javascript"> 
            $(function(){$('.dateTxt').datepicker(); }); 
        </script> 
    </head>
    <body>
        <p>Date 1: <input id="one" class="dateTxt" type="text" ></p>
        <p>Date 2: <input id="two" class="dateTxt" type="text" ></p>
        <p>Date 3: <input id="three" class="dateTxt" type="text" ></p>
    </body>
</html>

Ответ 6

При добавлении datepicker во время выполнения генерируемых входных текстовых полей вы должны проверить, содержит ли он уже datepicker, а затем сначала удалить класс hasDatepicker, а затем применить datePicker к нему.

function convertTxtToDate() {
        $('.dateTxt').each(function () {
            if ($(this).hasClass('hasDatepicker')) {
                $(this).removeClass('hasDatepicker');
            } 
             $(this).datepicker();
        });
    }

Ответ 7

Небольшое примечание к ответу SeanJA.

Интересно, что если вы используете KnockoutJS и jQuery вместе следующие входы с разными идентификаторами, но с те же данные привязываются наблюдаемые:

<data-bind="value: first_dt" id="date_1" class="datepick" />
<data-bind="value: first_dt" id="date_2" class="datepick" />

свяжет один (тот же) datepicker с обоими входами (даже если они имеют разные идентификаторы или имена).

Используйте отдельные наблюдаемые в ViewModel для привязки отдельного параметра datepicker к каждому входу:

<data-bind="value: first_dt" id="date_1" class="datepick" />
<data-bind="value: second_dt" id="date_2" class="datepick" />

Инициализация:

$('.datepick').each(function(){
    $(this).datepicker();
});

Ответ 8

Решение здесь состоит в том, чтобы иметь разные идентификаторы, как многие из вас заявили. Проблема все еще лежит глубже в datepicker. Пожалуйста, поправьте меня, но у datepicker нет одного идентификатора обертки - "ui-datepicker-div". Это видно на http://jqueryui.com/demos/datepicker/#option-showOptions в тематике.

Есть ли опция, которая может изменить этот идентификатор как класс? Я не хочу раскошеливать этот script только для этого очевидного исправления!

Ответ 9

Чтобы изменить использование класса вместо ID

<script type="text/javascript"> 
    $(function() { 
        $('.my_date1').datepicker(); 
        $('.my_date2').datepicker(); 
        $('.my_date3').datepicker(); 
        ... 
    }); 
</script>

Ответ 10

У меня была такая же проблема, но, наконец, я обнаружил, что это проблема с тем, как я вызывал script из пользовательского элемента управления ASP. Я использовал ClientScript.RegisterStartupScript(), но забыл дать script уникальный ключ (второй аргумент). С обоими сценариями назначается один и тот же ключ, только первый ящик фактически преобразуется в datepicker. Поэтому я решил добавить идентификатор текстового поля к ключу, чтобы сделать его уникальным:

Page.ClientScript.RegisterStartupScript(this.GetType(), "DPSetup" + DPTextbox.ClientID, dpScript);

Ответ 11

У меня была аналогичная проблема с динамическим добавлением классов датпикера. Решение, которое я нашел, это прокомментировать строку 46 datepicker.js

// this.element.on('click', $.proxy(this.show, this));

Ответ 12

В моем случае я не присвоил элементам <input> никакого идентификатора и использовал класс для применения datepicker, как в ответе SeanJA, но datepicker применялся только к первому. Я обнаружил, что JQuery автоматически добавлял идентификатор, и он был одним и тем же во всех элементах, что объясняло, почему только первое было получено datepickered.