2018-01-20

使用 Moment.js 來簡化 JavaScript 的時間處理

專案的前端頁面在 user 要求加速整個流程下,使用了一套 library - Date Range Picker 方便使用者可以在同一個 input 中同時選擇 start date 與 end date 也讓整體操作獲得簡化,整體改善獲得 user 的好評

故事開頭似乎跟筆記的標題沒什麼關係?! 因為使用了 Date Range Picker 來處理需要同時選擇 start date 與 end date 的需求,而為了讓頁面呈現統一也使用 Date Range Picker 來處理單一日期的選擇,在設定單一日期選擇器的過程中發現 Date Range Picker 送出的日期一樣是 start date 與 end date,並且相當貼心的已經處理成 start date 為選擇日期的 00:00:00 而 end date 為選擇日期的 23:59:59 讓後端程式可以少做一些處理 非常方便,需是乎就打算來學習一下 Date Range Picker 是如何處理 js 的時間問題也才發現今天主角 - Moment.js 的強大功能

今天就來簡單地紀錄一下自己常用的 Moment.js 功能吧


功能介紹

  1. 取得當下時間

    • js
      new Date()
      

      1nowjs

    • c#
      DateTime.Now
      

      2nowcs

    • moment.js
      moment().format()
      

      3nowmoment

  2. 時間格式轉換

    '2018/01/01 00:00:00'

    • js
      var now = new Date();
      var year = now.getFullYear();
      var month = ("0" + (now.getMonth() + 1)).slice(-2);
      var day = ("0" + (now.getDate() + 1)).slice(-2);
      var hour = ("0" + (now.getHours() )).slice(-2);
      var minute = ("0" + now.getMinutes() ).slice(-2);
      var second = ("0" + now.getSeconds() ).slice(-2);
      
      year + '/' + month + '/' + day + ' ' + hour + ':' + minute+ ':' + second
      
    • c#
      DateTime.Now.ToString("yyyy/MM/dd HH:mm:ss")
      
    • moment.js
      moment().format('YYYY/MM/DD HH:mm:ss')
      
  3. 時間處理

    加一天

    • js

      var now = new Date();
      var year = now.getFullYear();
      var month = ("0" + (now.getMonth())).slice(-2);
      var day = ("0" + (now.getDate() + 1)).slice(-2);
      var hour = ("0" + (now.getHours())).slice(-2);
      var minute = ("0" + now.getMinutes()).slice(-2);
      var second = ("0" + now.getSeconds()).slice(-2);
      
      new Date(year, month, day, hour, minute, second);
      
    • c#

      DateTime.Now.AddDays(1)
      
    • moment.js

      moment().add(7, 'days');
      
      moment().add(7, 'd');
      

      使用介紹 Add

      Key Shorthand
      years y
      quarters Q
      months M
      weeks w
      days d
      hours h
      minutes m
      seconds s
      milliseconds ms
  4. 取得當天開頭時間及結束時間

    • js

      請原諒小弟 js 略過

    • c#
      DateTime.Today.ToString("yyyy/MM/dd HH:mm:ss");
        DateTime.Today.AddDays(1).AddMilliseconds(-1).ToString("yyyy/MM/dd HH:mm:ss");
      

      4srartendcs

    • moment.js
      moment().startOf('day').format('YYYY/MM/DD HH:mm:ss')
      moment().endOf('day').format('YYYY/MM/DD HH:mm:ss')
      

      5startendmoment

心得

moment.js 功能很多,使用上很方便,最重要的是文件算是滿完整的,讓實際導入時的問題少很多,至於其他功能:指定時間、顯示格式、時間比較、多語言...各式操作就不一一紀錄,請直接參考 Moment.js

而在實際紀錄 Moment.js 的過程中讓我想起幾年前,好像曾經聽同事分享過這個 library 很好用,只是當時剛好沒有實際使用的契機也就沒有太深印象,想不到最後兜了一大圈才真正體會到當時同事說的好用

參考資訊

  1. Date Range Picker
  2. Moment.js

沒有留言:

張貼留言