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