jQuery DateTimePicker：深入理解与高效获取日期时间值

<div class="form-group">
    <label>日期:</label>
    <div class="input-group date" id="reservationdate" data-target-input="nearest">
        <input type="text" class="form-control datetimepicker-input" data-target="#reservationdate" />
        <div class="input-group-append" data-target="#reservationdate" data-toggle="datetimepicker">
            <div class="input-group-text"><i class="fa fa-calendar"></i></div>
        </div>
    </div>
</div>

$(function () {
    $('#reservationdate').datetimepicker({
        format: 'L', // 例如，在美国英语环境下可能是 MM/DD/YYYY
        // 其他配置项，如 locale, minDate, maxDate 等
    });
});

$(function () {
    // DateTimePicker 初始化
    $('#reservationdate').datetimepicker({
        format: 'L',
    });

    // 假设您有一个提交按钮
    $('#submitButton').on('click', function() {
        // 调用 getValue() 方法获取日期时间
        var selectedDateTime = $('#reservationdate').datetimepicker('getValue');

        if (selectedDateTime) {
            // selectedDateTime 通常是一个 JavaScript Date 对象
            console.log("选定的日期时间 (Date 对象):", selectedDateTime);

            // 如果需要特定格式的字符串，可以使用 Moment.js 或原生 Date 方法进行格式化
            // 例如，使用 Moment.js:
            // var formattedString = moment(selectedDateTime).format('YYYY-MM-DD HH:mm:ss');
            // console.log("格式化后的字符串:", formattedString);

            // 或者使用原生 Date 方法:
            // var year = selectedDateTime.getFullYear();
            // var month = selectedDateTime.getMonth() + 1; // 月份从0开始
            // var day = selectedDateTime.getDate();
            // console.log("年-月-日:", year + "-" + month + "-" + day);

        } else {
            console.log("未选择日期时间");
        }
    });
});

$(function () {
    $('#reservationdate').datetimepicker({
        format: 'L',
        // 注册 onChangeDateTime 事件处理器
        onChangeDateTime: function(dp, $input) {
            // dp 是插件内部的日期时间对象实例
            // $input 是 jQuery 包装的输入框元素

            // 获取输入框中显示的格式化字符串
            var formattedValue = $input.val();
            console.log("实时选定的格式化字符串:", formattedValue);

            // 获取 JavaScript Date 对象
            // 不同的插件版本可能略有差异，常见的获取方式有：
            // 1. dp.val()
            // 2. dp.getValue() (如果插件内部提供了这个方法)
            // 3. dp.data().get() (如果插件内部存储在data中)
            // 对于 xdsoft.net 的 datetimepicker，dp.val() 或 dp.data().get() 都可以获取 Date 对象
            var dateObject = dp.val(); // 假设 dp.val() 返回 Date 对象
            if (dateObject instanceof Date && !isNaN(dateObject)) {
                console.log("实时选定的日期时间 (Date 对象):", dateObject);
            } else {
                console.log("未选择或无效日期时间 (Date 对象):", dateObject);
            }

            // 可以在此处执行其他逻辑，例如更新UI或发送AJAX请求
            // alert("您选择了: " + formattedValue);
        }
    });
});