CODEWITHSUNDEEP
jquerytwitter-bootstrapbootstrap-datetimepickereonasdan-datetimepicker
SISYN
SISYN

Reputation: 2259

Preset date/time on bootstrap datetimepicker

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?

Upvotes: 2

Views: 1955

Answers (2)

Thangaraja
Thangaraja

Reputation: 956

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


});

Upvotes: 2

VincenzoC
VincenzoC

Reputation: 31482

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.

Upvotes: 1

Related Questions