CODEWITHSUNDEEP
jquerydatepicker
Jayyrus
Jayyrus

Reputation: 13061

How to select date future in datepicker jquery

i'm using datePicker in this way:

$("#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 force select a date in future and not in the past, is there a possibility to do it? if so, is possible to change in a dynamic way for the second datepicker, so if user select a date, in the second field he has to select a date next to the first selected. i hope i ask as well my question :) Thanks all!

Upvotes: 4

Views: 22712

Answers (6)

DrewT
DrewT

Reputation: 5082

This is an old thread but it's somewhat unclarified. Could be because of changes to the jQuery UI Widget itself, but for anyone stumbling upon this:

To limit datepickers scope to future dates only - set the minDate param to 0.

To limit to past dates only you would set the maxDate param to 0.

This is nice because it avoids having to call a new Date() function as is suggested elsewhere in this thread.

Example:

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

Upvotes: 0

Jeff B
Jeff B

Reputation: 30099

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

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

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

Upvotes: 12

ShankarSangoli
ShankarSangoli

Reputation: 69915

If you return [false] in beforeShowDay event of datepicker it disables that day. You can compare the date and the current date and return [true/false] accordingly.

Try this.

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

Upvotes: 2

Jasper
Jasper

Reputation: 76003

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

Look at the minDate option. You can set it dynamically with the option method.

Upvotes: 0

bmoran
bmoran

Reputation: 1529

Try this...

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

Upvotes: 0

Sid
Sid

Reputation: 7631

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 datepicker. I'm bumping the date to today + 10 days.

Upvotes: 0

Related Questions