Restrict date in jquery datetimepicker based on another datetimepicker

Question

I have two text boxes with a datetimepicker hooked up to them. The text boxes are for start date and end date. The first datetimepicker is setup so that the user cannot choose a date before today, but can choose any date in the future.

How can I setup the second datetimepicker so that it cannot choose a date before the date chosen in the first date picker and whatever date is selected in first datetimepicker, the second datetimepicker date should be exactly 1 month from the first datetimepicker(User can then select the second datetimepicker to be 1 month or less than 1 month)?

Here's what I have so far:

Tried it via datetimepicker and onChangeDateTime function

<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>

If today is 1/16/2019 and I choose 1/28/2019 in the first datetimepicker, then the second date picker shouldn't be able to choose anything before 1/28/2019, second datetimepicker date should be 2/28/2019 or the user if wants, can select the date as less than 1 month.

Answer 1

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);
}

Answer 2

You can use this function and use startdate id as date_timepicker_startend and enddate id as date_timepicker_end

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

These are the plugins you have to call

<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>

Date Logic with date and time validation

                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
                 });

                });