jQuery Datepicker, как динамически добавлять идентификаторы в поле ввода

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

Есть ли способ создать функцию jQuery, которая будет динамически добавлять идентификатор к любому элементу с классом «datepicker» и заставлять datepicker работать с этими элементами?

Что-то типа:

$('.datepicker').append('ID','datepicker + (1)');
$("#datepicker + (1)").datepicker();

Я знаю, что на самом деле это не сработает, но я подумал, что это самый простой способ объяснить, что + (1) добавляет номер к идентификатору.

Мой текущий код для статических элементов работает следующим образом.

$("#datepicker").datepicker();
$("#datepicker01").datepicker();
$("#datepicker02").datepicker();
$("#datepicker03").datepicker();
$("#datepicker04").datepicker();
$("#datepicker05").datepicker();
$("#datepicker06").datepicker();

Спасибо за помощь, выздоравливайте :)


datepicker jquery jquery-ui jquery-ui-datepicker
person Clinton Green    schedule 23.04.2012    source источник
comment
Что не так с $('.datepicker').datepicker()?   -  person mu is too short    schedule 23.04.2012
comment
Привет, это работает нормально, но это со статической страницей, где я сам поместил идентификаторы. Мне это нужно для страницы, где скрипт найдет все элементы с классом datepicker, а затем добавит уникальный идентификатор и заставит функцию datepicker работать с этими элементами.   -  person Clinton Green    schedule 23.04.2012
comment
Гм, $('.datepicker') уже выбирает все элементы с классом datepicker.   -  person mu is too short    schedule 23.04.2012
comment
Я знаю, но мне нужно динамически генерировать идентификаторы, потому что я не знаю, для скольких полей мне понадобятся функции. Это может быть 3 или даже 30 полей.   -  person Clinton Green    schedule 23.04.2012
comment
Но зачем вам эти идентификаторы?   -  person mu is too short    schedule 23.04.2012
comment
Вот как работает средство выбора даты: вы добавляете идентификатор к элементу, а затем указываете его в функции следующим образом: $(#datepicker).datepicker();   -  person Clinton Green    schedule 23.04.2012
comment
Нет, средство выбора даты привязывается ко всему, что выбирает селектор: jsfiddle.net/ambiguous/ua4bc.   -  person mu is too short    schedule 23.04.2012
comment
Вау! спасибо за это, у меня почему-то сложилось впечатление, что средство выбора даты работает с уникальным идентификатором. Ваше здоровье   -  person Clinton Green    schedule 23.04.2012

Ответы (3)


arrow_upward
4
arrow_downward

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

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

Демонстрация: http://jsfiddle.net/ambiguous/ua4bc/

Большинство плагинов могут привязываться к нескольким элементам одновременно, поэтому почти все они выглядят так:

return this.each(function() { ... });

внутри.

Если вам нужны идентификаторы для какой-то другой цели, вы можете просто сделать это:

$('.datepicker').each(function(i) {
    this.id = 'datepicker' + i;
}).datepicker();

Демонстрация (используйте инспектор DOM, чтобы увидеть идентификаторы): http://jsfiddle.net/ambiguous/6zfEY/

person mu is too short    schedule 23.04.2012

arrow_upward
2
arrow_downward 

$(function(){
    $('.datepicker').each(function(i){
        $(this).attr('id', $(this).attr('class')+parseInt(i+1));
    });

    // You can call like
    $("#datepicker1").datepicker();
    $("#datepicker2").datepicker();
    $("#datepicker3").datepicker();
});

но я думаю, что вам не нужно добавлять id в любом случае.

person The Alpha    schedule 23.04.2012
comment
Верхняя часть выглядит великолепно, но есть ли способ сгенерировать эту часть: $(#datepicker1).datepicker(); как вы сделали выше? Спасибо за помощь, ура - person Clinton Green; 23.04.2012
comment
Извините, то, что вы сказали о том, что идентификатор не нужен, верно, поэтому не обращайте внимания на мой последний комментарий. - person Clinton Green; 23.04.2012

arrow_upward
0
arrow_downward

Привет, я попробовал эту привязку с помощью Spring MVC 3.0 и... Это работает, здорово! у меня есть сценарий

<script type="text/javascript">
  $(function(){
  $(".datepicker").datepicker({ dateFormat:"dd/mm/yy" });
  });
</script>

а затем, в моем случае, работая с JSP и JSTL, я смог привязать JQueryPicker к своим элементам, которые создаются динамически, и вот фрагмент кода, если вы видите, когда это происходит, потому что я работаю над другими вещами, но идея та же:

<c:when test="${fieldVar.type == 'DATE'}">
  <td><form:input path="fieldWrapperElements[${status.index}].dateValue"class="datepicker"/></td>
</c:when>
person Gerard Manzano    schedule 14.08.2012