Сам скрипт нашел тут http://api.jqueryui.com/datepicker/ Код (Text): <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Datepicker - Select a Date Range</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="/resources/demos/style.css"> <script> $(function() { $( "#from" ).datepicker({ changeMonth: true, numberOfMonths: 1, onClose: function( selectedDate ) { $( "#to" ).datepicker( "option", "minDate", "-2m" ); } }); $( "#to" ).datepicker({ changeMonth: true, numberOfMonths: 1, onClose: function( selectedDate ) { $( "#from" ).datepicker( "option", "maxDate", "+2m" ); } }); }); </script> </head> <body> <label for="from">From</label> <input type="text" id="from" name="from"> <label for="to">to</label> <input type="text" id="to" name="to"> </body> </html> нужно чтобы можно было установить два ограничения 1) Самая ранняя дата меньше которой нельзя выбрать, к примеру если доходит выбор до 1 сентября 2010, то 31 августа 2010 уже не доступно 2) Ограничение по размеру диапазона дат, то есть установил я 60 дней и значит нельзя выбрать диапазон больше Пытался всяко разно настроить не получилось, нужно как то поиграться с minDate и maxDate и еще чем то. Помогите плз настроить.
Найди одно отличие: Код (Text): $( "#from" ).datepicker({ changeMonth: true, numberOfMonths: 1, onClose: function( selectedDate ) { $( "#from" ).datepicker( "option", "minDate", "-2m" ); } });
вообще ничего не изменилось сделал так Код (Text): <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="/resources/demos/style.css"> <script> $(function() { $( "#from" ).datepicker({ changeMonth: true, numberOfMonths: 1, onClose: function( selectedDate ) { $( "#from" ).datepicker( "option", "minDate", "-2m" ); } }); $( "#to" ).datepicker({ changeMonth: true, numberOfMonths: 1, onClose: function( selectedDate ) { $( "#to" ).datepicker( "option", "maxDate", "+2m" ); } }); }); </script> <label for="from">от</label> <input type="text" id="from" name="from"> <label for="to">до</label> <input type="text" id="to" name="to">
YSandro Сорри не прав, ограничение работает, просто когда в поле даты ничего нет, то листать дату можно хоть на 1000 лет назад, но при выборе встает все равно не позже чем 2 месяца. А как задать диапазон в 60 дней между начальной и конечно датой ?
1. Выбрать первую дату, как обычно. 2. Взять дату из первого поля с помощью getDate(), прибавить 60 дней. 3. Установить макс. дату для второго поля. Ну вот, я поигрался, пример: Код (Text): $(function(){ $("#from").datepicker({ changeMonth: true, numberOfMonths: 1, minDate: -20,// 20 дней назад - минимальная дата onSelect: function(selectedDate) { var minDate = $.datepicker.parseDate("mm/dd/yy", selectedDate); $("#to").datepicker("option", "minDate", minDate);// мин. для 2 поля var maxDate = new Date(minDate.getTime());// копируем дату maxDate.setDate(maxDate.getDate()+30);// от выбранной +30 дней $("#to").datepicker("option", "maxDate", maxDate);// макс. для 2 поля } }); $("#to").datepicker({ changeMonth: true, numberOfMonths: 1 }); }); Тут при инициализации сразу ставим минимальную дату (например, 20 дней назад). После выбора устанавливаем минимум и максимум для второго поля. Второе поле, видимо, вообще надо заблокировать, пока не выбрана первая дата.
YSandro Все работает спасибо! 1) А как заблокировать второе поле до того как первое получит значение ? 2) Как сделать чтобы второе поле было еще ограниченно по максимальной дате по сегодняшнему дню (сейчас максимальный диапазон для выбора 30 дней, но можно выбрать и будущие даты если они попадают в диапазон 30 дней)