引导日期时间选择器不允许用户输入时间

Question

我有一个场景，我使用 Bootstrap Datetimepicker 来选择时间，但是当我手动输入时间时，即使格式正确，它也会在日期选择器关闭时变为 12:00 AM

这是我的日期时间选择器：

$('#ShiftStart').datetimepicker({
    minDate: actualDate,
    maxDate: maxDate,
    useCurrent: false,
    format: 'hh:mm A',
    defaultDate:moment(startTime),
    stepping: 15
});

$('#ShiftEnd').datetimepicker({
    minDate: actualDate,
    maxDate: maxDate,
    format: 'hh:mm A',
    defaultDate:moment(startTime),
    stepping: 15
});

Even if I bind an onfocusout event to set the value of the datetimepicker it doesn't change when the picker closed.

$("#ShiftStart").focusout(function (e) {
    //here it is defaulted again to 12:00 AM
    var time = $('#' + e.target.id).val();
    $('#' + e.target.id).attr('data-time', actualDate + ' ' + time);
    $('#' + e.target.id).attr('value', actualDate + ' ' + time);
    $('#' + e.target.id).val(time)
});

任何解决此问题的方法。

var actualDate = $('#ActualDate').val();
var maxDate = $('#MaxDate').val();
var startTime = $('#StartTime').val();
$('#ShiftStart')
  .datetimepicker({
    minDate: actualDate,
    maxDate: maxDate,
    useCurrent: false,
    format: 'hh:mm A',
    defaultDate: moment("12/27/2017"),
    stepping: 15
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment@2.19.1/moment.min.js"></script>


 <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />

<input id="ActualDate" type="hidden" value="12/27/2017">
<input id="MaxDate" type="hidden" value="12/28/2017">
<input id="StartTime" type="hidden" value="12/27/2017 8:00:00 AM">
<input class="form-control timepicker valid" data-val="true" data-val-genericcompare="Start time must be earlier than end time" data-val-genericcompare-comparetopropertyname="ShiftEnd" data-val-genericcompare-operatorname="LessThan" data-val-required="The Start Time field is required."
  id="ShiftStart" name="ShiftStart" style="max-width : none;  border : 1px solid #cccccc;" type="text" value="12/27/2017 12:00 AM" data-time="12/27/2017 12:00 AM" aria-required="true" aria-describedby="ShiftStart-error" aria-invalid="false">

Answer 1

即使您从选择器中选择值（不仅是手动输入），日期时间选择器默认返回12:00 AM，我认为这是组件最新版本的错误。

无论如何，您的代码中有几处需要修复。正如date([newDate]) 所说：

采用string、Date、moment、null参数并将组件模型当前时刻设置为它。 [...]

使用带有options.format 和options.useStrict 组件配置的矩库来解析newDate 参数。

所以minDate、maxDate 和defaultDate 是使用format 选项（在您的情况下为hh:mm A）解析的字符串，这会产生错误的值，请改用moment(String, String)（例如defaultDate: moment("12/27/2017", 'MM/DD/YYYY')）。

即使 HTML 中的 value 属性也是使用格式解析的，12/27/2017 12:00 AM 与 hh:mm A 不匹配，所以我已经在我的 sn-p 中删除了它。

这是一个使用日期时间选择器版本 4.17.37 的工作示例：

var actualDate = $('#ActualDate').val();
var maxDate = $('#MaxDate').val();
var startTime = $('#StartTime').val();
$('#ShiftStart')
  .datetimepicker({
    minDate: moment(actualDate, 'MM/DD/YYYY'),
    maxDate: moment(maxDate, 'MM/DD/YYYY'),
    useCurrent: false,
    format: 'hh:mm A',
    defaultDate: moment("12/27/2017", 'MM/DD/YYYY'),
    stepping: 15
  });

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.1/moment-with-locales.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>

<input id="ActualDate" type="hidden" value="12/27/2017">
<input id="MaxDate" type="hidden" value="12/28/2017">
<input id="StartTime" type="hidden" value="12/27/2017 8:00:00 AM">
<div class="row">
  <div class='col-sm-6'>
    <input class="form-control timepicker valid" data-val="true" data-val-genericcompare="Start time must be earlier than end time" data-val-genericcompare-comparetopropertyname="ShiftEnd" data-val-genericcompare-operatorname="LessThan" data-val-required="The Start Time field is required."
  id="ShiftStart" name="ShiftStart" style="max-width : none;  border : 1px solid #cccccc;" type="text"  data-time="12/27/2017 12:00 AM" aria-required="true" aria-describedby="ShiftStart-error" aria-invalid="false">
  </div>
</div>

边的想法：

• 由于您使用的是hh:mm A 格式，您可能只需管理时间并摆脱minDate 和maxDate（在您的示例中，您限制在一天）
• 如果您想在组件隐藏时执行某些操作，请使用dp.hide 事件。

Answer 2

我认为这是因为minDate 在午夜将字段值重置为当前日期（可能是默认时间），同样maxdate 也可能默认将其设置为午夜。

从初始化中删除minDate: actualDate 和maxDate: maxDate：

<input id="ActualDate" type="hidden" value="12/27/2017">
<input id="MaxDate" type="hidden" value="12/28/2017">
<input class="form-control timepicker valid" data-val="true" data-val-genericcompare="Start time must be earlier than end time" data-val-genericcompare-comparetopropertyname="ShiftEnd" data-val-genericcompare-operatorname="LessThan" data-val-required="The Start Time field is required."
    id="ShiftStart" name="ShiftStart" style="max-width : none;  border : 1px solid #cccccc;" type="text" aria-required="true" aria-describedby="ShiftStart-error" aria-invalid="false">

<script>
    var actualDate = $('#ActualDate').val();
    var maxDate = $('#MaxDate').val();
    $('#ShiftStart').datetimepicker({
        useCurrent: false,
        format: 'hh:mm A',
    });
</script>

在回复您的评论时，您可以像这样传入maxDate 参数：

maxDate: new Date('2017', '12', '27', '03', '30', '00', '00')

我猜你需要从maxDate 字符串构建。请注意，要使其正常工作，我必须从您问题中的 sn-p 中删除 defaultDate 参数。