Datetimepicker：尽管小时被选择为高于当前小时，但无法选择小于当前分钟的分钟

Question

当我设置 minDate 为“2017/05/09 10:16:00”时，如果我使用箭头将小时设置为更高的分钟小时（例如：11h），我可以设置分钟小于分钟分钟（例如：10m ）。但是，如果我使用从网格表中选择来设置小时，我无法选择小于 min 分钟的分钟。有人有这个问题的解决方案吗？请帮助我，对不起我的英语不好。

我的日期时间选择器设置：

    $(".datepicker").datetimepicker({
    useCurrent: false,
    format: "YYYY/MM/DD HH:mm ZZ",
    locale: "ja",
    sideBySide: true,
    toolbarPlacement: "bottom",
    showClose: true,
    widgetPositioning:{
      horizontal: "auto",
      vertical: "top"
    },
    icons: {
      close: "btn-info date-time-close-text"
    }
  });

观看次数：

<div class="time-picker-wrapper">
  <div class="form-group">
    <%= f.text_field :public_time, class: "form-control datepicker time-public",
      placeholder: t(".public_time"), readonly: notification.public_time.nil? && is_edit_page %>
    <%= f.text_field :created_at, class: "datepicker hidden" %>
  </div>
  <button type="button" class="icon-time-picker-wrapper">
    <i class="mp-icon-time-picker"></i>
  </button>
</div>

Answer 1

这是一个对我有用的基本设置，没有您提到的问题。正如我在评论中所说，这有两个时间/日期字段 - 开始和结束。结束的 minDate 是开始日期，开始的 max date 是结束日期。看看这是否适合你。我将留下我的字段名称，以便您可以更改它们。

JavaScript 文件：

$(document).on('turbolinks:load', function() {
  $('#event_start').datetimepicker({
    format: 'YYYY-MM-DD hh:mm a'
  });
  $('#event_end').datetimepicker({
    useCurrent: false, 
    format: 'YYYY-MM-DD hh:mm a'
  });
  $('#event_start').on("dp.change", function (e) {
    $('#event_end').data("DateTimePicker").minDate(e.date);
  });
  $("#event_end").on("dp.change", function (e) {
    $('#event_start').data("DateTimePicker").maxDate(e.date);
  });
});

表单域

<div class="form-group">
  <%= f.label :start, 'Start Date-Time', class: 'control-label' %>
  <div class='input-group date' id='event_start'>
    <%= f.text_field :start, class: "form-control" %>
    <span class="input-group-addon">
      <span class="glyphicon glyphicon-calendar"></span>
    </span>
  </div>
</div>
<div class='form-group'>
  <%= f.label :end, 'End Time (Optional)', class: 'control-label' %>
  <%= f.text_field :end, class: "form-control" %>
</div> 

Answer 2

我辛苦了一整天，终于找到了解决问题的办法

$(document).ready(function(){
  var default_time = null;

  $(".datepicker").datetimepicker({
    useCurrent: false,
    format: "YYYY/MM/DD HH:mm ZZ",
    locale: "ja",
    sideBySide: true,
    toolbarPlacement: "bottom",
    showClose: true,
    widgetPositioning:{
      horizontal: "auto",
      vertical: "top"
    },
    icons: {
      close: "btn-info date-time-close-text"
    }
  }).on("dp.show", function(){
    default_time = moment();
  });

  $(".datepicker").on("dp.change", function(){
    var time_set = $(".datepicker").val();
    var date_time_set = new Date(time_set);
    if (date_time_set.getHours() > default_time.hours()){
      $("td.minute.disabled").removeClass("disabled");
    }
    else if (date_time_set.getDate() > default_time.date()){
      $("td.minute.disabled").removeClass("disabled");
      $("td.hour.disabled").removeClass("disabled");
    }
    else if (date_time_set.getDate() == default_time.date()){
      $(".datepicker").data("DateTimePicker").minDate(moment());
    }
  });

我希望这个答案可以帮助某人，如果您对我的代码有任何反馈和评论，请告诉我。谢谢！