Preset date/time on bootstrap datetimepicker

Question

Fiddle: https://jsfiddle.net/ek9c9ojx/3/

I tried numerous solutions from this question: set default time in bootstrap-datetimepicker

But none of them worked. They all cause the input to be empty and default to the placeholder text.

I tried the setDate(), setLocalDate(), and defaultDate routes but I can't find anything in the current documentation supporting these or any current methods that work to achieve this simple task.

None of these work:

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

I also tried setting the value attribute of the #new-challenge-date-time-picker itself, but that did not work either.

Does anyone have the answer?

In your fiddle HTML, there is no "startdatetime-from". Check my answer below. Its working. — Thangaraja, Feb 04 '16 at 04:08
I have updated the main question with a link to a fiddle at the top with the same setup as I'm using on the site itself. It employs the same code as your answer and the other answer but neither works. Please check and let me know what is wrong if you can. — SISYN, Feb 04 '16 at 20:42

Thangaraja · Accepted Answer · 2016-02-05T01:10:02.550

You can pass the date to "defaultDate" while initializing the picker. But minDate will override the defaultDate. So if you need minDate as well then set useCurrent to false

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

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

Try the below

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


});

score 1 · Answer 2 · answered Feb 04 '16 at 09:36

You can initialize the date using the defaultDate option. If you want to use data-* attributes to init the component you can use the following code:

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>

Note that the format must follow moment parsing rules. I removed placeholder because of this open bug: Default date not working.

Preset date/time on bootstrap datetimepicker

2 Answers2