Применение jQuery datepicker к нескольким экземплярам - PullRequest
Новая
       32

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

70 голосов
/ 02 апреля 2009

У меня есть элемент управления выбора даты 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%>

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

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

но, несмотря на то, что везде отображается средство выбора даты, все они обновляют первое текстовое поле.

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

Ответы [ 12 ]

116 голосов
/ 02 апреля 2009

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" />

Сценарий: 

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

(псевдо-кодирование немного упрощено)

10 голосов
/ 07 декабря 2010

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

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

4 голосов
/ 15 января 2010 
<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>
4 голосов
/ 02 апреля 2009

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

[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>
3 голосов
/ 19 февраля 2014

Есть простое решение. 

<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>
2 голосов
/ 08 октября 2013

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

function convertTxtToDate() {
        $('.dateTxt').each(function () {
            if ($(this).hasClass('hasDatepicker')) {
                $(this).removeClass('hasDatepicker');
            } 
             $(this).datepicker();
        });
    }
1 голос
/ 23 ноября 2014

Небольшая заметка к ответу SeanJA.

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

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

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

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

<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();
});
0 голосов
/ 07 сентября 2015

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

0 голосов
/ 30 июля 2013

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

// this.element.on('click', $.proxy(this.show, this));
0 голосов
/ 13 января 2012

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

Page.ClientScript.RegisterStartupScript(this.GetType(), "DPSetup" + DPTextbox.ClientID, dpScript);
Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...