基于另一个 datetimepicker 限制 jquery datetimepicker 中的日期

Question

我有两个文本框，其中连接了一个 datetimepicker。文本框用于开始日期和结束日期。第一个 datetimepicker 设置为用户不能选择今天之前的日期，但可以选择未来的任何日期。

如何设置第二个 datetimepicker，使其无法选择在第一个 datetimepicker 中选择的日期之前的日期以及在第一个 datetimepicker 中选择的任何日期，第二个 datetimepicker 日期应该正好是第一个 datetimepicker 的 1 个月（用户然后可以选择第二个 datetimepicker 为 1 个月或小于 1 个月）？

这是我目前所拥有的：

通过 datetimepicker 和 onChangeDateTime 函数尝试过

<script src="~/Scripts/jquery.datetimepicker.js"></script>
    <script>
    $(document).ready(function () {
        $('#ValidFrom').datetimepicker({
            datepicker: true,
            timepicker: false,
            format: 'm/d/Y',
            step: 30,
            minDate: new Date(),
            onChangeDateTime: function (dp, $input) {
                var date = new Date($input.val());
                $('#ValidTo').datetimepicker("option", "minDate", date);
                //alert(date);
                var date2 = new Date($input.val());
                date2.setMonth(date.getMonth() + 1);
                $('#ValidTo').datetimepicker("option", "maxDate", date2);
                //alert(date2);
                date2 = (date2.getMonth() + 1) + '/' + date2.getDate() + '/' + date2.getFullYear();
                $('#ValidTo').val(date2);   
            }
        });



        $('#ValidTo').datetimepicker({
            datepicker: true,
            timepicker: false,
            format: 'm/d/Y',
            step: 30,
            minDate: new Date()
        });
    });

</script>

如果今天是 1/16/2019 并且我在第一个 datetimepicker 中选择了 1/28/2019，那么第二个日期选择器在 1/28/2019 之前应该无法选择任何内容，第二个 datetimepicker 日期应该是 2 /28/2019 或用户如果需要，可以选择小于 1 个月的日期。

Answer 1

您可以使用此函数并将 startdate id 用作 date_timepicker_startend 并将 enddate id 用作 date_timepicker_end

<input type="text" class="form-control" id="date_timepicker_start">
<input type="text" class="form-control" id="date_timepicker_end">

这些是你必须调用的插件

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.min.js"></script>

具有日期和时间验证的日期逻辑

                jQuery(function(){

                  var logic_start = function( currentDateTime ){

                      var d = new Date(currentDateTime); var date = d.getDate();
                      var month = d.getMonth(); var year = d.getYear();
                      var hours = d.getHours(); var minutes = d.getMinutes();

                      var dd = new Date($('#date_timepicker_end').val());  var end_date = dd.getDate();
                      var end_month = dd.getMonth(); var end_year = dd.getYear();
                      var end_hours = dd.getHours();  var end_minutes = dd.getMinutes();

                      var endtime= end_year+'/'+end_month+'/'+end_date;
                      var starttime= year+"/"+month+"/"+date;

                      if(starttime==endtime){
                        this.setOptions({
                          maxTime:end_hours+":00"
                        });
                      }else
                        this.setOptions({
                          maxTime:"23:00"
                        });

                                this.setOptions({
                                 maxDate:jQuery('#date_timepicker_end').val()?jQuery('#date_timepicker_end').val():false
                             });

                  };


                  var logic_end = function( currentDateTime ){

                      var d = new Date(currentDateTime);   var date = d.getDate();
                      var month = d.getMonth();   var year = d.getYear();
                      var hours = d.getHours();   var minutes = d.getMinutes();

                      var dd = new Date($('#date_timepicker_start').val());  var end_date = dd.getDate();
                      var end_month = dd.getMonth();   var end_year = dd.getYear();
                      var end_hours = dd.getHours();   var end_minutes = dd.getMinutes();

                      var starttime= end_year+'/'+end_month+'/'+end_date;
                      var endtime= year+"/"+month+"/"+date;

                      if(starttime==endtime){
                        this.setOptions({
                          minTime:end_hours+":00"
                        });
                      }else
                        this.setOptions({
                          minTime:"00:00"
                        });

                                this.setOptions({
                                 minDate:jQuery('#date_timepicker_start').val()?jQuery('#date_timepicker_start').val():false
                             });

                  };



                 jQuery('#date_timepicker_start').datetimepicker({
                      format:'Y/m/d H:i:s',
                      onChangeDateTime:logic_start,
                      onShow:logic_start
                 });

                 jQuery('#date_timepicker_end').datetimepicker({
                      format:'Y/m/d H:i:s',
                      onChangeDateTime:logic_end,
                      onShow:logic_end
                 });

                });

Answer 2

let DateInitial = $("#DateInitial");
let DateEnd = $("#DateEnd");
let dateNow = new Date();

/* click start clear end  */
DateInitial.on("click", function(){
    DateEnd.val(" ");

    DateInitial.datetimepicker({ 
        onShow:function( ct ){
            this.setOptions({
                format: 'd-m-Y H:i',
                closeOnDateSelect : true,
                validateOnBlur : true,
                minDate: -0,
                minTime: dateNow.getTime(),
                onClose: function($input){
                    dateAllowPlusOne($input);
                }
            });
       }
    });
});


function dateAllowPlusOne(dateStart){

    if(DateInitial.val()=="")
    {
        DateInitial.focus();
        return false;
    }

    DateEnd.datetimepicker({
        'format': 'd/m/Y H:i',
        'minDate': -0,
        startDate: dateStart,
        'closeOnDateSelect' : true,
        'validateOnBlur' : true,
        'minDateTime': new Date()
    });

    DateEnd.attr("disabled", false);
}