Question

使用可用的Jquery datepicker插件here：

有文档显示我们如何在点击文本输入时显示带有两个日期选择器的动态限制日期范围。我们之前已经开始工作了 - 但是，客户端现在要求将内容显示为内联，这意味着使用其文档中的以下代码不再有效：

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

我猜我们可以某种方式使用＆＃39;生成＆＃39;或者＆＃39; onSelectDate＆＃39;要完成类似的事情，但无法解决如何做到这一点。

任务是：

确保收集日期选择器的最短日期和时间不能超过选择交付的日期和时间 AND
一旦选择了收集日期和时间，请确保在收集的日期和时间之后无法将交货日期/时间重置为某些内容

这里有一个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）：动态限制日期范围，带有两个内联日期选择器

1 个答案: