Блог

Главная - Вопросы по программированию - jQuery UI Datepicker диапазон дат

jQuery UI Datepicker диапазон дат

#javascript #jquery #jquery-ui #date

#javascript #jquery #jquery-пользовательский интерфейс #Дата

Вопрос:

Я использую плагин jQuery UI с функцией выбора даты, чтобы установить диапазон дат. Пример, приведенный на их странице (http://jqueryui.com/demos/datepicker/date-range.html ) устанавливает диапазон на основе входного ‘id’; однако я хотел бы установить диапазон на основе ‘class’, поскольку моя форма «клонирует» div для добавления дополнительных входных данных, делая поля ‘id’ уникальными для каждого клона. Когда я меняю JavaScript на использование ‘class’ вместо ‘id’, диапазоны больше не функционируют.

JavaScript:

 <script src="../../scripts/jquery-1.6.4.js"></script>
<script src="../../scripts/jqueryui/ui/jquery.ui.core.js"></script>
<script src="../../scripts/jqueryui/ui/jquery.ui.datepicker.js"></script>
<script>
        $(function() {
            var dates = $( ".start_date, .end_date" ).datepicker({
                onSelect: function( selectedDate ) {
                    var option = this.class == "start_date" ? "minDate" : "maxDate",
                        instance = $( this ).data( "datepicker" ),
                        date = $.datepicker.parseDate(
                            instance.settings.dateFormat ||
                            $.datepicker._defaults.dateFormat,
                            selectedDate, instance.settings );
                    dates.not( this ).datepicker( "option", option, date );
                }       
            }); 
        });
</script>

HTML:

 <div>
    <label> Start Date:</label>
    <input type="text" name="start_date1" id="start_date1" class="start_date" />
</div>
<div>
    <label> End Date:</label>
    <input type="text" name="end_date1" id="end_date1" class="end_date" />
</div>

Комментарии:

1. Возможно, вы захотите подробнее рассказать о том, каким образом диапазоны дат «больше не функционируют». Есть ли ошибки JavaScript? Если да, то какие ошибки? Они делают что-то не так? Если да, то каким образом?

Ответ №1:

Чтобы проверить, есть ли у вашего элемента класс, сделайте это:

  if ($(this).is('.start_date')) {

или

  if ($(this).hasClass('start_date')) {

Имя свойства элементов DOM — «className», а не «class» (сбивает с толку). Также это делает ваш код хрупким для проверки того, что имя класса равно некоторой строке, потому что вы никогда не знаете, захотите ли вы добавить другой класс (например, «требуемый», например). Таким образом, вы всегда должны проверять либо с помощью jQuery, либо с помощью какого-либо другого метода, который учитывает возможность того, что объект может иметь много классов.

Также вы можете захотеть проверить средство выбора диапазона дат группы Filament для jQuery.