Geek asks and answers

Jquery UI date picker Date Range 6 months Limit

I am using jQuery ui date picker (date range) I want to limit it to 6 months

var dates = $("#availability_date_from, #availability_date_to").datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 1,
        minDate:'0',

        yearRange:'c-18:c',

        onSelect: function( selectedDate ) {

            var option = this.id == "availability_date_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 );


            if(this.id == "availability_date_to"){

                commonJSComplete(this.value,'availability_date_to');
                $('#responsecontainer').load('profilemeter.php');
            }
            else if(this.id == "availability_date_from"){
                commonJSComplete(this.value,'availability_date_from');
            }

        }

    });
+3
source share
2 answers

Try:


var dates = $("#availability_date_from, #availability_date_to").datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 1,
        minDate:'0',
        maxDate: '+6m',   //add this
.....
+7
source

You can get the month / day / year from the selected date, and then change the value accordingly. I need the condition that the user needs to select a maximum of 6 months from the date of selection. Therefore, when to_date is selected, I set minimun from the date to a value that is 6 months below the selected to_date. Try this and let me know :)

$( "#txtFromDate" ).datepicker({
    dateFormat: 'yy-mm-dd',
    changeMonth: true,
    changeYear: true,
    onSelect: function( selectedDate ) {
        $( "#txtToDate" ).datepicker( "option", "minDate", selectedDate );
    }
});
$( "#txtToDate" ).datepicker({
    dateFormat: 'yy-mm-dd',
    changeMonth: true,
    changeYear: true,
    onSelect: function( selectedDate , instance) {

        var minDate = $.datepicker.parseDate(instance.settings.dateFormat, selectedDate, instance.settings)
        minDate.setMonth(minDate.getMonth() - 6);
        $( "#txtFromDate" ).datepicker( "option", "minDate", minDate );
    }
});
+1
source

More articles:


All Articles