Set datetime显示错误的日期

Question

我有两个单选按钮来选择时间范围。

有以下两个选项:

0:00 - 0:00 (24h)

6:00 - 6:00 (24h)

这是jQ函数:

$('.btn-time').on('change', function() {
    var value = $(this).attr('data-value');
    var a = new Date($('#ipDateTimeFrom').val());
    var b = new Date($('#ipDateTimeTo').val());
    switch(value) {
        case '0':
            a.setUTCHours(0);
            a.setUTCMinutes(0);
            a.setUTCSeconds(0);
            b.setUTCHours(0);
            b.setUTCMinutes(0);
            b.setUTCSeconds(0);
            break;
        case '6':
            a.setUTCHours(6);
            a.setUTCMinutes(0);
            a.setUTCSeconds(0);
            b.setUTCHours(6);
            b.setUTCMinutes(0);
            b.setUTCSeconds(0);
            break;
    }
    $('#ipDateTimeFrom').val(a.toISOString().replace('T', ' ').replace( /..+/g, ''));
    $('#ipDateTimeTo').val(b.toISOString().replace('T', ' ').replace( /..+/g, ''));
});

如果我在0:00和6:00之间切换，日期从2016-06-07 00:00:00变为2016-06-06 06:00:00，我不知道为什么。日期列表未更改。

这里是一个工作的jsbin指出问题

Answer 1

发生这种情况是因为您将本地时间与UTC时间混合，并且您可能生活在UTC+某些时区。

更准确地说，从输入元素中读取并转换为日期的字符串值被解释为本地日期/时间。但在UTC格式中，这是早了几个小时，所以当你开始将日期截断为0:00时，一切仍然是可以的，但然后输入也得到0:00，在UTC中是早了几个小时，即在前一天。因此，下次执行截断到6:00时，它将是前一天的6:00。

所以你应该在所有的操作中使用UTC或本地日期。以下是如何将输入字符串解释为UTC，以便所有操作都是UTC:

var a = new Date($('#ipDateTimeFrom').val().replace(' ', 'T') + 'Z');
var b = new Date($('#ipDateTimeTo').val().replace(' ', 'T') + 'Z');
// etc.

当然，这假定输入的日期/时间遵循一定的格式。但你会明白的。最后的Z表示UTC

Answer 2

使用moment.js来避免你一生的痛苦。它使解析和格式化变得更加容易

$('.btn-time').on('change', function() {
        var value = $(this).attr('data-value');
        var a = new Date($('#ipDateTimeFrom').val());
        var b = new Date($('#ipDateTimeTo').val());
        var newA, newB;
        switch(value) {
            case '0':
                newA = moment(a).startOf('day');
                newB = moment(b).startOf('day');
                break;
            case '6':
                newA = moment(a).startOf('day').hours(6);
                newB = moment(b).startOf('day').hours(6);
                break;
        }
        $('#ipDateTimeFrom').val(newA.format('YYYY-MM-DD HH:mm:ss'));
        $('#ipDateTimeTo').val(newB.format('YYYY-MM-DD HH:mm:ss'));
    });

http://jsbin.com/gecahaquqo/1/edit?html, js、控制台、输出