การใช้งาน Luxon เพื่อจัดการวันที่และเวลาใน Time Zone

มารู้จักกับเจ้า Luxon กันครับ ตัวช่วยในการจัดการกับวันที่และเวลาเป็นสิ่งสำคัญมากในโปรเจ็กต์ โดยเฉพาะถ้าโปรเจ็กต์ของคุณต้องรองรับการทำงานกับเขตเวลา (Time Zone) ต่างๆ ซึ่งในบทความนี้ เราจะมาพูดถึงการใช้ Luxon

Luxon ซึ่งเป็นไลบรารีที่ช่วยให้การจัดการวันที่และเวลาง่ายขึ้น ในกรณีที่เราต้องการทำงานกับเขตเวลาไทย (Asia/Bangkok) และเป็นทีมเดียวกันกับที่พัฒนา Moment.js โดย Luxon ได้รับการออกแบบมาเพื่อแก้ไขข้อจำกัดและเพิ่มประสิทธิภาพการทำงานเมื่อเทียบกับ Moment.js

ติดตั้ง Luxon

ในการเริ่มต้น เราต้องติดตั้งไลบรารี Luxon และประเภทข้อมูล @types/luxon สำหรับการใช้งานใน TypeScript ด้วยคำสั่งต่อไปนี้


npm i luxon
npm i @types/luxon

เมื่อเราติดตั้งเสร็จ เราสามารถใช้งานได้ทันทีผ่านการ import ในไฟล์ TypeScript ของเรา


import { DateTime, DateTimeOptions } from 'luxon';

การเขียน Utility สำหรับวันที่และเวลา

จากตัวอย่างด้านล่าง เราจะสร้างคลาส DateUtil ที่รวบรวมฟังก์ชันเกี่ยวกับวันที่และเวลา โดยเน้นไปที่การทำงานกับเขตเวลาไทย (Asia/Bangkok)


export class DateUtil {
  // ฟังก์ชันคืนค่าเวลาปัจจุบันในเขตเวลาไทย
  static nowDateTimeThaiZone(): DateTime {
    return DateTime.now().setZone('Asia/Bangkok');
  }

  // คืนค่าเวลาปัจจุบันเป็นมิลลิวินาที
  static nowMillis(): number {
    return DateUtil.nowDate().getTime();
  }

  // คืนค่าเวลาปัจจุบันเป็นรูปแบบ Date
  static nowDate(): Date {
    return DateUtil.nowDateTimeThaiZone().toJSDate();
  }

  // ฟังก์ชันแปลงข้อความวันที่จากฟอร์แมตที่กำหนด
  static fromFormat(
    text: string,
    format: string,
    options: DateTimeOptions,
  ): DateTime {
    return DateTime.fromFormat(text, format, options);
  }

  // ฟังก์ชันคืนค่าเวลาที่เหลือจนถึงเที่ยงคืน
  static getRemainingTimeBeforeMidnight() {
    const timeNow = DateUtil.nowDateTimeThaiZone();
    const targetTime = timeNow
      .plus({ days: 1 })
      .set({ hour: 0, minute: 0, second: 0, millisecond: 0 });
    const timeDifference = targetTime.diff(timeNow);
    return Math.trunc(timeDifference.as('seconds'));
  }
}

ตัวอย่างการใช้งาน

เราสามารถทดสอบการทำงานของฟังก์ชันต่างๆ จากคลาส DateUtil ได้ตามนี้


import { DateUtil } from '../util/date-util';

console.log("nowDateTimeThaiZone", DateUtil.nowDateTimeThaiZone().toFormat('dd/MM/yyyy'));
console.log("nowMillis", DateUtil.nowMillis());
console.log("nowDate", DateUtil.nowDate());
console.log("fromFormat", DateUtil.fromFormat(
  "22/01/1998 00:00:00",
  'dd/MM/y HH:mm:ss',
  { zone: 'Asia/Bangkok' }
));
console.log("getRemainingTimeBeforeMidnight", DateUtil.getRemainingTimeBeforeMidnight());

ผลลัพธ์

เมื่อเราเรียกใช้งานฟังก์ชันข้างต้น เราจะได้ผลลัพธ์ดังนี้

nowDateTimeThaiZone: แสดงวันที่ปัจจุบันในเขตเวลาไทยในฟอร์แมต dd/MM/yyyy เช่น 09/10/2024
nowMillis: แสดงค่าเวลาปัจจุบันในหน่วยมิลลิวินาที เช่น 1728470563192
nowDate: แสดงวันที่ปัจจุบันในรูปแบบ Date เช่น Wed Oct 09 2024 17:42:43 GMT+0700 (Indochina Time)
fromFormat: ผลลัพธ์


Object {
  ts: 885402000000,
  _zone: { zoneName: "Asia/Bangkok", valid: true },
  loc: { locale: "en", numberingSystem: null, intl: "en" },
  invalid: null,
  weekData: null,
  localWeekData: null,
  c: { year: 1998, month: 1, day: 22, hour: 0, minute: 0, second: 0, millisecond: 0 },
  o: 420,
  isLuxonDateTime: true
}

  - ts: ค่านี้คือ 885402000000 ซึ่งเป็นเวลาที่แสดงในรูปแบบมิลลิวินาทีตั้งแต่วันที่ 1 มกราคม 1970 (timestamp)
  - _zone: แสดงเขตเวลาเป็น Asia/Bangkok
  - c: ค่าวันที่ในรูปแบบที่เข้าใจง่าย เช่น วันที่ 22 มกราคม 1998 (year: 1998, month: 1, day: 22)
  - o: ค่านี้แสดงค่าชดเชยเวลาจาก UTC เป็น 420 นาที (หรือ 7 ชั่วโมง) ซึ่งตรงกับเขตเวลาไทย
  - isLuxonDateTime: ค่านี้บอกว่า Object ที่ได้คือ Luxon DateTime

getRemainingTimeBeforeMidnight: คืนค่าเวลาที่เหลือก่อนจะถึงเที่ยงคืน เช่น 22,636 วินาทีก่อนจะเริ่มต้นวันใหม่

ข้อดี

API ที่สมัยใหม่และสะอาดตาอ่านง่ายเพราะใช้ แนวทางแบบ class เช่น DateTime.now() หรือ DateTime.local()
รองรับการจัดการเขตเวลา (timezone) ได้โดยตรง โดยไม่ต้องใช้ไลบรารีเสริม
รองรับมาตรฐาน ISO 8601 อย่างเต็มที่ ทำให้การแปลงข้อมูลวันที่และเวลาในรูปแบบนี้ทำได้ง่ายและแม่นยำ
ใช้แนวคิดแบบ immutable objects (วัตถุที่ไม่สามารถแก้ไขได้หลังจากสร้าง) ซึ่งช่วยลดข้อผิดพลาดจากการเปลี่ยนแปลงข้อมูลโดยไม่ตั้งใจ และยังรองรับ chainable methods สำหรับการทำงานกับวันที่และเวลา
รองรับการแปลงรูปแบบวันที่ เวลา ภาษา และเขตเวลาอย่างง่ายดาย

ข้อเสีย

ขนาดใหญ่กว่า Date API พื้นฐาน
การเรียนรู้ใหม่
ไม่รองรับ ES5
ไม่เหมาะสำหรับการใช้งานขนาดเล็กมาก

Document

สรุป

การใช้ Luxon ทำให้การจัดการเวลาและเขตเวลาสะดวกมากขึ้น โดยสามารถแปลงวันที่และเวลาให้อยู่ในเขตเวลาที่ต้องการ และรองรับการทำงานที่ซับซ้อน เช่น คำนวณเวลาที่เหลือก่อนเที่ยงคืน รวมถึงการแปลงวันที่ในฟอร์แมตต่างๆ ให้เป็นรูปแบบที่เราต้องการได้ง่าย