Question

当您为开始日期选择任何内容时，结束日期应自动与jQuery中单击一下的开始日期相同

var dates = $("#filterDateStart, #filterDateEnd").datepicker({
    dateFormat: "yy-mm-dd",
    changeMonth: true,
    numberOfMonths: 1,
    onSelect: function (selectedDate) {
        var option = this.id == "filterDateStart" ? "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);
    }
});


var dates1 = $("#filterDateStart1, #filterDateEnd1").datepicker({
    dateFormat: "yy-mm-dd",
    changeMonth: true,
    numberOfMonths: 1,
    onSelect: function (selectedDate) {
        var option = this.id == "filterDateStart1" ? "minDate" : "maxDate",
                instance = $(this).data("datepicker"),
                date = $.datepicker.parseDate(
                    instance.settings.dateFormat ||
                    $.datepicker._defaults.dateFormat,
                    selectedDate, instance.settings);
        dates1.not(this).datepicker("option", option, date);
    }
});

Answer 1

 $("#filterDateStart, #filterDateEnd").datepicker({
    dateFormat: "yy-mm-dd",
    changeMonth: true,
    numberOfMonths: 1,
    onSelect: function (selectedDate) {
        $( "#filterDateEnd" ).datepicker( "setDate", selectedDate );
    }
});

希望它有效

Answer 2

尝试以下代码，它会同时显示日期和时间

var startDateTextBox = $('#startdate');
    var endDateTextBox = $('#enddate');

    startDateTextBox.datetimepicker({ 
        minDate: '0',
        dateFormat: "yy-mm-dd",
        timeFormat: 'hh:mm:ss',
        onClose: function(dateText, inst) {
            if (endDateTextBox.val() != '') {
                var testStartDate = startDateTextBox.datetimepicker('getDate');
                var testEndDate = endDateTextBox.datetimepicker('getDate');
                if (testStartDate > testEndDate)
                    endDateTextBox.datetimepicker('setDate', testStartDate);
            }
            else {
                endDateTextBox.val(dateText);
            }
        },
        onSelect: function (selectedDateTime){
            endDateTextBox.datetimepicker('option', 'minDate', startDateTextBox.datetimepicker('getDate') );
        }
    });
    endDateTextBox.datetimepicker({ 
        minDate: '0',
        dateFormat: "yy-mm-dd",
        timeFormat: 'hh:mm:ss',
        onClose: function(dateText, inst) {
            if (startDateTextBox.val() != '') {
                var testStartDate = startDateTextBox.datetimepicker('getDate');
                var testEndDate = endDateTextBox.datetimepicker('getDate');
                if (testStartDate > testEndDate)
                    startDateTextBox.datetimepicker('setDate', testEndDate);
            }
            else {
                startDateTextBox.val(dateText);
            }
        },
        onSelect: function (selectedDateTime){
            startDateTextBox.datetimepicker('option', 'maxDate', endDateTextBox.datetimepicker('getDate') );
        }
    });

Answer 3

稍微简化的方法..我更喜欢使用.destroy()＆amp;在每次更改时重新创建.datepicker()。虽然，显然取决于用户首先选择.start-datepicker()（我鼓励！）

<script>
   /**
    * Start the 'Start Date' & End Date picker,
   **/
   $('.start-datepicker').datepicker({dateFormat: 'yy-mm-dd'});
   $('.end-datepicker').datepicker({dateFormat: 'yy-mm-dd'});

   /**
    *  On the 'On change' event listener, 
    *  dynamically re-create the 'end' date based
    *  on the Start date.
   **/
   $('.start-datepicker').on("change", function() {

       //Begin the re-creation
       $('.end-datepicker').datepicker( "destroy" );

       $('.end-datepicker').datepicker({
                /**
                 * Set the date to be the same as the first
                **/
                minDate : $('.start-datepicker').datepicker( "getDate" ),
                dateFormat: 'yy-mm-dd',
                //Optional: setDate: The same as minDate.
             });
        });
</script>

在datepicker上自动设置结束日期

3 个答案: