Jquery datetimepicker (xdsoft): 使用两个内联日期选择器动态限制日期范围

Question

使用可用的 Jquery 日期选择器插件 here:

有文档显示我们如何使用两个日期选择器动态限制日期范围（如果它们在单击文本输入时显示）。我们以前有过这个工作 - 但是，客户现在要求以内联方式显示日历，这意味着使用他们文档中的以下代码不再有效：

onShow:function( ct ){
this.setOptions({
   minDate:jQuery('#date_timepicker_start').val()?jQuery('#date_timepicker_start').val():false
  })
 },

我猜我们可以通过某种方式使用 'onGenerate' 或 'onSelectDate' 来完成类似的事情，但不知道如何去做。

使命是：

确保收集日期选择器的最短日期和时间不能早于选择的交货日期和时间和
一旦选择了取件日期和时间，请确保交货 date/time 不能在选择取件日期和时间后重置为某些内容

这是一个 JSfiddle - 玩一玩 :)

Answer 1

我使用 'onChangeDateTime' 设法满足了您需要的两个要求。下面是完整的代码：

$(function () {
    /**
     * we declare a variable here so that we can use it within both our datepicker onChangeDateTime functions
     * this var will hold the time of delivery + 1hour and will be used in the collection picker when both delivery and collection dates are the same
     */
    var setMinTime = "";

    //Delivery - DatePicker1
    $('#products_delivery').datetimepicker({
        inline: true,
        formatDate: 'Y/m/d',
        dayOfWeekStart: 1,
        lang: 'en',
        allowTimes: ['09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00'],
        defaultSelect: false,
        onChangeDateTime: function (deliveryDateSelected) {

            //when we change Date in delivery picker, we set the collection picker to have this date as minimum
            $("#products_collection").datetimepicker({
                minDate: deliveryDateSelected
            });

            // get the time from delivery picker and add 1 hour, so we can set minTime in collection picker if needed
            var curTimePlusOneHour = deliveryDateSelected.getHours() + 1;
            setMinTime = curTimePlusOneHour.toString() + ":00";
        }
    }); //End of delivery datepicker

    //Collection - DatePicker2
    $('#products_collection').datetimepicker({
        inline: true,
        formatDate: 'Y/m/d',
        dayOfWeekStart: 1,
        lang: 'en',
        allowTimes: ['09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00'],
        defaultSelect: false,
        onChangeDateTime: function (collectionDateSelected) {

            //set the maxDate of delivery picker according to our collection picked day
            $("#products_delivery").datetimepicker({
                maxDate: collectionDateSelected
            });

            //get the value of the dates without time

            //first we gate the value of the selected date
            var deliveryDate = $('#products_delivery').val();
            //deliveryDate is in format "2015/08/06 14:08",and is a string so we use split to take only the date without the time
            var deliveryDateArr = deliveryDate.split(' ');

            // same as above
            var collectionDate = $('#products_collection').val();
            var collectionDateArr = collectionDate.split(' ');

            //if same date also set minTime
            if (deliveryDateArr[0] === collectionDateArr[0]) {
                $("#products_collection").datetimepicker({
                    minTime: setMinTime
                });
            } else {
                $("#products_collection").datetimepicker({
                    minTime: "09:00"
                });
            } //End of if..else..
        }
    }); //End of collection datepicker

});

这是 JSFiddle，看看 :) - 希望对您有所帮助 :)

Jquery datetimepicker (xdsoft): 使用两个内联日期选择器动态限制日期范围

Jquery datetimepicker (xdsoft): dynamically restricted date range with two inline datepickers

javascript

jquery

datepicker