Question

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

这两个选项可用：

0:00 - 0:00（24小时）

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 +某个时区。

更准确地说，您从input元素读取并转换为date的字符串值被解释为本地日期/时间。但是在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,console,output

设置日期时间显示错误的日期

2 个答案: