如何使用 Bootstrap 模式更新 bootstrap 日期时间选择器中的默认日期

Question

如何在 bootstrap 模式中使用 bootstrap 日期时间选择器并在点击模式打开并显示在线日期选择器和时间选择器时更新默认日期的值 DateTimepicker 值在第二次单击后刷新后在第一次单击时更新，它显示旧值 Bootstrap模态代码

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

为 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

您需要独立于 body 事件处理程序实例化 datetimepicker。

为了设置默认日期，您需要使用 momentjs 库：

$('#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>

如何使用 Bootstrap 模式更新 bootstrap 日期时间选择器中的默认日期

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

jquery

twitter-bootstrap

bootstrap-4

bootstrap-datetimepicker