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

Posted 2023-05-08

【中文标题】如何使用引导模式更新引导日期时间选择器中的默认日期

【英文标题】：How to update default Date in the bootstrap datetimepicker using Bootstrap modal

【发布时间】：2020-12-30 23:41:30

【问题描述】：

如何在使用引导程序 datetimepicker 的引导程序模式中使用 datetimepicker 并在单击模式打开时更新默认日期的值 DateTimepicker 值在第二次单击后刷新后在第一次单击时更新，它显示旧值 引导模式代码

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

【参考方案1】：

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

为了设置你需要使用momentjs lib的defaultDate：

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

【讨论】：

是的，它会在点击后在日期选择器中设置值，在弹出关闭时销毁日期选择器也可以作为临时解决方案