CODEWITHSUNDEEP
jquery-uidatepicker
gurpreet
gurpreet

Reputation: 31

Jquery UI date picker Date range 6 month Limit

I am using jQuery ui date picker (date range) I want to restrict 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');
            }

        }

    });

Upvotes: 3

Views: 11758

Answers (2)

Anjith K P
Anjith K P

Reputation: 2158

You can get month/day/year from the selected date, then change the value accordingly. I need to a condition that the user only need to select maximum of 6 months from the date picker. So when to_date is selected then I will set minimun from 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 );
    }
});

Upvotes: 1

Sudhir Bastakoti
Sudhir Bastakoti

Reputation: 100175

Try:


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

Upvotes: 9

Related Questions