2012-02-02 2 views
4

Я использую datePicker таким образом:Как выбрать дату будущего в Datepicker JQuery

$("#dataStart").datepicker({ 
beforeShow: function() { $('#ui-datepicker-div').css('z-index',9999); }, 
dateFormat: 'mm/dd/yy'}); 
$("#dataEnd").datepicker({ 
beforeShow: function() { $('#ui-datepicker-div').css('z-index',9999); }, 
dateFormat: 'mm/dd/yy'}); 

Я хочу, чтобы заставить выбрать дату в будущем, а не в прошлом, есть ли возможность сделать это? , если это так, можно изменить динамическим способом для второго datepicker, поэтому, если пользователь выбирает дату, во втором поле он должен выбрать дату рядом с первым выбранным. Надеюсь, я тоже задаюсь вопросом :) Спасибо всем!

ответ

12

minDate:1 должны разрешить только даты завтра и далее. Затем добавьте onselect ограничить dataEnd:

$("#dataStart").datepicker({ 
    minDate: 1, 
    onSelect: function(theDate) { 
     $("#dataEnd").datepicker('option', 'minDate', new Date(theDate)); 
    }, 
    beforeShow: function() { 
     $('#ui-datepicker-div').css('z-index', 9999); 
    }, 
    dateFormat: 'mm/dd/yy' 
}); 

Ссылка: http://blog.alagad.com/2009/04/20/playing-with-jquery-datepicker/

Пример: http://jsfiddle.net/jtbowden/F39kt/

+0

datepicker в dataEnd таким образом не работает ... – JackTurky

+0

Что вы имеете в виду? –

+0

если я нажимаю на ввод текста datepicker в dateend не показывает – JackTurky

0
var myDate = new Date(); 
myDate.setDate(myDate.getDate()+10); 
var prettyDate =(myDate.getMonth()+1) + '/' + myDate.getDate() + '/' + myDate.getFullYear(); 

$("#thedate").datepicker({dateFormat: 'mm/dd/yy',altFormat: 'yyyymmdd'}); 
$("#thedate").val(prettyDate); 

Вот как я это делаю. «thedate» - это мой датпикер. Я натыкаюсь на сегодняшний день + 10 дней.

0

Попробуйте это ...

var dates=$("#from, #to").datepicker({ 
    changeMonth:true, onSelect: function(selectedDate) { 
     var option = this.id == "from" ? "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); 
    } 
}); 
2

Если вы вернетесь [false] в beforeShowDay событие datepicker, оно отключает этот день. Вы можете сравнить дату и текущую дату и вернуть [true/false] соответственно.

Попробуйте это.

$("#dataStart").datepicker({ 
    beforeShow: function() { 
     $('#ui-datepicker-div').css('z-index',9999); 
    }, 
    dateFormat: 'mm/dd/yy', 
}); 
$("#dataEnd").datepicker({ 
    beforeShow: function() { 
     $('#ui-datepicker-div').css('z-index',9999); 
    }, 
    dateFormat: 'mm/dd/yy', 
    beforeShowDay: function(date){ 
      return [(date > ($("#dataStart").datepicker("getDate") 
          || new Date()))]; 
    } 
}); 

Demo

+0

@JackTurky - Проверьте это. – ShankarSangoli

+0

@JackTurky - Добавлен код для сравнения даты окончания с датой начала и соответственно отключить даты. Если Дата начала недоступна, я просто сравниваю ее с текущей датой. – ShankarSangoli

0

Это старая нить, но это несколько выяснена. Может быть из-за изменения в самой JQuery UI Widget, но для тех, кто наткнуться на это:

Чтобы ограничить datepickers возможности для будущих дат только - установить minDate параметров в 0.

Чтобы ограничить прошлые даты только вы установил бы параметр maxDate на 0.

Это хорошо, потому что это позволяет избежать вызова функции new Date(), как предлагается в другом месте этой темы.

Пример:

$('.your_datepicker').datepicker({ 
    minDate: 0 
}); 
Смежные вопросы