Tag Archive date-fns

ตอนแรกจะใช้ Moment.js ในการเปลี่ยนวันที่, เวลาที่แสดงให้เป็นรูปแบบตามภาษาที่ใช้ในแต่ละประเทศ ( locale ) แต่แล้วกลับเจอ Project Status โดยสรุปคือ ไม่ใช่มัน หรือไปใช้ date-fns แทน เลยต้องลองเปลี่ยนมาเป็นตัวนี้แทน

1. ติดตั้งโดยใช้ command
   npm install date-fns
npm install --save-dev @types/date-fns
2. เพิ่มในไฟล์ app.ts

   //date-fns
   const DATETIME_PATTERNS = 'yyyy-MM-dd HH:mm:ss';
   
   import { enUS as getLocale } from 'date-fns/locale';
   import { format } from 'date-fns';
   import { formatDistance } from 'date-fns/formatDistance';
   import { formatWithOptions } from 'date-fns/fp';
   
   window.DATETIME_PATTERNS = DATETIME_PATTERNS;
   window.format = format;
   window.formatDistance = formatDistance;
   window.formatWithOptions = formatWithOptions;
   window.getLocale = getLocale;
   

3. สร้างไฟล์ date-fns.ts ในที่เดียวกับ app.ts

   //date-fns
   import { format } from 'date-fns';
   import { formatWithOptions } from 'date-fns/fp';
   import * as locales from 'date-fns/locale'
   import formatDistance from 'date-fns/formatDistance';
   import formatRelative from 'date-fns/formatRelative';
   import subDays from 'date-fns/subDays';
   
   // Type for locale keys
   type DateFnsLocaleKey = keyof typeof locales
   
   // Common date patterns
   // https://date-fns.org/v4.1.0/docs/format
   export const DATETIME_PATTERNS = {
       datetime: 'Pp',
       full: 'PPPPp',
       long: 'PPPP',
       medium: 'PP',
       short: 'P',
       time: 'p'
   } as const;
   
   // Helper function for date formatting
   export const formatDate = (
       date: Date | string,
       formatString: string,
       language: string
   ): string => {
       const dateObject = typeof date === 'string' ? new Date(date) : date
       return formatWithOptions(
           { locale: getLocale(language) },
           formatString
       )(dateObject)
   }
   
   // Function to get locale dynamically
   export const getLocale = (language: string) => {
       // Convert language code to match date-fns locale naming
       const localeKey = language === 'en' ? 'enUS' : language
   
       // Safely access locale
       const locale = locales[localeKey as DateFnsLocaleKey]
       return locale || locales.enUS // Fallback to English
   }
   
   /*
   const date = new Date();
   const formattedDate = formatDate(date, DATETIME_PATTERNS.full, 'th');
   console.log(formattedDate);
   
   const locale = getLocale('jp');
   console.log(locale);
   */
   

4. ทดสอบโดย

   const currentDate = new Date();
   
   console.log('Date:', currentDate);
   
   // Format the date using the user's locale and a pattern
   const formattedDate = formatDate(currentDate, PATTERNS.full, userLanguage); 
   
   console.log('Formatted Date:', formattedDate);
   

5. และเปลี่ยนภาษาของ chrome ตามวิธี Change the language of your Chrome browser

ในส่วน DATETIME_PATTERNS จริง ๆ แล้วเป็นแค่การประกาศตัวแปรสำเร็จรูปไว้ สามารถให้ patterns ของตัวเองได้ โดยดูได้จาก format