Frankenphp – หน้า 19 – PlusMagi's Blog By Pitt Phunsanit

TypeScript: date-fns แทน Moment.js

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

ติดตั้งโดยใช้ command
npm install date-fns npm install --save-dev @types/date-fns

เพิ่มในไฟล์ app.ts

JavaScript

//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;

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

JavaScript

//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&#x5B;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) ;
*/

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) ;

ป้ายกำกับ: Frankenphp

TypeScript: date-fns แทน Moment.jsTypeScript: date-fns แทน Moment.js