Recommend 22 practical one-line Javascript code Date Daquan, it is recommended to collect

In daily development, Date is often used by us. Some commonly used UI frameworks, such as Antd、ElementUI , will use moment.js and day.js to process their time-related components, but when we break away from these frameworks, To solve a problem about time conversion, the introduction of a time tool library seems redundant, so here to share 22 practical line of Javascript and typescript code on Date, it is recommended to bookmark and read!

Pre-knowledge

Intl object is a namespace of the ECMAScript Internationalization API, which provides accurate string comparison, number formatting, and date and time formatting. The constructors of the Collator, NumberFormat and DateTimeFormat objects are properties of the Intl object. Learn more about

Intl.DateTimeFormat is a constructor for objects that format date and time according to language

grammar:

// locales为语言
new Intl.DateTimeFormat([locales[, options]])
Intl.DateTimeFormat.call(this[, locales[, options]])
// 格式化对应语言得日期，date为Date实例，返回日期字符串
new Intl.DateTimeFormat(locale).format(date)
// 获取时区
Intl.DateTimeFormat().resolvedOptions().timeZone

22 practical lines of Javascript and typescript code on Date

Add AM/PM for the hour

JavaScript version

// `h` 是 0 到 23 之间的小时数
const suffixAmPm = (h) => `${h % 12 === 0 ? 12 : h % 12}${h < 12 ? 'am' : 'pm'}`;

TypeScript version

const suffixAmPm = (h: number): string => `${h % 12 === 0 ? 12 : h % 12}${h < 12 ? 'am' : 'pm'}`;

Demo

suffixAmPm(0); // '12am'
suffixAmPm(5); // '5am'
suffixAmPm(12); // '12pm'
suffixAmPm(15); // '3pm'
suffixAmPm(23); // '11pm'

Calculate the difference in days between two dates

JavaScript version

const diffDays = (date, otherDate) => Math.ceil(Math.abs(date - otherDate) / (1000 * 60 * 60 * 24));

TypeScript version

const diffDays = (date: Date, otherDate: Date): number => Math.ceil(Math.abs(date.valueOf() - otherDate.valueOf()) / (1000 * 60 * 60 * 24));

Demo

diffDays(new Date('2014-12-19'), new Date('2020-01-01')); // 1839

Calculate the number of months between two dates

JavaScript version

const monthDiff = (startDate, endDate) => Math.max(0, (endDate.getFullYear() - startDate.getFullYear()) * 12 - startDate.getMonth() + endDate.getMonth());

TypeScript version

const monthDiff = (startDate: Date, endDate: Date): number => Math.max(0, (endDate.getFullYear() - startDate.getFullYear()) * 12 - startDate.getMonth() + endDate.getMonth());

Demo

monthDiff(new Date('2020-01-01'), new Date('2021-01-01')); // 12

Compare two dates

JavaScript version

// `a` 和 `b` 是 `Date` 实例
const compare = (a, b) => a.getTime() > b.getTime();

TypeScript version

const compare = (a: Date, b: Date): boolean => a.getTime() > b.getTime();

Demo

compare(new Date('2020-03-30'), new Date('2020-01-01')); // true

Convert date to YYYY-MM-DD format

JavaScript version

// `date` 是对象实例
const formatYmd = (date) => date.toISOString().slice(0, 10);

TypeScript version

const formatYmd = (date: Date): string => date.toISOString().slice(0, 10);

Demo

formatYmd(new Date()); // 2020-05-06

Convert seconds to hh:mm:ss format

JavaScript version

// `s` 秒数
const formatSeconds = (s) => new Date(s * 1000).toISOString().substr(11, 8);

// Or
const formatSeconds = (s) => new Date(s * 1000).toUTCString().match(/(\d\d:\d\d:\d\d)/)[0];

// Or
const formatSeconds = (s) => [parseInt(s / 60 / 60), parseInt((s / 60) % 60), parseInt(s % 60)].join(':').replace(/\b(\d)\b/g, '0$1');

TypeScript version

const formatSeconds = (s: number): string => new Date(s * 1000).toISOString().substr(11, 8);

// Or
const formatSeconds = (s: number): string => (new Date(s * 1000).toUTCString().match(/(\d\d:\d\d:\d\d)/) as string[])[0];

// Or
const formatSeconds = (s: number): string => (
    [parseInt(`${s / 3600}`), parseInt(`${(s / 60) % 60}`), parseInt(`${s % 60}`)].join(':').replace(/\b(\d)\b/g, '0$1')
);

Demo

formatSeconds(200); // 00:03:20
formatSeconds(500); // 00:08:20

Extract year, month, day, hour, minute, second and millisecond from date

JavaScript version

// `date` 是一个 `Date` 对象
const extract = (date) =>
    date
        .toISOString()
        .split(/[^0-9]/)
        .slice(0, -1);

// `extract` 是一个 [年、月、日、小时、分钟、秒、毫秒] 的数组

TypeScript version

const extract = (date: Date): string[] =>
    date
        .toISOString()
        .split(/[^0-9]/)
        .slice(0, -1);

Demo

extract(new Date()); // ['2021', '12', '09', '04', '48', '36', '600']

Format the date for a given locale

JavaScript version

// `date` 是一个 `Date` 对象 
// `locale` 是一个语言环境（例如 en-US、pt-BR）
const format = (date, locale) => new Intl.DateTimeFormat(locale).format(date);

TypeScript version

const format = (date: Date, locale: string): string => new Intl.DateTimeFormat(locale).format(date);

Demo

format(new Date(), 'pt-BR'); // 06/05/2020

Get the current quarter of the date

JavaScript version

const getQuarter = (d = new Date()) => Math.ceil((d.getMonth() + 1) / 3);

TypeScript version

const getQuarter = (d = new Date()): number => Math.ceil((d.getMonth() + 1) / 3);

Get the current timestamp in seconds

JavaScript version

const ts = () => Math.floor(new Date().getTime() / 1000);

TypeScript version

const ts = (): number => Math.floor(new Date().getTime() / 1000);

Get the day of the year from the date

JavaScript version

// `date` 是一个 `Date` 对象 
const dayOfYear = (date) => Math.floor((date - new Date(date.getFullYear(), 0, 0)) / (1000 * 60 * 60 * 24));

TypeScript version

const dayOfYear = (date: Date): number => Math.floor((date.valueOf() - new Date(date.getFullYear(), 0, 0).valueOf()) / (1000 * 60 * 60 * 24));

Demo

dayOfYear(new Date(2020, 04, 16)); // 137

Get the first day of the month in which the date is

JavaScript version

const getFirstDate = (d = new Date()) => new Date(d.getFullYear(), d.getMonth(), 1);

TypeScript version

const getFirstDate = (d = new Date()): Date => new Date(d.getFullYear(), d.getMonth(), 1);

Get the last day of the month in which the date is

JavaScript version

const getLastDate = (d = new Date()) => new Date(d.getFullYear(), d.getMonth() + 1, 0);

TypeScript version

const getLastDate = (d = new Date()): Date => new Date(d.getFullYear(), d.getMonth() + 1, 0);

Get the month name of the date

JavaScript version

// `date` 是一个 Date 对象
const getMonthName = (date) => ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', ' November', 'December'][date.getMonth()];

TypeScript version

const getMonthName = (date: Date): string => ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', ' November', 'December'][date.getMonth()];

Get the number of days in a given month

JavaScript version

// `month` 是从零开始的索引
const daysInMonth = (month, year) => new Date(year, month, 0).getDate();

TypeScript version

const daysInMonth = (month: number, year: number): number => new Date(year, month, 0).getDate();

Get time zone string

JavaScript version

const getTimezone = () => Intl.DateTimeFormat().resolvedOptions().timeZone;

TypeScript version

const getTimezone = (): string => Intl.DateTimeFormat().resolvedOptions().timeZone;

Demo

getTimezone(); // 'Asia/Saigon'

Get tomorrow's date

JavaScript version

const tomorrow = ((d) => new Date(d.setDate(d.getDate() + 1)))(new Date());

// Or
const tomorrow = new Date(new Date().valueOf() + 1000 * 60 * 60 * 24);

TypeScript version

const tomorrow: Date = ((d) => new Date(d.setDate(d.getDate() + 1)))(new Date());

// Or
const tomorrow: Date = new Date(new Date().valueOf() + 1000 * 60 * 60 * 24);

Get the total number of days in a year

JavaScript version

const numberOfDays = (year) => ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0 ? 366 : 365);

// Or
const numberOfDays = (year) => (new Date(year, 1, 29).getDate() === 29 ? 366 : 365);

TypeScript version

const numberOfDays = (year: number): number => ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0 ? 366 : 365);

// Or
const numberOfDays = (year: number): number => (new Date(year, 1, 29).getDate() === 29 ? 366 : 365);

Working day of get date

JavaScript version

// `date` is a Date object
const getWeekday = (date) => ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'][date.getDay()];

TypeScript version

const getWeekday = (date: Date): string => ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'][date.getDay()];

Get yesterday's date

JavaScript version

const yesterday = ((d) => new Date(d.setDate(d.getDate() - 1)))(new Date());

// Or
const yesterday = new Date(new Date().valueOf() - 1000 * 60 * 60 * 24);

TypeScript version

const yesterday: Date = ((d) => new Date(d.setDate(d.getDate() - 1)))(new Date());

// Or
const yesterday: Date = new Date(new Date().valueOf() - 1000 * 60 * 60 * 24);

Initialize the current date but set the time to midnight

JavaScript version

const midnightOfToday = () => new Date(new Date().setHours(0, 0, 0, 0));

TypeScript version

const midnightOfToday = (): Date => new Date(new Date().setHours(0, 0, 0, 0));

Sort the date array

JavaScript version

// `arr` 是一个包含 `Date` 项的数组
const sortDescending = (arr) => arr.sort((a, b) => a.getTime() > b.getTime());

const sortAscending = (arr) => arr.sort((a, b) => a.getTime() < b.getTime());

TypeScript version

const sortDescending = (arr: Date[]): Date[] => arr.sort((a, b) => a.getTime() - b.getTime());

const sortAscending = (arr: Date[]): Date[] => arr.sort((a, b) => b.getTime() - a.getTime());