📄 `useDateFormat`¶

📊 Analysis Summary¶

Metric	Count
🔧 Functions	42
📦 Imports	4
📊 Variables & Constants	2
🟢 Vue Composition API	1
📐 Interfaces	1
📑 Type Aliases	2

📚 Table of Contents¶

Imports
Variables & Constants
Vue Composition API
Functions
Interfaces
Type Aliases

🛠️ File Location:¶

📂 packages/shared/useDateFormat/index.ts

📦 Imports¶

Name	Source
`ComputedRef`	`vue`
`MaybeRefOrGetter`	`vue`
`computed`	`vue`
`toValue`	`vue`

Variables & Constants¶

Name	Type	Kind	Value	Exported
`REGEX_PARSE`	`RegExp`	const	`/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[T\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})...`	✗
`REGEX_FORMAT`	`RegExp`	const	`/[YMDHhms]o\\|\[([^\]]+)\]\\|Y{1,4}\\|M{1,4}\\|D{1,2}\\|d{1,4}\\|H{1,2}\\|h{1,2}\\|a{...`	✗

Vue Composition API¶

Name	Type	Reactive Variables	Composables
`computed`	computed	none	none

Functions¶

`formatDate(date: Date, formatStr: string, options: UseDateFormatOptions): string`¶

Parameters:

date Date
formatStr string
options UseDateFormatOptions

Returns: string

Calls:

date.getFullYear
date.getMonth
date.getDate
date.getHours
date.getMinutes
date.getSeconds
date.getMilliseconds
date.getDay
dateString.split
formatOrdinal
String(years).slice
`${month + 1}.padStart`
date.toLocaleDateString
toValue (from vue)
String
`${days}.padStart`
`${hours}.padStart`
`${hours % 12 || 12}.padStart`
`${minutes}.padStart`
`${seconds}.padStart`
`${milliseconds}.padStart`
meridiem
stripTimeZone
formatStr.replace
complex_call_3992

Code

export function formatDate(date: Date, formatStr: string, options: UseDateFormatOptions = {}) {
  const years = date.getFullYear()
  const month = date.getMonth()
  const days = date.getDate()
  const hours = date.getHours()
  const minutes = date.getMinutes()
  const seconds = date.getSeconds()
  const milliseconds = date.getMilliseconds()
  const day = date.getDay()
  const meridiem = options.customMeridiem ?? defaultMeridiem
  const stripTimeZone = (dateString: string) => {
    return dateString.split(' ')[1] ?? ''
  }
  const matches: Record<string, () => string | number> = {
    Yo: () => formatOrdinal(years),
    YY: () => String(years).slice(-2),
    YYYY: () => years,
    M: () => month + 1,
    Mo: () => formatOrdinal(month + 1),
    MM: () => `${month + 1}`.padStart(2, '0'),
    MMM: () => date.toLocaleDateString(toValue(options.locales), { month: 'short' }),
    MMMM: () => date.toLocaleDateString(toValue(options.locales), { month: 'long' }),
    D: () => String(days),
    Do: () => formatOrdinal(days),
    DD: () => `${days}`.padStart(2, '0'),
    H: () => String(hours),
    Ho: () => formatOrdinal(hours),
    HH: () => `${hours}`.padStart(2, '0'),
    h: () => `${hours % 12 || 12}`.padStart(1, '0'),
    ho: () => formatOrdinal(hours % 12 || 12),
    hh: () => `${hours % 12 || 12}`.padStart(2, '0'),
    m: () => String(minutes),
    mo: () => formatOrdinal(minutes),
    mm: () => `${minutes}`.padStart(2, '0'),
    s: () => String(seconds),
    so: () => formatOrdinal(seconds),
    ss: () => `${seconds}`.padStart(2, '0'),
    SSS: () => `${milliseconds}`.padStart(3, '0'),
    d: () => day,
    dd: () => date.toLocaleDateString(toValue(options.locales), { weekday: 'narrow' }),
    ddd: () => date.toLocaleDateString(toValue(options.locales), { weekday: 'short' }),
    dddd: () => date.toLocaleDateString(toValue(options.locales), { weekday: 'long' }),
    A: () => meridiem(hours, minutes),
    AA: () => meridiem(hours, minutes, false, true),
    a: () => meridiem(hours, minutes, true),
    aa: () => meridiem(hours, minutes, true, true),
    z: () => stripTimeZone(date.toLocaleDateString(toValue(options.locales), { timeZoneName: 'shortOffset' })),
    zz: () => stripTimeZone(date.toLocaleDateString(toValue(options.locales), { timeZoneName: 'shortOffset' })),
    zzz: () => stripTimeZone(date.toLocaleDateString(toValue(options.locales), { timeZoneName: 'shortOffset' })),
    zzzz: () => stripTimeZone(date.toLocaleDateString(toValue(options.locales), { timeZoneName: 'longOffset' })),
  }
  return formatStr.replace(REGEX_FORMAT, (match, $1) => $1 ?? matches[match]?.() ?? match)
}

`normalizeDate(date: DateLike): Date`¶

Parameters:

date DateLike

Returns: Date

Calls:

/Z$/i.test
date.match
(d[7] || '0').substring

Code

export function normalizeDate(date: DateLike) {
  if (date === null)
    return new Date(Number.NaN) // null is invalid
  if (date === undefined)
    return new Date()
  if (date instanceof Date)
    return new Date(date)
  if (typeof date === 'string' && !/Z$/i.test(date)) {
    const d = date.match(REGEX_PARSE) as any
    if (d) {
      const m = d[2] - 1 || 0
      const ms = (d[7] || '0').substring(0, 3)
      return new Date(d[1], m, d[3]
        || 1, d[4] || 0, d[5] || 0, d[6] || 0, ms)
    }
  }

  return new Date(date)
}

`useDateFormat(date: MaybeRefOrGetter<DateLike>, formatStr: MaybeRefOrGetter<string>, options: UseDateFormatOptions): UseDateFormatReturn`¶

Get the formatted date according to the string of tokens passed in.

Parameters:

date any: The date to format, can either be a Date object, a timestamp, or a string
formatStr any: The combination of tokens to format the date
options any: UseDateFormatOptions

See: https://vueuse.org/useDateFormat

Tags: @__NO_SIDE_EFFECTS__

Raw JSDoc

/**
 * Get the formatted date according to the string of tokens passed in.
 *
 * @see https://vueuse.org/useDateFormat
 * @param date - The date to format, can either be a `Date` object, a timestamp, or a string
 * @param formatStr - The combination of tokens to format the date
 * @param options - UseDateFormatOptions
 *
 * @__NO_SIDE_EFFECTS__
 */

Calls:

computed (from vue)
formatDate
normalizeDate
toValue (from vue)

Code

export function useDateFormat(date: MaybeRefOrGetter<DateLike>, formatStr: MaybeRefOrGetter<string> = 'HH:mm:ss', options: UseDateFormatOptions = {}): UseDateFormatReturn {
  return computed(() => formatDate(normalizeDate(toValue(date)), toValue(formatStr), options))
}

`defaultMeridiem(hours: number, minutes: number, isLowercase: boolean, hasPeriod: boolean): string`¶

Parameters:

hours number
minutes number
isLowercase boolean
hasPeriod boolean

Returns: string

Calls:

m.split('').reduce
m.toLowerCase

Code

function defaultMeridiem(hours: number, minutes: number, isLowercase?: boolean, hasPeriod?: boolean) {
  let m = (hours < 12 ? 'AM' : 'PM')
  if (hasPeriod)
    m = m.split('').reduce((acc, curr) => acc += `${curr}.`, '')
  return isLowercase ? m.toLowerCase() : m
}

`formatOrdinal(num: number): string`¶

Parameters:

num number

Returns: string

Code

function formatOrdinal(num: number) {
  const suffixes = ['th', 'st', 'nd', 'rd']
  const v = num % 100
  return num + (suffixes[(v - 20) % 10] || suffixes[v] || suffixes[0])
}

Internal helpers¶

Declared inside another function in this file.

`stripTimeZone(dateString: string): string`¶

Parameters:

dateString string

Returns: string

Calls:

dateString.split

Code

(dateString: string) => {
    return dateString.split(' ')[1] ?? ''
  }

`Yo(): string`¶

Returns: string

Calls:

formatOrdinal

Code

() => formatOrdinal(years)

`YY(): string`¶

Returns: string

Calls:

String(years).slice

Code

() => String(years).slice(-2)

`YYYY(): number`¶

Returns: number

Code

() => years

`M(): number`¶

Returns: number

Code

() => month + 1

`Mo(): string`¶

Returns: string

Calls:

formatOrdinal

Code

() => formatOrdinal(month + 1)

`MM(): string`¶

Returns: string

Calls:

`${month + 1}.padStart`

Code

() => `${month + 1}`.padStart(2, '0')

`MMM(): string`¶

Returns: string

Calls:

date.toLocaleDateString

Code

() => date.toLocaleDateString(toValue(options.locales), { month: 'short' })

`MMMM(): string`¶

Returns: string

Calls:

date.toLocaleDateString

Code

() => date.toLocaleDateString(toValue(options.locales), { month: 'long' })

`D(): string`¶

Returns: string

Calls:

String

Code

() => String(days)

`Do(): string`¶

Returns: string

Calls:

formatOrdinal

Code

() => formatOrdinal(days)

`DD(): string`¶

Returns: string

Calls:

`${days}.padStart`

Code

() => `${days}`.padStart(2, '0')

`H(): string`¶

Returns: string

Calls:

String

Code

() => String(hours)

`Ho(): string`¶

Returns: string

Calls:

formatOrdinal

Code

() => formatOrdinal(hours)

`HH(): string`¶

Returns: string

Calls:

`${hours}.padStart`

Code

() => `${hours}`.padStart(2, '0')

`h(): string`¶

Returns: string

Calls:

`${hours % 12 || 12}.padStart`

Code

() => `${hours % 12 || 12}`.padStart(1, '0')

`ho(): string`¶

Returns: string

Calls:

formatOrdinal

Code

() => formatOrdinal(hours % 12 || 12)

`hh(): string`¶

Returns: string

Calls:

`${hours % 12 || 12}.padStart`

Code

() => `${hours % 12 || 12}`.padStart(2, '0')

`m(): string`¶

Returns: string

Calls:

String

Code

() => String(minutes)

`mo(): string`¶

Returns: string

Calls:

formatOrdinal

Code

() => formatOrdinal(minutes)

`mm(): string`¶

Returns: string

Calls:

`${minutes}.padStart`

Code

() => `${minutes}`.padStart(2, '0')

`s(): string`¶

Returns: string

Calls:

String

Code

() => String(seconds)

`so(): string`¶

Returns: string

Calls:

formatOrdinal

Code

() => formatOrdinal(seconds)

`ss(): string`¶

Returns: string

Calls:

`${seconds}.padStart`

Code

() => `${seconds}`.padStart(2, '0')

`SSS(): string`¶

Returns: string

Calls:

`${milliseconds}.padStart`

Code

() => `${milliseconds}`.padStart(3, '0')

`d(): number`¶

Returns: number

Code

() => day

`dd(): string`¶

Returns: string

Calls:

date.toLocaleDateString

Code

() => date.toLocaleDateString(toValue(options.locales), { weekday: 'narrow' })

`ddd(): string`¶

Returns: string

Calls:

date.toLocaleDateString

Code

() => date.toLocaleDateString(toValue(options.locales), { weekday: 'short' })

`dddd(): string`¶

Returns: string

Calls:

date.toLocaleDateString

Code

() => date.toLocaleDateString(toValue(options.locales), { weekday: 'long' })

`A(): string`¶

Returns: string

Calls:

meridiem

Code

() => meridiem(hours, minutes)

`AA(): string`¶

Returns: string

Calls:

meridiem

Code

() => meridiem(hours, minutes, false, true)

`a(): string`¶

Returns: string

Calls:

meridiem

Code

() => meridiem(hours, minutes, true)

`aa(): string`¶

Returns: string

Calls:

meridiem

Code

() => meridiem(hours, minutes, true, true)

`z(): string`¶

Returns: string

Calls:

stripTimeZone

Code

() => stripTimeZone(date.toLocaleDateString(toValue(options.locales), { timeZoneName: 'shortOffset' }))

`zz(): string`¶

Returns: string

Calls:

stripTimeZone

Code

() => stripTimeZone(date.toLocaleDateString(toValue(options.locales), { timeZoneName: 'shortOffset' }))

`zzz(): string`¶

Returns: string

Calls:

stripTimeZone

Code

() => stripTimeZone(date.toLocaleDateString(toValue(options.locales), { timeZoneName: 'shortOffset' }))

`zzzz(): string`¶

Returns: string

Calls:

stripTimeZone

Code

() => stripTimeZone(date.toLocaleDateString(toValue(options.locales), { timeZoneName: 'longOffset' }))

Interfaces¶

`UseDateFormatOptions`¶

Interface Code

export interface UseDateFormatOptions {
  /**
   * The locale(s) to used for dd/ddd/dddd/MMM/MMMM format
   *
   * [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locales_argument).
   */
  locales?: MaybeRefOrGetter<Intl.LocalesArgument>

  /**
   * A custom function to re-modify the way to display meridiem
   *
   */
  customMeridiem?: (hours: number, minutes: number, isLowercase?: boolean, hasPeriod?: boolean) => string
}

Properties¶

Name	Type	Optional	Description
`locales`	`MaybeRefOrGetter<Intl.LocalesArgument>`	✓	not shown
`customMeridiem`	`(hours: number, minutes: number, isLowercase?: boolean, hasPeriod?: boolean) ...`	✓	not shown

Type Aliases¶

`DateLike`¶

type DateLike = Date | number | string | undefined;

`UseDateFormatReturn`¶

type UseDateFormatReturn = ComputedRef<string>;

Generated by Syntax Scribe

📄 useDateFormat¶

📊 Analysis Summary¶

📚 Table of Contents¶

🛠️ File Location:¶

📦 Imports¶

Variables & Constants¶

Vue Composition API¶

Functions¶

formatDate(date: Date, formatStr: string, options: UseDateFormatOptions): string¶

normalizeDate(date: DateLike): Date¶

useDateFormat(date: MaybeRefOrGetter<DateLike>, formatStr: MaybeRefOrGetter<string>, options: UseDateFormatOptions): UseDateFormatReturn¶

defaultMeridiem(hours: number, minutes: number, isLowercase: boolean, hasPeriod: boolean): string¶

formatOrdinal(num: number): string¶

Internal helpers¶

stripTimeZone(dateString: string): string¶

Yo(): string¶

YY(): string¶

YYYY(): number¶

M(): number¶

Mo(): string¶

MM(): string¶

MMM(): string¶

MMMM(): string¶

D(): string¶

Do(): string¶

DD(): string¶

H(): string¶

Ho(): string¶

HH(): string¶

h(): string¶

ho(): string¶

hh(): string¶

m(): string¶

mo(): string¶

mm(): string¶

s(): string¶

so(): string¶

ss(): string¶

SSS(): string¶

d(): number¶

dd(): string¶

ddd(): string¶

dddd(): string¶

A(): string¶

AA(): string¶

a(): string¶

aa(): string¶

z(): string¶

zz(): string¶

zzz(): string¶

zzzz(): string¶

Interfaces¶

UseDateFormatOptions¶

Properties¶

Type Aliases¶

DateLike¶

UseDateFormatReturn¶

📄 `useDateFormat`¶

`formatDate(date: Date, formatStr: string, options: UseDateFormatOptions): string`¶

`normalizeDate(date: DateLike): Date`¶

`useDateFormat(date: MaybeRefOrGetter<DateLike>, formatStr: MaybeRefOrGetter<string>, options: UseDateFormatOptions): UseDateFormatReturn`¶

`defaultMeridiem(hours: number, minutes: number, isLowercase: boolean, hasPeriod: boolean): string`¶

`formatOrdinal(num: number): string`¶

`stripTimeZone(dateString: string): string`¶

`Yo(): string`¶

`YY(): string`¶

`YYYY(): number`¶

`M(): number`¶

`Mo(): string`¶

`MM(): string`¶

`MMM(): string`¶

`MMMM(): string`¶

`D(): string`¶

`Do(): string`¶

`DD(): string`¶

`H(): string`¶

`Ho(): string`¶

`HH(): string`¶

`h(): string`¶

`ho(): string`¶

`hh(): string`¶

`m(): string`¶

`mo(): string`¶

`mm(): string`¶

`s(): string`¶

`so(): string`¶

`ss(): string`¶

`SSS(): string`¶

`d(): number`¶

`dd(): string`¶

`ddd(): string`¶

`dddd(): string`¶

`A(): string`¶

`AA(): string`¶

`a(): string`¶

`aa(): string`¶

`z(): string`¶

`zz(): string`¶

`zzz(): string`¶

`zzzz(): string`¶

`UseDateFormatOptions`¶

`DateLike`¶

`UseDateFormatReturn`¶