2

小提琴：https ://jsfiddle.net/ek9c9ojx/3/

我从这个问题尝试了许多解决方案：set default time in bootstrap-datetimepicker

但他们都没有工作。它们都导致输入为空并默认为占位符文本。

我尝试了setDate()、setLocalDate()和defaultDate路由，但在当前文档中找不到任何支持这些或任何当前可用于完成此简单任务的方法的内容。

这些都不起作用：

var dateObj = new Date('2016-03-21T23:31:00');
// does not work, causes empty input/placeholder text
$("#startdatetime-from").data('datetimepicker').setDate(dateObj);
// does not work, causes empty input/placeholder text
$("#startdatetime-from").data('datetimepicker').setLocalDate(dateObj);


var dateObj = new Date('2016-03-21T23:31:00');
$('#new-challenge-date-time-picker').datetimepicker({
    minDate: moment(),
    defaultDate: dateObj // does not work, same symptoms as above
});

我也尝试设置本身的value属性#new-challenge-date-time-picker，但这也不起作用。

有人有答案吗？

4

2 回答 2

2

您可以在初始化选择器时将日期传递给“defaultDate”。但 minDate 将覆盖 defaultDate。因此，如果您还需要 minDate 则将 useCurrent 设置为 false

https://eonasdan.github.io/bootstrap-datetimepicker/Options/#mindate

https://eonasdan.github.io/bootstrap-datetimepicker/Options/#usecurrent

试试下面的

   $(function() {

  var datePreset = $('#new-challenge-date-time-picker').attr('data-preset');
  var dateParts = datePreset.split(' ');
  var dateString = dateParts[0];
  var dateTime = dateParts[1];
  var dateTimeParts = dateTime.split(':');
  var dateHour = dateTimeParts[0];
  var dateMinutes = dateTimeParts[1];
  var dateAMPM = dateParts[2];
  var dateStringParts = dateString.split('/');
  var dateMonth = dateStringParts[0];
  var dateDay = dateStringParts[1];
  var dateYear = dateStringParts[2];

  var time = (dateAMPM == 'PM') ? (parseInt(dateHour) + 12) + ':' + dateMinutes : dateHour + ':' + dateMinutes;
  time += ':00';

  console.log(dateYear + '-' + dateMonth + '-' + dateDay + 'T' + time);
  var dateObj = new Date(dateYear + '-' + dateMonth + '-' + dateDay + 'T' + time);

  $('#new-challenge-date-time-picker').datetimepicker({
    minDate: moment(),
    defaultDate: dateObj,
     useCurrent:false
  });

  // $("#new-challenge-date-time-picker").data('datetimepicker').setDate(dateObj);


});
于 2016-02-04T04:05:51.770 回答
1

defaultDate您可以使用该选项初始化日期。如果要使用data-*属性来初始化组件，可以使用以下代码：

var datePreset = $('#new-challenge-date-time-picker input').attr('data-preset');
var dateFormat = $('#new-challenge-date-time-picker input').attr('data-format');

$('#new-challenge-date-time-picker').datetimepicker({
    minDate: moment(),
    defaultDate: moment(datePreset, dateFormat)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/d004434a5ff76e7b97c8b07c01f34ca69e635d97/src/js/bootstrap-datetimepicker.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/d004434a5ff76e7b97c8b07c01f34ca69e635d97/build/css/bootstrap-datetimepicker.css" rel="stylesheet">

<div class="row">
    <div class="col-md-12">
        <div class="form-group">
            <div class="input-group date" id="new-challenge-date-time-picker">
              <input type='text' class="form-control" data-format="MM/DD/YYYY HH:mm:ss A" data-preset="03/21/2016 11:31:00 PM"/>
                <span class="input-group-addon">
                    <span class="glyphicon-calendar glyphicon"></span>
                </span>
            </div>
        </div>
    </div>
</div>

请注意，格式必须遵循矩解析规则。由于这个打开的错误，我删除了占位符：Default date not working。

于 2016-02-04T09:36:56.737 回答