Bootstrap日期时间选择器始终将日期设置为Jauary 20 2016

时间:2016-09-06 21:17:58

标签: javascript twitter-bootstrap-3 momentjs datetimepicker

我尝试从表单字段值初始化Bootstrap日期时间选择器。

http://eonasdan.github.io/bootstrap-datetimepicker/

日期选择器始终显示" 2016年1月20日"当它初始化时,即使时刻对象是正确的。

我无法看清我做错了什么。我也尝试过使用字符串。

HTML

<label for="timer-date">End date</label>
<input type="text" id="timer-date" class="form-control" value="2016-12-15">
<label for="timer-time">End time</label>
<input type="text" id="timer-time" class="form-control" value="20:54:00">

JS

$(function() {

  var date = $('#timer-date').val() + ' ' + $('#timer-time').val();
  console.log (date); 
  // 2016-12-15 20:54:00

  var date_obj = moment(date);
  console.log (date_obj); 
  // _d    Date {Thu Dec 15 2016 20:54:00 GMT+0000 (GMT Daylight Time)}


  $('#timer-date').datetimepicker({
      format: 'LL',
      defaultDate: date_obj
  });

  $('#timer-time').datetimepicker({
      format: 'LT',
      defaultDate: date_obj
  });
});

1 个答案:

答案 0 :(得分:2)

编辑:(&#34; bootstrap datetime picker&#34;支持momentjs日期)。

问题是值属性,您需要在读取它们时清除它们,或者将数据放在数据属性中。

Working jsfiddle

var date = $('#timer-date').val() + ' ' + $('#timer-time').val();
  console.log (date);   // 2016-12-15 20:54:00
  $('#timer-date').val("");
  $('#timer-time').val("");

  var date_obj = moment(date);
  console.log (date_obj); 
  // _d    Date {Thu Dec 15 2016 20:54:00 GMT+0000 (GMT Daylight Time)}

   $('#timer-date-wrapper').datetimepicker({
      format: 'LL',
      defaultDate: date_obj
  });

  $('#timer-time-wrapper').datetimepicker({
    format: 'LT',
    defaultDate: date_obj
  });