How to update default Date in the bootstrap datetimepicker using Bootstrap modal

Question

How to update the value of default date when using datetimepicker in the bootstrap modal using the bootstrap datetimepicker and on click modal open and showing the in line datepicker and time picker DateTimepicker value is updating on the first click after refreshing after the second click it's showing the old value Bootstrap Modal Code

<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h4>Appointment</h4>
                                    </div>
                                    <div class="modal-body">
                                        <div id="datetimepicker12"></div>
                                    </div>
                                    <div class="modal-footer text-center">
                                        <button type="button" class="btn btn-secondary modal-submit"><i class="glyphicon glyphicon-ok"></i></button>
                                        <button type="button" class="btn btn-primary modal-close" class="close" data-dismiss="modal"><i class="glyphicon glyphicon-remove"></i></button>
                                    </div>
                                </div>
                            </div>
                        </div>

Using code for the DatetimePicker

<a href="#" data-pk="175" data-title="Booking Date" data-name="booking_date" class="datetime-picker">
                                                    2020-09-12 00:00:00</a>
<a href="#" data-pk="175" data-title="Booking Date" data-name="booking_date" class="datetime-picker">
                                                    2020-09-29 00:00:00</a>



$("body").on('click', '.datetime-picker', function() {
            let d = $.trim($(this).text());
            // d = moment(new Date(d));
            var today = new Date(d);
            var date = today.getFullYear() + '-' + (today.getMonth() + 1) + '-' + today.getDate();
            var time = today.getHours() + ":" + today.getMinutes();
            var dateTime = date + ' ' + time;
            console.log('dateTime', dateTime);
            $("#myModal2").modal({
                backdrop: 'static',
                keyboard: false
            })


            $('#datetimepicker12').datetimepicker({
                inline: true,
                sideBySide: true,
                format: 'yyyy-mm-dd hh:ii',
                defaultDate: dateTime,
            });

            $("#myModal2").modal('show');


            // $('#datetimepicker12').data("DateTimePicker").date(moment(previousDate).format('DD/MM/YYYY HH:mm'));
        })

Answer 1

You need to instantiate datetimepicker independently from the body event handler.

In order to set the defaultDate you need to use momentjs lib:

$('#datetimepicker12').datetimepicker('defaultDate', moment(d));

$('#datetimepicker12').datetimepicker({
    inline: true,
    sideBySide: true,
    format: 'yyyy-mm-dd hh:ii'
});
$("body").on('click', '.datetime-picker', function() {
    let d = $.trim($(this).text());
    $('#datetimepicker12').datetimepicker('defaultDate', moment(d));

    $("#myModal2").modal({
        backdrop: 'static',
        keyboard: false
    });
    $("#myModal2").modal('show');
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.27.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.0-alpha14/js/tempusdominus-bootstrap-4.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.0-alpha14/css/tempusdominus-bootstrap-4.min.css" />

<a href="#" data-pk="175" data-title="Booking Date" data-name="booking_date" class="datetime-picker">2020-09-12 00:00:00</a>
<a href="#" data-pk="175" data-title="Booking Date" data-name="booking_date" class="datetime-picker">2020-09-29 00:00:00</a>

<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4>Appointment</h4>
            </div>
            <div class="modal-body">
                <div id="datetimepicker12"></div>
            </div>
            <div class="modal-footer text-center">
                <button type="button" class="btn btn-secondary modal-submit"><i class="glyphicon glyphicon-ok"></i></button>
                <button type="button" class="btn btn-primary modal-close" class="close" data-dismiss="modal"><i class="glyphicon glyphicon-remove"></i></button>
            </div>
        </div>
    </div>
</div>