bootstrap-4: Failure if input field pre-populated

@mftruso maybe like this?

https://jsfiddle.net/28c7gq73/32/

I managed to find what was causing it, these lines: https://github.com/tempusdominus/bootstrap-4/blob/master/build/js/tempusdominus-bootstrap-4.js#L387-L390

I moved those to after https://github.com/tempusdominus/bootstrap-4/blob/master/build/js/tempusdominus-bootstrap-4.js#L2689

Which results in the following: https://jsfiddle.net/382mxtas/ (I also added the data-date-format=“MM/DD/YYYY HH:mm:ss” attribute, that fixes the time issue reported in the original issue)

I didn’t create a pull request as I didn’t test it properly, I don’t know what further effects this has.

It happens only if you use the datetimepicker-input class. If you change it to datetimepicker (or something else) there’s no error, but the datetimepicker doesn’t close when it loose focus.

I don’t have a solution, but this might help.

https://jsfiddle.net/03ou5g17/

I got recursion error due to datetimepicker-input. Fixed it by removing that class as suggest by @azeos . Is there another “fix”?

I’m using BS4 and latest tempus dominus bootstrap datetime picker as of today.

This is not an issue. This works like a charm for me. Even if date field is pre-populated or empty. Use the following HTML structure. It will work properly.

Make sure you add date class to your input group div and data-target-input="nearest". Also add data-target="#printDatePicker" to your input and input-group-append div.

<div class="input-group input-group-sm date" id="printDatePicker" data-target-input="nearest">
                                <input type="text" class="form-control form-control-sm datetimepicker-input" data-target="#printDatePicker" asp-for="Input.PrintDate" placeholder="MM/DD/YYYY" />
                                <div class="input-group-append" data-target="#printDatePicker" data-toggle="datetimepicker">
                                    <div class="input-group-text">
                                        <i class="fa fa-calendar-alt"></i>
                                    </div>
                                </div>
                            </div>

Here is a new fiddle that works, as long as you parse the date as a moment() manually and provide an output format as well. I think the parsing into a moment() should be automatic as well as following the input format (i.e. HH:mm:ss, not HH:mm A). Forcing the output format works though. https://jsfiddle.net/elyptic/28c7gq73/

@tostercx looks like its working. I used @azeos’s workaround by renaming the datetimepicker-input class.

Got it to work like this: https://jsfiddle.net/28c7gq73/4/

Separately initializing with the format set and then setting the date back seems to work for now.

$(function () {
  var format = 'MM/DD/YYYY HH:mm:ss';
  var picker = $('#datetimepicker5');
  var date = moment(picker.val(), format).toDate();
  picker.datetimepicker({format: format});
  picker.datetimepicker('date', date});
});