Jquery UI 日期选取器 日期范围 6 个月限制



我正在使用jQuery ui日期选择器(日期范围),我想将其限制为6个月

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

尝试:


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

您可以从所选日期获取月/日/年,然后相应地更改值。我需要用户只需要从日期选择器中选择最多 6 个月的条件。因此,当选择to_date时,我将 minimun from date 设置为比所选to_date低 6 个月的值。试试这个,让我知道:)

$( "#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 );
    }
});

最新更新