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.

Future Coder · Accepted Answer · 2019-03-21 05:38:21Z

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

                });

double-beep · Accepted Answer · 2020-05-29 19:26:31Z

0

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

edited May 29, 2020 at 19:26

double-beep

5,67019 gold badges43 silver badges50 bronze badges

answered May 29, 2020 at 16:27

Lívia Gomes

466 bronze badges

1 Comment

double-beep Over a year ago

While this code may solve the question, including an explanation of how and why this solves the problem would really help to improve the quality of your post, and probably result in more up-votes. Remember that you are answering the question for readers in the future, not just the person asking now. Please edit your answer to add explanations and give an indication of what limitations and assumptions apply. From Review

Collectives™ on Stack Overflow

Restrict date in jquery datetimepicker based on another datetimepicker

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related