如何使用jQuery获取datetimepicker日期选择器的选中值

你当前使用的是基于jQuery的Bootstrap DateTimePicker组件，绑定对象为id是reservationdate的日期输入组容器，有两种可靠的取值方式：

• 方式1：直接读取输入框的格式化值
  组件选中日期后会自动把符合你配置的format: 'L'格式的日期字符串填充到关联的input元素中，直接取input值即可拿到格式化好的日期文本：

// 精准匹配当前日期组件对应的输入框取值
const dateText = $('#reservationdate .datetimepicker-input').val();

• 方式2：调用组件内置API获取日期对象
  如果需要做日期计算、格式转换等二次处理，可以调用组件的date方法，拿到原生JavaScript Date类型的选中值对象：

// 未选中日期时返回null
const dateInstance = $('#reservationdate').datetimepicker('date');

如果需要实时监听日期选中/变更的动作，可以绑定组件自带的变更事件，选中后自动触发取值逻辑：

$('#reservationdate').on('change.datetimepicker', function (e) {
    // e.date 为选中的日期对象
    // 输入框同步更新后的文本值
    const currentText = $(this).find('.datetimepicker-input').val();
    console.log('选中日期对象：', e.date);
    console.log('格式化日期文本：', currentText);
});

注意：请在组件初始化完成后再执行取值逻辑，不要在页面刚加载还未完成渲染、用户未做选择时强行取值，否则会拿到空值。

内容的提问来源于stack exchange，提问作者Habib Rifqi16