set date and time in jquery datetimepicker based on another datetimepicker

Question

It works properly until any postback of control fired but when any postback event of control fire and then if we change "from date" than in "to date" datetimepicker it only shows date instead of date&time. same when I change "to date" than in "from date" datetimepicker it only shows date instead of date&time.it looks like it reset datetimepicker onClose(); I have also tried to set minDateTime and maxDateTime property but still, issue does not resolve.I am using jqueryUI datetimepicker

Issue_FromDate

Issue_ToDate

Code:

 <html>
 <head>
 <title>Demo</title> 
 <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>   
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.3/jquery-ui-timepicker-addon.min.js"></script> 
  <script>
  var server_date_time;
        function validation() {     
            var maxDate = $(".todate-with-time").val();
            var maxTime = maxDate.substr(maxDate.indexOf(" ") + 1, maxDate.length)
            if (maxDate == null || maxDate == undefined || maxDate == "") {
                maxDate = server_date_time;
                maxTime = moment(server_date_time).format("HH:mm:ss A");
            }

            var minDate = $(".frmdate-with-time").val();
            var minTime = minDate.substr(minDate.indexOf(" ") + 1, minDate.length)
            if (minDate == null || minDate == undefined || minDate == "") {
                minDate = server_date_time;;
                minTime = moment(server_date_time).format("HH:mm:ss A");
            }


            $(".frmdate-with-time").datetimepicker({
                changeMonth: true,
                changeYear: true,
                currentText: 'Today',
                showButtonPanel: true,
                timeFormat: 'hh:mm:ss TT',
                maxDate: maxDate,
                maxTime: maxTime,
                controlType: 'select',
                //onSelect: function (selectedDateTime) {
                //    this.fireEvent && this.fireEvent('onchange') || $(this).change();
                //    $('.todate-with-time').datetimepicker('option', 'minDate', selectedDateTime);
                //    //$('.todate-with-time').datetimepicker('option', 'minDate', $('.frmdate-with-time').datetimepicker('getDate'));
                //    //$(".todate-with-time").datetimepicker("option", "minTime", selected.substr(selected.indexOf(" ") + 1, selected.length));
                //}
            });
            $(".todate-with-time").datetimepicker({
                changeMonth: true,
                changeYear: true,
                currentText: 'Today',
                showButtonPanel: true,
                timeFormat: 'hh:mm:ss TT',
                minDate: minDate,
                minTime: minTime,
                controlType: 'select',
                //onSelect: function (selectedDateTime) {
                //    this.fireEvent && this.fireEvent('onchange') || $(this).change();
                //    //$(".frmdate-with-time").datetimepicker("option", "maxDateTime", selected);
                //    $('.frmdate-with-time').datetimepicker('option', 'maxDate', selectedDateTime);

                //}
            });
        }

        $(function () {
            server_date_time = new Date();    
            validation();           
            $(".frmdate-with-time").datepicker("setDate", server_date_time);
            $(".todate-with-time").datepicker("setDate", server_date_time);

            <!-- $(".frmdate-with-time").on("dp.change", function (e) { -->
                <!-- $('.todate-with-time').data("DateTimePicker").minDate(e.date); -->
            <!-- }); -->

            <!-- $(".todate-with-time").on("dp.change", function (e) { -->
                <!-- $('.frmdate-with-time').data("DateTimePicker").maxDate(e.date); -->
            <!-- }); -->
        }); 

  </script>

 </head>
 <body>
 <div class="row">
                            <div class="col-sm-3">
                                <div class="form-group">
                                    <span id="Label2" class="innerlabels col-sm-4">From</span>
                                    <div class="col-sm-8">
                                        <div class="input-group input-group-sm">
                                            <input name="txt_FDate" type="text" id="txt_FDate" class="frmdate-with-time hasDatepicker" placeholder="dd/mm/yyyy hh:mm:ss" readonly="readonly">                                            
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <div class="form-group">
                                    <span id="Label6" class="innerlabels col-sm-4">To</span>
                                    <div class="col-sm-8">
                                        <div class="input-group input-group-sm">
                                            <input name="txt_TDate" type="text" id="txt_TDate" class="todate-with-time hasDatepicker" placeholder="dd/mm/yyyy hh:mm:ss" readonly="readonly">                                            
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
 </body>
 </html>

Answer 1

you can do that using below setting. use dp.change method

$(function() {
   $('#datetimepicker1').datetimepicker();
   $('#datetimepicker2').datetimepicker({
      useCurrent: false
   });

   $("#datetimepicker1").on("dp.change", function(e) {
      $('#datetimepicker2').data("DateTimePicker").minDate(e.date);
   });

   $("#datetimepicker2").on("dp.change", function(e) {
      $('#datetimepicker1').data("DateTimePicker").maxDate(e.date);
   });
});

see working example

set date and time in jquery datetimepicker based on another datetimepicker

Question

1 answers

solution1
1 ACCPTED 2020-03-17 05:58:35

set date and time in jquery datetimepicker based on another datetimepicker

Question

1 answers

solution1 1 ACCPTED 2020-03-17 05:58:35

solution1
1 ACCPTED 2020-03-17 05:58:35