Question

我有两个带有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);
}

根据另一个datetimepicker限制jquery datetimepicker中的日期

2 个答案: