Question

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

这是我的datetimepicker：

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

即使我绑定onfocusout事件来设置datetimepicker的值，它也不会在选择器关闭时发生变化。

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

有关此事的任何解决方法。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

无论如何，您的代码中还有一些问题需要解决。正如date([newDate])所述：

使用string，Date，moment，null参数并设置组件模型的当前时刻。 [...]

使用包含options.format和options.useStrict组件配置的时刻库来解析newDate参数。

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

即使HTML中的value属性使用格式进行解析，12/27/2017 12:00 AM也不匹配hh:mm A，因此我已将其删除在我的代码段中。

这是一个使用datetimepicker的版本4.17.37的工作示例：

＆＃13;

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

＆＃13;

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

＆＃13;

一边思考：

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

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字符串构建。请注意，为了实现此功能，我必须从您问题的代码段中删除defaultDate参数。

Bootstrap日期时间选择器不允许用户键入时间

2 个答案: