Предустановленная дата/время на начальной загрузки DateTimePicker

Question

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

Я также попытался установить атрибут самого #new-challenge-date-time-pickervalue, но это не сработало.

У кого-нибудь есть ответ?

Answer 1

Вы можете передать дату «defaultDate» при инициализации сборщика. Но minDate переопределит значение defaultDate. Так что, если вам нужно MinDate, а затем установить useCurrent ложному

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


}); 

Answer 2

Вы можете инициализировать дату, используя опцию 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>

Обратите внимание, что формат должен следовать моменту parsing rules. я удален место хранения из-за этого open ошибка: Default date not working.