10

I'm using this datetime picker for Bootstrap 4 https://tempusdominus.github.io/bootstrap-4/

The plugin works just fine if the input is blank at load. However, I have an Edit form that has already a value but the datepicker is removing the value at page load.

<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
               <input class="form-control datetimepicker-input" data-target="#Entry_EntryDate" data-toggle="datetimepicker" data-val="true" data-val-date="The field Event Date must be a date." data-val-required="The Event Date field is required." id="Entry_EntryDate"  type="datetime" value="2017-10-25 10:17 AM" />
            </div>
        </div>
    </div>
</div>

and default js

 $(function() {
         $('#Entry_EntryDate').datetimepicker();
 });

Here is the JsFiddle

I forked the recommended jsfiddle so I'm sure I have all the correct needed dependencies.

I tried changing locales, changing formats but no luck.

beaver
  • 17,333
  • 2
  • 40
  • 66
causita
  • 1,607
  • 1
  • 20
  • 32

1 Answers1

22

When you are initializing datetimepicker it is clearing the value by default, so in order to keep the value, you will need to remember the value $('#Entry_EntryDate').val() convert it to date object and pass it to timepicker on initialization:

and default js

 $(function() {
     var date = moment($('#Entry_EntryDate').val(), 'YYYY-MM-DD hh:mm a').toDate();
     $('#Entry_EntryDate').datetimepicker({date:date});
 });
beaver
  • 17,333
  • 2
  • 40
  • 66
Roman Habibi
  • 604
  • 5
  • 8
  • Thanks for this! Just wanted to say, I tried simply setting it to my datetime.datetime object but that doesn't work! As the code above states, it's very necessary to actually change your value to a 'moment' date object! – Bob de Graaf Aug 08 '18 at 12:10
  • `$('#Entry_EntryDate').val()` have to be in a format that can be parsed by momentjs – gogaz Apr 17 '19 at 14:47
  • 1
    Should be added to the doc. Not so obvious :/ – Tsounabe Jul 18 '19 at 19:25
  • 1
    The challenge here is if you also specify a date format in the datetimepicker, then it doesn't work. – Jim Richards Dec 17 '19 at 11:23