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

问题

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

回答1:

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

回答2:

I know this is an ancient post but the bug that @TheMuffinMan raised about not being able to get the date format working with the date restriction options is real and appears to only surface when the options are in-line as in his example.

If you have to use this format, and if anyone is still interested, the way around it is to put the date formatting options as the last option in the set. For example the code below works flawlessly for me.

var minDate = -20;
var maxDate = "+1M +10D" 

$('body').on('focus',".datepicker", function(){
    $(this).datepicker({ minDate: minDate, maxDate: maxDate },{dateFormat: "dd/mm/yy"});
});

I hope it helps someone else.

回答3:

This worked for me.

$('#date-time-picker').datepicker({
    format: 'YYYY-MM-DD',
    useCurrent: false,
    showClose: true,
    minDate: '2018-02-01',
    maxDate: '2018-03-15',
})

回答4:

I used this one and I got the output.thanks all

 function setFiscDatePickerSettings() {

        var fSDate, fEDate, sDate, fEDate;
        var dtSettings;
        sDate = document.getElementById("<%=hdfFiscStart.ClientID %>").value.split(getSeparator(document.getElementById("<%=hdfFiscStart.ClientID %>").value));
        eDate = document.getElementById("<%=hdfFiscEnd.ClientID %>").value.split(getSeparator(document.getElementById("<%=hdfFiscEnd.ClientID %>").value));
        fSDate = new Date(sDate[2].substring(0, 4), sDate[0] - 1, sDate[1]);
        fEDate = new Date(eDate[2].substring(0, 4), eDate[0] - 1, eDate[1]);
        dtSettings = {
            changeMonth: true,
            changeYear: true,
            showOn: 'both',
            buttonImage: clientURL + 'images/calendar.png',
            buttonImageOnly: true,
            showStatus: true,
            showOtherMonths: false,
            dateFormat: 'dd/mm/yy',
            minDate: fSDate, maxDate: fEDate
        };

        return dtSettings;
    }


    function bindFiscalDatePicker() {
        var inputDt = $("input.datepicker_fisc");
        inputDt.addClass("numbers_only");
        inputDt.addClass("allow_special");
        inputDt.attr("symbolcodes", "/");
        inputDt.datepicker(setFiscDatePickerSettings());
    }

来源：https://stackoverflow.com/questions/4537900/how-to-restrict-date-range-of-a-jquery-datepicker-by-giving-two-dates