使用 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 功能吧

功能介紹

取得當下時間

js
```
new Date()
```
c#
```
DateTime.Now
```
moment.js
```
moment().format()
```

時間格式轉換

‘2018/01/01 00:00:00’

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

DateTime.Now.ToString("yyyy/MM/dd HH:mm:ss")

moment.js
```
moment().format('YYYY/MM/DD HH:mm:ss')
```

時間處理

加一天

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

Key	Shorthand
years	y
quarters	Q
months	M
weeks	w
days	d
hours	h
minutes	m
seconds	s
milliseconds	ms

取得當天開頭時間及結束時間

js
請原諒小弟 js 略過, 個人能力不足寫不出來

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 很好用，只是當時剛好沒有實際使用的契機也就沒有太深印象，想不到最後兜了一大圈才真正體會到當時同事說的好用

文章目錄

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

功能介紹

心得

參考資訊