如何使用Moment.js将日期时间转换为UTC？代码NaN问题排查

为什么会输出NaN？ #

你的代码里startPicker.dates.picked返回的是日期数组（即便单选模式下，Tempus Dominus也会用数组存储选中日期），直接把数组传给moment会导致解析失败，进而返回NaN。另外，你在初始化picker后立刻获取选中日期，此时用户还未选择任何日期，dates.picked可能是空数组或无效值，这也会引发问题。

修复步骤 #

1. 把日期获取逻辑移到按钮点击事件里 #

用户点击「Connect」按钮才需要获取选中日期，所以要把相关代码放到ButtonGetSelectedDate函数中，而非初始化picker时执行。

2. 正确获取选中日期（从数组取第一个元素） #

单选模式下，dates.picked[0]就是用户选中的Date对象，将其传给moment即可正常解析。

3. 转换为UTC时间的方法 #

用moment处理日期后，可通过以下方式转为UTC：

• 获取UTC时间戳：moment(日期).utc().valueOf()
• 获取UTC格式字符串：moment(日期).utc().format('YYYY-MM-DD HH:mm:ss')（格式可自定义）

修正后的完整代码 #

<div style="float:left; margin-right: 5em;">
    <label id="startDateTimeLabel">Start DateTime</label>
    <div class="input-group input-append date" id="startDateTime" style="width:300px;">
        <input type="text" class="form-control">
        <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
    </div>
</div>
<input id="ButtonConnect" class="btn btn-primary" type="button" value="Connect" onclick="ButtonGetSelectedDate();" />

<script>
const startPicker = new tempusDominus.TempusDominus(document.getElementById('startDateTime'));

function ButtonGetSelectedDate() {
    // 从数组中获取选中的第一个日期
    const pickedDate = startPicker.dates.picked[0];
    if (!pickedDate) {
        console.log('请先选择日期');
        return;
    }
    
    console.log('选中的本地日期: ' + pickedDate);
    
    // 转换为UTC时间戳
    const utcTimestamp = moment(pickedDate).utc().valueOf();
    console.log('UTC时间戳: ' + utcTimestamp);
    
    // 转换为UTC格式字符串（示例格式）
    const utcString = moment(pickedDate).utc().format('YYYY-MM-DD HH:mm:ss');
    console.log('UTC日期字符串: ' + utcString);
}
</script>

额外说明 #

• 确保已正确引入moment.js和tempusDominus的依赖文件，否则也可能出现异常。
• 如果是多选模式，需要遍历dates.picked数组处理每个日期。

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