ทำความรู้จัก Day.js ตัวช่วยที่จะมาจัดการกับเวลา
สวัสดีค่ะทุกคน ในบทความนี้เราจะมาพูดถึง libary ตัวนึง ที่จะช่วยคุณจัดการกับ date และ time ซึ่งมีนามว่า Day.js กันค่า
Day.js คืออะไร ?
Day.js คือ Javascript library ชนิดนึง ที่สามารถ แปลง ตรวจสอบ และแสดงเวลา-วันที่ ได้นั่นเอง
วิธีติดตั้ง Day.js
npm install dayjs
# or
yarn add dayjs
# or
pnpm add dayjsหลังจากที่ติดตั้งแล้ว เรามาดูวิธีการใช้งานเจ้า Day.js กันดีกว่าค่ะ ว่าจะมีการใช้งานอย่างไรบ้าง
โดยการเรียกใช้งาน สามารถเขียนได้ดังนี้
var now = dayjs()ซึงเป็นการเรียกเวลาปัจจุบันเหมือนกับ dayjs(new Date())
การ parse string ให้เป็น date ก็สามารถเขียนได้ดังนี้
dayjs('2018-04-04T16:00:00.000Z')
dayjs('2018-04-13 19:18:17.040+02:00')
dayjs('2018-04-13 19:18')แต่ ถ้าหากเราอยากจะแสดงเวลา-วันที่ ในรูปแบบ ก็สามารถทำได้เช่นกัน โดยใช้ dayjs.utc()
// default local time
dayjs().format() //2019-03-06T08:00:00+08:00
// UTC mode
dayjs.utc().format() // 2019-03-06T00:00:00Zการ get และ set ค่า Millisecond ทำได้เช่นกัน ซึ่งจะรับตัวเลข 0–999 โดยสามารถเขียนได้ในรูปแบบดังนี้
// Millisecond
dayjs().millisecond() // gets current millisecond
dayjs().millisecond(1) // returns new dayjs objectการ get และ set ค่า Second จะรับตัวเลข 0–59 โดยสามารถเขียนได้ในรูปแบบ ดังนี้
// Second
dayjs().second() // gets current second
dayjs().second(1) // returns new dayjs objectการ get และ set ค่า Minute จะรับตัวเลข 0–59 โดยสามารถเขียนได้ในรูปแบบ ดังนี้
// Minute
dayjs().minute() // gets current minute
dayjs().minute(59) // returns new dayjs objectการ get และ set ค่าของ Hour จะรับตัวเลข 0–23 สามารถเขียนได้ในรูปแบบ ดังนี้
// Hour
dayjs().hour() // gets current hour
newDate = dayjs().hour(12) // returns new dayjs objectการ get และ set ค่าของ Date of Month จะรับตัวเลข 1–31 สามารถเขียนได้ในรูปแบบ ดังนี้
// Date of Month
dayjs().date() // gets day of current month
dayjs().date(1) // returns new dayjs objectการ get และ set ค่าของ Date of Week จะรับค่า 0 (โดยที่ 0 เทียบเป็น Sunday) ถึง 6 (โดยที่ 6 เทียบเป็น Saturday) ซึ่งสามารถเขียนได้ในรูปแบบ ดังนี้
// Date of Week
dayjs().day() // gets day of current week
dayjs().day(0) // returns new dayjs objectการ get และ set ค่าของ ISO Day of Week ก็สามารถทำได้เช่นกัน โดยที่ 1 จะเทียบเป็น Monday และ 7 จะเทียบเป็น Sunday ซึ่งสามารถเขียนได้ในรูปแบบ ดังนี้
// ISO Day of Week
dayjs().isoWeekday() // gets the current ISO day of the week
dayjs().isoWeekday(1); // Mondayการ get และ set ค่าของ Day of Year จะรับค่าเลข 1–366 ซึ่งสามารถเขียนได้ในรูปแบบ ดังนี้
// Day of Year
dayjs('2010-01-01').dayOfYear() // 1
dayjs('2010-01-01').dayOfYear(365) // 2010-12-31การ get และ set ค่าของ Month จะรับค่า 0 ถึง 11 ซึ่งสามารถเขียนได้ในรูปแบบ ดังนี้
// Month
dayjs().month() // gets current month
dayjs().month(0) // returns new dayjs objectการ get และ set ค่าของ Quarter ซึ่งสามารถเขียนได้ในรูปแบบ ดังนี้
// Quarter
dayjs('2010-04-01').quarter() // 2
dayjs('2010-04-01').quarter(2) // returns new dayjs objectการ get และ set ค่าของ Year ซึ่งสามารถเขียนได้ในรูปแบบ ดังนี้
// Year
dayjs().year() // gets current year
dayjs().year(2000) // returns new dayjs objectการ get ค่าของ Week Year โดยจะตามเวลา locale ซึ่งจะสามารถเขียนได้ในรูปแบบ ดังนี้
// Week Year
dayjs().weekYear()การ get ค่าของ Week Year ตาม ISO ซึ่งจะสามารถเขียนได้ในรูปแบบ ดังนี้
// Week Year (ISO)
dayjs().isoWeekYear()การใช้งาน get ซึ่งสามารถเขียนได้ในรูปแบบ ดังนี้
dayjs().get('year')
dayjs().get('month') // start 0
dayjs().get('date')
dayjs().get('hour')
dayjs().get('minute')
dayjs().get('second')
dayjs().get('millisecond')การใช้งาน set ซึ่งสามารถเขียนได้ในรูปแบบ ดังนี้
dayjs().set('date', 1)
dayjs().set('month', 3) // April
dayjs().set('second', 30)การใช้งาน Add เพื่อบวกเพิ่มเวลา สามารถเขียนได้ในรูปแบบ ดังนี้
const a = dayjs()
const b = a.add(7, 'day')// a -> the original value and will not change
// b -> the manipulation resultการใช้งาน Subtract เพื่อลบลดเวลา สามารถเขียนได้ในรูปแบบ ดังนี้
dayjs().subtract(7, 'year')การใช้งาน Start of Time สามารถเขียนได้ในรูปแบบ ดังนี้
dayjs().startOf('year')การใช้งาน End of Time สามารถเขียนได้ในรูปแบบ ดังนี้
dayjs().endOf('month')การใช้งาน local time สามารถเขียนได้ในรูปแบบ ดังนี้
var a = dayjs.utc()
a.format() // 2019-03-06T00:00:00Z
a.local().format() //2019-03-06T08:00:00+08:00การใช้งาน UTC time สามารถเขียนได้ในรูปแบบ ดังนี้
var a = dayjs()
a.format() //2019-03-06T08:00:00+08:00
a.utc().format() // 2019-03-06T00:00:00Z// Passing true will change the time zone without changing the current time.dayjs('2016-05-03 22:15:01').utc(true).format()
// 2016-05-03T22:15:01Z
หากเราต้องการแสดงเวลา-วันที่ ในรูปแบบต่างๆ สามารถทำได้ โดยการใช้ format ซึ่งจะเป็นการจัดรูปแบบของเวลาและวันที่ ตัวอย่างการใช้งาน มีดังนี้
dayjs().format()
// current date in ISO8601, without fraction seconds e.g. '2020-04-02T08:02:17-05:00'dayjs('2019-01-25').format('[YYYYescape] YYYY-MM-DDTHH:mm:ssZ[Z]')
// 'YYYYescape 2019-01-25T00:00:00-02:00Z'dayjs('2019-01-25').format('DD/MM/YYYY') // '25/01/2019'
การแปลงเวลาให้เป็นรูปแบบ JSON สามารถเขียนได้ในรูปแบบ ดังนี้
dayjs('2019-01-25').toJSON() // '2019-01-25T02:00:00.000Z'การแปลงเวลาให้อยู่ในรูปแบบ String สามารถเขียนได้ในรูปแบบ ดังนี้
dayjs('2019-01-25').toString() // 'Fri, 25 Jan 2019 02:00:00 GMT'List of all available units
นอกจากนี้ day.js ยังรองรับ time zone ผ่าน Internationalization API อีกด้วย ตัวอย่างการใช้งาน
// current time zone is 'Europe/Berlin' (offset +01:00)
// Parsing
dayjs.tz("2013-11-18 11:55:20", "America/Toronto") // '2013-11-18T11:55:20-05:00'// Converting (from time zone 'Europe/Berlin'!)
dayjs("2013-11-18 11:55:20").tz("America/Toronto") // '2013-11-18T05:55:20-05:00'สรุป
จะเห็นได้ว่า day.js นั้น เป็นตัวช่วยจัดการเวลาให้กับเหล่าชาว dev ได้เลยทีเดียว ซึ่งสำหรับคนที่กำลังมองหา ตัวช่วยหรือ library ที่จะเพิ่มความสะดวกสบายให้กับเรา ก็สามารถพิจารณา day.js ตัวนี้ เพื่อนำไปใช้งานตามความเหมาะสมได้เลยค่ะ
References
