How to restrict date range of a jquery datepicker by giving two dates?

kbvishnu picture kbvishnu · Dec 27, 2010 · Viewed 78.2k times · Source

I am having two dates that is stored in db and am selecting it using $.ajax() and what i need is to show the datepicker values between the dates I selected from db.

Here is my code for it.But it is not working properly

function setDatePickerSettings(isFisc) {
        var fSDate, fEDate;
        $.ajax({
            type: "POST",
            url: '../Asset/Handlers/AjaxGetData.ashx?fisc=1',
            success: function(data) {
                alert(data);
                var res = data.split("--");//data will be 4/4/2010 12:00:00--5/4/2011 12:00:00 
                var sDate = res[0].split(getSeparator(res[0]));
                alert("Separator " + getSeparator(res[1]) + " Starts " + sDate);
                var eDate = res[1].split(getSeparator(res[1]));
                alert("End " + eDate);
                alert("sub " + sDate[0]);
                fSDate = new Date(sDate[2].substring(0, 4), sDate[0], sDate[1]);
                alert("Starts " + fSDate.substring(0, 4));
                fEDate = new Date(eDate[2].substring(0, 4), eDate[0], eDate[1]);
                alert("eND " + fEDate.toString());

            }

        });
          var dtSettings = {
        changeMonth: true,
        changeYear: true,
        showOn: 'both',
        buttonImage: clientURL + 'images/calendar.png',
        buttonImageOnly: true,
        showStatus: true,
        showOtherMonths: false,
        dateFormat: 'dd/mm/yy',
        minDate:fSDate, //assigning startdate
        maxDate:fEDate //assigning enddate
    };

    return dtSettings;
}

Pls provide some solution. I need the datetime picker which requires values between that range. Thanks in advance

Answer

The Muffin Man picture The Muffin Man · Dec 27, 2010

Your syntax is wrong for the minDate/maxDate. You can read the documentation on the jQuery UI website where the demo is. I suggest you take a look at it to tailor it to your specific case. It looks something like this:

$( ".selector" ).datepicker({ minDate: new Date(2007, 1 - 1, 1) });

or

the following will make it so that you can't pick anything previous to today.

$( ".selector" ).datepicker({ minDate: 0 });

and this will make it so you can't pick anything before tomorrow

$( ".selector" ).datepicker({ maxDate: 1 });

Edit: Here is how you insert your own date, but i'm having an issue getting the dateFormat to work correctly, as you can see I have the dateFormat specified, but the format I actually put in is ignoring the dateformat.

$("#txtDateStart").datepicker({dateFormat:'mm/dd/yy', minDate: new Date(2010,11,12) });