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

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



<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();


но пока это показывает выбор даты везде они все обновляют первое текстовое поле.



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

543   12  

12 ответов:

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();
});

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

114  
2009-04-02 02:01:40

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

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

9  
2011-09-29 08:55:35

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

[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-like в квадратных скобках. Перевод его на фактический 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  
2009-04-02 01:45:24 
<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>
3  
2011-03-25 16:11:18

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

<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>
3  
2014-02-19 11:53:11

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

function convertTxtToDate() {
        $('.dateTxt').each(function () {
            if ($(this).hasClass('hasDatepicker')) {
                $(this).removeClass('hasDatepicker');
            } 
             $(this).datepicker();
        });
    }
2  
2013-10-08 11:54:20

небольшая заметка к ответу 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();
});
1  
2014-11-23 13:17:11

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

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

0  
2009-11-10 19:44:49

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

<script type="text/javascript"> 
    $(function() { 
        $('.my_date1').datepicker(); 
        $('.my_date2').datepicker(); 
        $('.my_date3').datepicker(); 
        ... 
    }); 
</script>
0  
2010-11-01 08:54:56

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

Page.ClientScript.RegisterStartupScript(this.GetType(), "DPSetup" + DPTextbox.ClientID, dpScript);
0  
2012-01-13 01:18:16

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

// this.element.on('click', $.proxy(this.show, this));
0  
2013-07-30 09:46:51

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

0  
2015-09-07 04:23:10

Comments

    Ничего не найдено.
Click here to cancel reply.