設置日期時間顯示錯誤日期

Question

我有兩個單選按鈕來選擇時間範圍。

這兩個選項：

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

6:00 - 6:00（24小時）

這是我的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更改爲20 16-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,console,output