Несколько jQuery Datepickers несколько форм

Я использую несколько форм на одной странице. Все формы используют datepicker с теми же настройками. Поскольку я не могу использовать один и тот же ID на двух элементах, мне приходится копировать код. Есть ли лучший способ сделать это?Несколько jQuery Datepickers несколько форм

DEMO http://jsfiddle.net/Fa8Xx/1112/

 $("#datepicker1").datepicker({ 
     defaultDate: "+1w", 
     dateFormat: 'dd-mm-yy', 
     changeMonth: true, 
     minDate: 0, 
     numberOfMonths: 1, 
     onClose: function (selectedDate) { 
      var d = new Date(selectedDate); 
      d.setDate(d.getDate() + 90); 
      $("#datepicker2").datepicker("option", "minDate", selectedDate); 
      $("#datepicker2").datepicker("option", "maxDate", d); 
     } 
    }); 
    $("#datepicker2").datepicker({ 
     defaultDate: "+1w", 
     dateFormat: 'dd-mm-yy', 
     changeMonth: true, 
     minDate: +1, 
     numberOfMonths: 1, 
     onClose: function (selectedDate) { 
      $("#datepicker1").datepicker("option", "maxDate", selectedDate); 
     } 
    }); 
    $("#datepicker3").datepicker({ 
     defaultDate: "+1w", 
     dateFormat: 'dd-mm-yy', 
     changeMonth: true, 
     minDate: 0, 
     numberOfMonths: 1, 
     onClose: function (selectedDate) { 
      var d = new Date(selectedDate); 
      d.setDate(d.getDate() + 90); 
      $("#datepicker4").datepicker("option", "minDate", selectedDate); 
      $("#datepicker4").datepicker("option", "maxDate", d); 
     } 
    }); 
    $("#datepicker4").datepicker({ 
     defaultDate: "+1w", 
     dateFormat: 'dd-mm-yy', 
     changeMonth: true, 
     minDate: +1, 
     numberOfMonths: 1, 
     onClose: function (selectedDate) { 
      $("#datepicker3").datepicker("option", "maxDate", selectedDate); 
     } 
    }); 
    $("#datep 

icker5").datepicker({ 
    defaultDate: "+1w", 
    dateFormat: 'dd-mm-yy', 
    changeMonth: true, 
    minDate: 0, 
    numberOfMonths: 1, 
    onClose: function (selectedDate) { 
     var d = new Date(selectedDate); 
     d.setDate(d.getDate() + 90); 
     $("#datepicker6").datepicker("option", "minDate", selectedDate); 
     $("#datepicker6").datepicker("option", "maxDate", d); 
    } 
}); 
$("#datepicker6").datepicker({ 
    defaultDate: "+1w", 
    dateFormat: 'dd-mm-yy', 
    changeMonth: true, 
    minDate: +1, 
    numberOfMonths: 1, 
    onClose: function (selectedDate) { 
     $("#datepicker5").datepicker("option", "maxDate", selectedDate); 
    } 
}); 
$("#datepicker7").datepicker({ 
    defaultDate: "+1w", 
    dateFormat: 'dd-mm-yy', 
    changeMonth: true, 
    minDate: 0, 
    numberOfMonths: 1, 
    onClose: function (selectedDate) { 
     var d = new Date(selectedDate); 
     d.setDate(d.getDate() + 90); 
     $("#datepicker8").datepicker("option", "minDate", selectedDate); 
     $("#datepicker8").datepicker("option", "maxDate", d); 
    } 
}); 
$("#datepicker8").datepicker({ 
    defaultDate: "+1w", 
    dateFormat: 'dd-mm-yy', 
    changeMonth: true, 
    minDate: +1, 
    numberOfMonths: 1, 
    onClose: function (selectedDate) { 
     $("#datepicker7").datepicker("option", "maxDate", selectedDate); 
    } 
});

источник

2013-12-13 Anonymous

Но у них нет одинаковых настроек, они все делают разные вещи и обновляют разные элементы и т. Д.? – adeneo

@adeneo, но они одинаковы для обеих форм. Я мог бы сократить его пополам –

Поскольку они все разные, или по крайней мере close обратного вызова и mindate, вы можете определить объект через общие настройки, и использовать его во всех из них, чтобы сделать его проще

var settings = { 
    defaultDate: "+1w", 
    dateFormat: 'dd-mm-yy', 
    changeMonth: true, 
    numberOfMonths: 1 
} 
$(".datepicker1").datepicker($.extend(settings, { 
    minDate: 0, 
    onClose: function (selectedDate) { 
     var d = new Date(selectedDate); 
     d.setDate(d.getDate() + 90); 
     $(".datepicker2", $(this).closest('form')).datepicker("option", "minDate", selectedDate); 
     $(".datepicker2", $(this).closest('form')).datepicker("option", "maxDate", d); 
    }}) 
); 
$(".datepicker2").datepicker($.extend(settings, { 
    minDate: 1, 
    onClose: function (selectedDate) { 
     $(".datepicker1", $(this).closest('form')).datepicker("option", "maxDate", selectedDate); 
    }}) 
); 
$(".datepicker3").datepicker($.extend(settings, { 
    minDate: 0, 
    onClose: function (selectedDate) { 
     var d = new Date(selectedDate); 
     d.setDate(d.getDate() + 90); 
     $(".datepicker4", $(this).closest('form')).datepicker("option", "minDate", selectedDate); 
     $(".datepicker4", $(this).closest('form')).datepicker("option", "maxDate", d); 
    }}) 
); 
$(".datepicker4").datepicker($.extend(settings, { 
    minDate: 1, 
    onClose: function (selectedDate) { 
     $(".datepicker3", $(this).closest('form')).datepicker("option", "maxDate", selectedDate); 
    }}) 
);

FIDDLE

источник

2013-12-13 16:42:17 adeneo

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

@ TheApptracker - отредактировал его! – adeneo

Мой текущий пример - DEMO jsfiddle.net/Fa8Xx/1112, если вы выберете дату из первого поля ввода, а затем попробуйте выбрать дату из второго поля ввода. Он ограничит вас только будущими датами. –

Here is Demo

Вы можете использовать класс:

<input type="text" class="datepicker" id="date_1" /> 
<input type="text" class="datepicker" id="date_2" /> 
<input type="text" class="datepicker" id="date_3" /> 

$(".datepicker").datepicker({ 
    defaultDate: "+1w", 
    dateFormat: 'dd-mm-yy', 
    changeMonth: true, 
    minDate: +1, 
    numberOfMonths: 1, 
    onClose: function (selectedDate) { 
     $("#OutwardDate").datepicker("option", "maxDate", selectedDate); 
    } 
});

источник

2013-12-13 16:30:28

Спасибо, но это не сработает, так как в моем примере пользователь был отключен от выбора даты окончания раньше даты начала. К сожалению, вашим примерам не хватает этой функции –

Установить класс CSS на каждом из элементов и вызвать .datepicker() по отношению к этому классу. Например, $ (". DateField"). Datepicker ({...});

источник

2013-12-13 16:31:32 JimmyJay86

Попробуйте использовать класс и назначьте datepicker соответственно вместо отдельных идентификаторов.

Я использовал четыре класса, потому что у вас есть разные варианты и разные действия в событии onClose.

Код:

$(".datepicker1").datepicker({ 
    defaultDate: "+1w", 
    dateFormat: 'dd-mm-yy', 
    changeMonth: true, 
    minDate: 0, 
    numberOfMonths: 1, 
    onClose: function (selectedDate) { 
     var d = new Date(selectedDate); 
     d.setDate(d.getDate() + 90); 
     $("#DateTo").datepicker("option", "minDate", selectedDate); 
     $("#DateTo").datepicker("option", "maxDate", d); 
    } 
}); 
$(".datepicker2").datepicker({ 
    defaultDate: "+1w", 
    dateFormat: 'dd-mm-yy', 
    changeMonth: true, 
    minDate: +1, 
    numberOfMonths: 1, 
    onClose: function (selectedDate) { 
     $("#DateFrom").datepicker("option", "maxDate", selectedDate); 
    } 
}); 
$(".datepicker3").datepicker({ 
    defaultDate: "+1w", 
    dateFormat: 'dd-mm-yy', 
    changeMonth: true, 
    minDate: 0, 
    numberOfMonths: 1, 
    onClose: function (selectedDate) { 
     var d = new Date(selectedDate); 
     d.setDate(d.getDate() + 90); 
     $("#ReturnDate").datepicker("option", "minDate", selectedDate); 
     $("#ReturnDate").datepicker("option", "maxDate", d); 
    } 
}); 
$(".datepicker4").datepicker({ 
    defaultDate: "+1w", 
    dateFormat: 'dd-mm-yy', 
    changeMonth: true, 
    minDate: +1, 
    numberOfMonths: 1, 
    onClose: function (selectedDate) { 
     $("#OutwardDate").datepicker("option", "maxDate", selectedDate); 
    } 
});

Демо: http://jsfiddle.net/A6pe6/

источник

2013-12-13 16:33:57

Спасибо, но это не сработает, так как в моем примере пользователь отключен от выбора даты окончания раньше даты начала. К сожалению, вашим примерам не хватает этой функции. –

Я не могу использовать эту функцию в вашем примере. Вы можете мне это показать? –

DEMO http://jsfiddle.net/Fa8Xx/1112/, если вы выберете дату из первого поля ввода, а затем попытайтесь выбрать дату из второго поля ввода. Он ограничит вас только будущими датами. –

Используйте общий класс селектора имя вместо различных идентификаторов. Использование нескольких идентификаторов может использовать процессорное время.

$(".YourCommonClassName").datepicker({ 
//DataPicker parameters.. 
});

источник

2013-12-13 16:34:47

Спасибо, но это не сработает, так как в моем примере пользователь был отключен от выбора даты окончания раньше даты начала. К сожалению, вашим примерам не хватает этой функции. –

Несколько jQuery Datepickers несколько форм

ответ

Смежные вопросы