【问题标题】:set date and time in jquery datetimepicker based on another datetimepicker根据另一个 datetimepicker 在 jquery datetimepicker 中设置日期和时间
【发布时间】:2020-03-17 05:47:23
【问题描述】:

它可以正常工作,直到任何控件的回发被触发,但是当任何控件的回发事件触发时,如果我们将“从日期”更改为“到日期”日期时间选择器,它只显示日期而不是日期和时间。当我更改“to date”而不是“from date”datetimepicker 时,它只显示日期而不是 date&time。它看起来像重置 datetimepicker onClose(); 我也尝试设置 minDateTime 和 maxDateTime 属性,但问题仍然没有解决。我正在使用 jqueryUI datetimepicker

Issue_FromDate

Issue_ToDate

代码:

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

【问题讨论】:

  • 一个是datepicker,另一个是datetimepicker?
  • 都是日期时间选择器
  • 你能做个小提琴吗?
  • 它在控制触发回发之前正常工作,但在回发触发时它会匿名运行。
  • 如果回发问题可以检查返回的日期格式吗?

标签: c# jquery asp.net jquery-ui-datepicker jquerydatetimepicker


【解决方案1】:

您可以使用以下设置来做到这一点。使用 dp.change 方法

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

见工作example

【讨论】:

  • 它在 Bootstrap datetimepicker 上工作正常,但我们可以为 jqueryUI datetimepicker 实现同样的事情吗?
  • @user3629270 我想你需要告诉我你正在使用哪个日期选择器可能会很麻烦
  • 我正在使用 jqueryui-datepicker jqueryui.com/datepicker/#date-range
  • @user3629270 它是一个日期选择器而不是一个日期时间选择器
  • 我们可以通过 timepicker add-on 来使用 timepicker
猜你喜欢
  • 1970-01-01
  • 2011-11-02
  • 2016-09-06
  • 1970-01-01
  • 1970-01-01
  • 2017-12-24
  • 1970-01-01
  • 2015-08-29
  • 1970-01-01
相关资源
最近更新 更多