How to choose a future date in datepicker jquery

Question

I am using datePicker as follows:

 $("#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'}); 

I want to make you choose a date in the future, not in the past, is there any way to do this? if so, it can be changed dynamically for the second datepicker, so if the user selects a date, in the second field he must select the date next to the first one selected. I hope I ask, as well as my question :) Thank you all!

Answer 1

minDate:1 should only give dates tomorrow and beyond. Then add onselect to restrict the 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' }); 

Link: http://blog.alagad.com/2009/04/20/playing-with-jquery-datepicker/

Example: http://jsfiddle.net/jtbowden/F39kt/

Answer 2

If you return [false] in the beforeShowDay event beforeShowDay, it will disable this day. You can compare the date and the current date and return [true / false] respectively.

Try it.

 $("#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

Answer 3

 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); 

This is how I do it. "thedate" is my datpicker. I come across today + 10 days.

Answer 4

Try it...

 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 ); } }); 

Answer 5

http://jqueryui.com/demos/datepicker/ .

Look at the minDate parameter. You can install it dynamically using the option method.

Answer 6

This is an old thread, but it is somewhat obscure. Perhaps due to changes in the jQuery UI widgets themselves, but for those who stumbled upon this:

To limit the scope of datepickers to only future dates, set minDate to 0.

To limit only past dates, you should set the maxDate parameter to 0.

This is good because it avoids calling the new Date() function, as suggested elsewhere in this thread.

Example:

 $('.your_datepicker').datepicker({ minDate: 0 });