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

Question

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.

Answer 1

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.

Answer 2

This worked for me.

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

Answer 3

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

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