Skip to content

⬅️ Back to Table of Contents

📄 index.ts

📊 Analysis Summary

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

📚 Table of Contents

🛠️ 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})?[.:]?(\d+)?$/i ✗
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{1,2}|A{1,2}|m{1,2}|s{1,2}|Z{1,2}|z{1,4}|SSS/g ✗
m string let/var (hours < 12 ? 'AM' : 'PM') ✗
suffixes string[] const ['th', 'st', 'nd', 'rd'] ✗
v number const num % 100 ✗
meridiem (hours: number, minutes: number, isLowercase?: boolean, hasPeriod?: boolean) => string const options.customMeridiem ?? defaultMeridiem ✗
matches Record<string, () => string | number> const `{
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' })),
}` ✗
d any const date.match(REGEX_PARSE) as any ✗
m number const d[2] - 1 || 0 ✗

Vue Composition API

Name Type Reactive Variables Composables
computed computed none none

Functions

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

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
}
  • Parameters:
  • hours: number
  • minutes: number
  • isLowercase: boolean
  • hasPeriod: boolean
  • Return Type: string
  • Calls:
  • m.split('').reduce
  • m.toLowerCase

formatOrdinal(num: number): 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])
}
  • Parameters:
  • num: number
  • Return Type: string

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

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)
}
  • Parameters:
  • date: Date
  • formatStr: string
  • options: UseDateFormatOptions
  • Return Type: 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_4024

stripTimeZone(dateString: string): string

Code 
(dateString: string) => {
    return dateString.split(' ')[1] ?? ''
  }
  • Parameters:
  • dateString: string
  • Return Type: string
  • Calls:
  • dateString.split

Yo(): string

Code 
() => formatOrdinal(years)
  • Return Type: string
  • Calls:
  • formatOrdinal

YY(): string

Code 
() => String(years).slice(-2)
  • Return Type: string
  • Calls:
  • String(years).slice

YYYY(): number

Code 
() => years
  • Return Type: number

M(): number

Code 
() => month + 1
  • Return Type: number

Mo(): string

Code 
() => formatOrdinal(month + 1)
  • Return Type: string
  • Calls:
  • formatOrdinal

MM(): string

Code 
() => `${month + 1}`.padStart(2, '0')
  • Return Type: string
  • Calls:
  • `${month + 1}.padStart`

MMM(): string

Code 
() => date.toLocaleDateString(toValue(options.locales), { month: 'short' })
  • Return Type: string
  • Calls:
  • date.toLocaleDateString

MMMM(): string

Code 
() => date.toLocaleDateString(toValue(options.locales), { month: 'long' })
  • Return Type: string
  • Calls:
  • date.toLocaleDateString

D(): string

Code 
() => String(days)
  • Return Type: string
  • Calls:
  • String

Do(): string

Code 
() => formatOrdinal(days)
  • Return Type: string
  • Calls:
  • formatOrdinal

DD(): string

Code 
() => `${days}`.padStart(2, '0')
  • Return Type: string
  • Calls:
  • `${days}.padStart`

H(): string

Code 
() => String(hours)
  • Return Type: string
  • Calls:
  • String

Ho(): string

Code 
() => formatOrdinal(hours)
  • Return Type: string
  • Calls:
  • formatOrdinal

HH(): string

Code 
() => `${hours}`.padStart(2, '0')
  • Return Type: string
  • Calls:
  • `${hours}.padStart`

h(): string

Code 
() => `${hours % 12 || 12}`.padStart(1, '0')
  • Return Type: string
  • Calls:
  • `${hours % 12 || 12}.padStart`

ho(): string

Code 
() => formatOrdinal(hours % 12 || 12)
  • Return Type: string
  • Calls:
  • formatOrdinal

hh(): string

Code 
() => `${hours % 12 || 12}`.padStart(2, '0')
  • Return Type: string
  • Calls:
  • `${hours % 12 || 12}.padStart`

m(): string

Code 
() => String(minutes)
  • Return Type: string
  • Calls:
  • String

mo(): string

Code 
() => formatOrdinal(minutes)
  • Return Type: string
  • Calls:
  • formatOrdinal

mm(): string

Code 
() => `${minutes}`.padStart(2, '0')
  • Return Type: string
  • Calls:
  • `${minutes}.padStart`

s(): string

Code 
() => String(seconds)
  • Return Type: string
  • Calls:
  • String

so(): string

Code 
() => formatOrdinal(seconds)
  • Return Type: string
  • Calls:
  • formatOrdinal

ss(): string

Code 
() => `${seconds}`.padStart(2, '0')
  • Return Type: string
  • Calls:
  • `${seconds}.padStart`

SSS(): string

Code 
() => `${milliseconds}`.padStart(3, '0')
  • Return Type: string
  • Calls:
  • `${milliseconds}.padStart`

d(): number

Code 
() => day
  • Return Type: number

dd(): string

Code 
() => date.toLocaleDateString(toValue(options.locales), { weekday: 'narrow' })
  • Return Type: string
  • Calls:
  • date.toLocaleDateString

ddd(): string

Code 
() => date.toLocaleDateString(toValue(options.locales), { weekday: 'short' })
  • Return Type: string
  • Calls:
  • date.toLocaleDateString

dddd(): string

Code 
() => date.toLocaleDateString(toValue(options.locales), { weekday: 'long' })
  • Return Type: string
  • Calls:
  • date.toLocaleDateString

A(): string

Code 
() => meridiem(hours, minutes)
  • Return Type: string
  • Calls:
  • meridiem

AA(): string

Code 
() => meridiem(hours, minutes, false, true)
  • Return Type: string
  • Calls:
  • meridiem

a(): string

Code 
() => meridiem(hours, minutes, true)
  • Return Type: string
  • Calls:
  • meridiem

aa(): string

Code 
() => meridiem(hours, minutes, true, true)
  • Return Type: string
  • Calls:
  • meridiem

z(): string

Code 
() => stripTimeZone(date.toLocaleDateString(toValue(options.locales), { timeZoneName: 'shortOffset' }))
  • Return Type: string
  • Calls:
  • stripTimeZone

zz(): string

Code 
() => stripTimeZone(date.toLocaleDateString(toValue(options.locales), { timeZoneName: 'shortOffset' }))
  • Return Type: string
  • Calls:
  • stripTimeZone

zzz(): string

Code 
() => stripTimeZone(date.toLocaleDateString(toValue(options.locales), { timeZoneName: 'shortOffset' }))
  • Return Type: string
  • Calls:
  • stripTimeZone

zzzz(): string

Code 
() => stripTimeZone(date.toLocaleDateString(toValue(options.locales), { timeZoneName: 'longOffset' }))
  • Return Type: string
  • Calls:
  • stripTimeZone

Yo(): string

Code 
() => formatOrdinal(years)
  • Return Type: string
  • Calls:
  • formatOrdinal

YY(): string

Code 
() => String(years).slice(-2)
  • Return Type: string
  • Calls:
  • String(years).slice

YYYY(): number

Code 
() => years
  • Return Type: number

M(): number

Code 
() => month + 1
  • Return Type: number

Mo(): string

Code 
() => formatOrdinal(month + 1)
  • Return Type: string
  • Calls:
  • formatOrdinal

MM(): string

Code 
() => `${month + 1}`.padStart(2, '0')
  • Return Type: string
  • Calls:
  • `${month + 1}.padStart`

MMM(): string

Code 
() => date.toLocaleDateString(toValue(options.locales), { month: 'short' })
  • Return Type: string
  • Calls:
  • date.toLocaleDateString

MMMM(): string

Code 
() => date.toLocaleDateString(toValue(options.locales), { month: 'long' })
  • Return Type: string
  • Calls:
  • date.toLocaleDateString

D(): string

Code 
() => String(days)
  • Return Type: string
  • Calls:
  • String

Do(): string

Code 
() => formatOrdinal(days)
  • Return Type: string
  • Calls:
  • formatOrdinal

DD(): string

Code 
() => `${days}`.padStart(2, '0')
  • Return Type: string
  • Calls:
  • `${days}.padStart`

H(): string

Code 
() => String(hours)
  • Return Type: string
  • Calls:
  • String

Ho(): string

Code 
() => formatOrdinal(hours)
  • Return Type: string
  • Calls:
  • formatOrdinal

HH(): string

Code 
() => `${hours}`.padStart(2, '0')
  • Return Type: string
  • Calls:
  • `${hours}.padStart`

h(): string

Code 
() => `${hours % 12 || 12}`.padStart(1, '0')
  • Return Type: string
  • Calls:
  • `${hours % 12 || 12}.padStart`

ho(): string

Code 
() => formatOrdinal(hours % 12 || 12)
  • Return Type: string
  • Calls:
  • formatOrdinal

hh(): string

Code 
() => `${hours % 12 || 12}`.padStart(2, '0')
  • Return Type: string
  • Calls:
  • `${hours % 12 || 12}.padStart`

m(): string

Code 
() => String(minutes)
  • Return Type: string
  • Calls:
  • String

mo(): string

Code 
() => formatOrdinal(minutes)
  • Return Type: string
  • Calls:
  • formatOrdinal

mm(): string

Code 
() => `${minutes}`.padStart(2, '0')
  • Return Type: string
  • Calls:
  • `${minutes}.padStart`

s(): string

Code 
() => String(seconds)
  • Return Type: string
  • Calls:
  • String

so(): string

Code 
() => formatOrdinal(seconds)
  • Return Type: string
  • Calls:
  • formatOrdinal

ss(): string

Code 
() => `${seconds}`.padStart(2, '0')
  • Return Type: string
  • Calls:
  • `${seconds}.padStart`

SSS(): string

Code 
() => `${milliseconds}`.padStart(3, '0')
  • Return Type: string
  • Calls:
  • `${milliseconds}.padStart`

d(): number

Code 
() => day
  • Return Type: number

dd(): string

Code 
() => date.toLocaleDateString(toValue(options.locales), { weekday: 'narrow' })
  • Return Type: string
  • Calls:
  • date.toLocaleDateString

ddd(): string

Code 
() => date.toLocaleDateString(toValue(options.locales), { weekday: 'short' })
  • Return Type: string
  • Calls:
  • date.toLocaleDateString

dddd(): string

Code 
() => date.toLocaleDateString(toValue(options.locales), { weekday: 'long' })
  • Return Type: string
  • Calls:
  • date.toLocaleDateString

A(): string

Code 
() => meridiem(hours, minutes)
  • Return Type: string
  • Calls:
  • meridiem

AA(): string

Code 
() => meridiem(hours, minutes, false, true)
  • Return Type: string
  • Calls:
  • meridiem

a(): string

Code 
() => meridiem(hours, minutes, true)
  • Return Type: string
  • Calls:
  • meridiem

aa(): string

Code 
() => meridiem(hours, minutes, true, true)
  • Return Type: string
  • Calls:
  • meridiem

z(): string

Code 
() => stripTimeZone(date.toLocaleDateString(toValue(options.locales), { timeZoneName: 'shortOffset' }))
  • Return Type: string
  • Calls:
  • stripTimeZone

zz(): string

Code 
() => stripTimeZone(date.toLocaleDateString(toValue(options.locales), { timeZoneName: 'shortOffset' }))
  • Return Type: string
  • Calls:
  • stripTimeZone

zzz(): string

Code 
() => stripTimeZone(date.toLocaleDateString(toValue(options.locales), { timeZoneName: 'shortOffset' }))
  • Return Type: string
  • Calls:
  • stripTimeZone

zzzz(): string

Code 
() => stripTimeZone(date.toLocaleDateString(toValue(options.locales), { timeZoneName: 'longOffset' }))
  • Return Type: string
  • Calls:
  • stripTimeZone

Yo(): string

Code 
() => formatOrdinal(years)
  • Return Type: string
  • Calls:
  • formatOrdinal

YY(): string

Code 
() => String(years).slice(-2)
  • Return Type: string
  • Calls:
  • String(years).slice

YYYY(): number

Code 
() => years
  • Return Type: number

M(): number

Code 
() => month + 1
  • Return Type: number

Mo(): string

Code 
() => formatOrdinal(month + 1)
  • Return Type: string
  • Calls:
  • formatOrdinal

MM(): string

Code 
() => `${month + 1}`.padStart(2, '0')
  • Return Type: string
  • Calls:
  • `${month + 1}.padStart`

MMM(): string

Code 
() => date.toLocaleDateString(toValue(options.locales), { month: 'short' })
  • Return Type: string
  • Calls:
  • date.toLocaleDateString

MMMM(): string

Code 
() => date.toLocaleDateString(toValue(options.locales), { month: 'long' })
  • Return Type: string
  • Calls:
  • date.toLocaleDateString

D(): string

Code 
() => String(days)
  • Return Type: string
  • Calls:
  • String

Do(): string

Code 
() => formatOrdinal(days)
  • Return Type: string
  • Calls:
  • formatOrdinal

DD(): string

Code 
() => `${days}`.padStart(2, '0')
  • Return Type: string
  • Calls:
  • `${days}.padStart`

H(): string

Code 
() => String(hours)
  • Return Type: string
  • Calls:
  • String

Ho(): string

Code 
() => formatOrdinal(hours)
  • Return Type: string
  • Calls:
  • formatOrdinal

HH(): string

Code 
() => `${hours}`.padStart(2, '0')
  • Return Type: string
  • Calls:
  • `${hours}.padStart`

h(): string

Code 
() => `${hours % 12 || 12}`.padStart(1, '0')
  • Return Type: string
  • Calls:
  • `${hours % 12 || 12}.padStart`

ho(): string

Code 
() => formatOrdinal(hours % 12 || 12)
  • Return Type: string
  • Calls:
  • formatOrdinal

hh(): string

Code 
() => `${hours % 12 || 12}`.padStart(2, '0')
  • Return Type: string
  • Calls:
  • `${hours % 12 || 12}.padStart`

m(): string

Code 
() => String(minutes)
  • Return Type: string
  • Calls:
  • String

mo(): string

Code 
() => formatOrdinal(minutes)
  • Return Type: string
  • Calls:
  • formatOrdinal

mm(): string

Code 
() => `${minutes}`.padStart(2, '0')
  • Return Type: string
  • Calls:
  • `${minutes}.padStart`

s(): string

Code 
() => String(seconds)
  • Return Type: string
  • Calls:
  • String

so(): string

Code 
() => formatOrdinal(seconds)
  • Return Type: string
  • Calls:
  • formatOrdinal

ss(): string

Code 
() => `${seconds}`.padStart(2, '0')
  • Return Type: string
  • Calls:
  • `${seconds}.padStart`

SSS(): string

Code 
() => `${milliseconds}`.padStart(3, '0')
  • Return Type: string
  • Calls:
  • `${milliseconds}.padStart`

d(): number

Code 
() => day
  • Return Type: number

dd(): string

Code 
() => date.toLocaleDateString(toValue(options.locales), { weekday: 'narrow' })
  • Return Type: string
  • Calls:
  • date.toLocaleDateString

ddd(): string

Code 
() => date.toLocaleDateString(toValue(options.locales), { weekday: 'short' })
  • Return Type: string
  • Calls:
  • date.toLocaleDateString

dddd(): string

Code 
() => date.toLocaleDateString(toValue(options.locales), { weekday: 'long' })
  • Return Type: string
  • Calls:
  • date.toLocaleDateString

A(): string

Code 
() => meridiem(hours, minutes)
  • Return Type: string
  • Calls:
  • meridiem

AA(): string

Code 
() => meridiem(hours, minutes, false, true)
  • Return Type: string
  • Calls:
  • meridiem

a(): string

Code 
() => meridiem(hours, minutes, true)
  • Return Type: string
  • Calls:
  • meridiem

aa(): string

Code 
() => meridiem(hours, minutes, true, true)
  • Return Type: string
  • Calls:
  • meridiem

z(): string

Code 
() => stripTimeZone(date.toLocaleDateString(toValue(options.locales), { timeZoneName: 'shortOffset' }))
  • Return Type: string
  • Calls:
  • stripTimeZone

zz(): string

Code 
() => stripTimeZone(date.toLocaleDateString(toValue(options.locales), { timeZoneName: 'shortOffset' }))
  • Return Type: string
  • Calls:
  • stripTimeZone

zzz(): string

Code 
() => stripTimeZone(date.toLocaleDateString(toValue(options.locales), { timeZoneName: 'shortOffset' }))
  • Return Type: string
  • Calls:
  • stripTimeZone

zzzz(): string

Code 
() => stripTimeZone(date.toLocaleDateString(toValue(options.locales), { timeZoneName: 'longOffset' }))
  • Return Type: string
  • Calls:
  • stripTimeZone

Yo(): string

Code 
() => formatOrdinal(years)
  • Return Type: string
  • Calls:
  • formatOrdinal

YY(): string

Code 
() => String(years).slice(-2)
  • Return Type: string
  • Calls:
  • String(years).slice

YYYY(): number

Code 
() => years
  • Return Type: number

M(): number

Code 
() => month + 1
  • Return Type: number

Mo(): string

Code 
() => formatOrdinal(month + 1)
  • Return Type: string
  • Calls:
  • formatOrdinal

MM(): string

Code 
() => `${month + 1}`.padStart(2, '0')
  • Return Type: string
  • Calls:
  • `${month + 1}.padStart`

MMM(): string

Code 
() => date.toLocaleDateString(toValue(options.locales), { month: 'short' })
  • Return Type: string
  • Calls:
  • date.toLocaleDateString

MMMM(): string

Code 
() => date.toLocaleDateString(toValue(options.locales), { month: 'long' })
  • Return Type: string
  • Calls:
  • date.toLocaleDateString

D(): string

Code 
() => String(days)
  • Return Type: string
  • Calls:
  • String

Do(): string

Code 
() => formatOrdinal(days)
  • Return Type: string
  • Calls:
  • formatOrdinal

DD(): string

Code 
() => `${days}`.padStart(2, '0')
  • Return Type: string
  • Calls:
  • `${days}.padStart`

H(): string

Code 
() => String(hours)
  • Return Type: string
  • Calls:
  • String

Ho(): string

Code 
() => formatOrdinal(hours)
  • Return Type: string
  • Calls:
  • formatOrdinal

HH(): string

Code 
() => `${hours}`.padStart(2, '0')
  • Return Type: string
  • Calls:
  • `${hours}.padStart`

h(): string

Code 
() => `${hours % 12 || 12}`.padStart(1, '0')
  • Return Type: string
  • Calls:
  • `${hours % 12 || 12}.padStart`

ho(): string

Code 
() => formatOrdinal(hours % 12 || 12)
  • Return Type: string
  • Calls:
  • formatOrdinal

hh(): string

Code 
() => `${hours % 12 || 12}`.padStart(2, '0')
  • Return Type: string
  • Calls:
  • `${hours % 12 || 12}.padStart`

m(): string

Code 
() => String(minutes)
  • Return Type: string
  • Calls:
  • String

mo(): string

Code 
() => formatOrdinal(minutes)
  • Return Type: string
  • Calls:
  • formatOrdinal

mm(): string

Code 
() => `${minutes}`.padStart(2, '0')
  • Return Type: string
  • Calls:
  • `${minutes}.padStart`

s(): string

Code 
() => String(seconds)
  • Return Type: string
  • Calls:
  • String

so(): string

Code 
() => formatOrdinal(seconds)
  • Return Type: string
  • Calls:
  • formatOrdinal

ss(): string

Code 
() => `${seconds}`.padStart(2, '0')
  • Return Type: string
  • Calls:
  • `${seconds}.padStart`

SSS(): string

Code 
() => `${milliseconds}`.padStart(3, '0')
  • Return Type: string
  • Calls:
  • `${milliseconds}.padStart`

d(): number

Code 
() => day
  • Return Type: number

dd(): string

Code 
() => date.toLocaleDateString(toValue(options.locales), { weekday: 'narrow' })
  • Return Type: string
  • Calls:
  • date.toLocaleDateString

ddd(): string

Code 
() => date.toLocaleDateString(toValue(options.locales), { weekday: 'short' })
  • Return Type: string
  • Calls:
  • date.toLocaleDateString

dddd(): string

Code 
() => date.toLocaleDateString(toValue(options.locales), { weekday: 'long' })
  • Return Type: string
  • Calls:
  • date.toLocaleDateString

A(): string

Code 
() => meridiem(hours, minutes)
  • Return Type: string
  • Calls:
  • meridiem

AA(): string

Code 
() => meridiem(hours, minutes, false, true)
  • Return Type: string
  • Calls:
  • meridiem

a(): string

Code 
() => meridiem(hours, minutes, true)
  • Return Type: string
  • Calls:
  • meridiem

aa(): string

Code 
() => meridiem(hours, minutes, true, true)
  • Return Type: string
  • Calls:
  • meridiem

z(): string

Code 
() => stripTimeZone(date.toLocaleDateString(toValue(options.locales), { timeZoneName: 'shortOffset' }))
  • Return Type: string
  • Calls:
  • stripTimeZone

zz(): string

Code 
() => stripTimeZone(date.toLocaleDateString(toValue(options.locales), { timeZoneName: 'shortOffset' }))
  • Return Type: string
  • Calls:
  • stripTimeZone

zzz(): string

Code 
() => stripTimeZone(date.toLocaleDateString(toValue(options.locales), { timeZoneName: 'shortOffset' }))
  • Return Type: string
  • Calls:
  • stripTimeZone

zzzz(): string

Code 
() => stripTimeZone(date.toLocaleDateString(toValue(options.locales), { timeZoneName: 'longOffset' }))
  • Return Type: string
  • Calls:
  • stripTimeZone

Yo(): string

Code 
() => formatOrdinal(years)
  • Return Type: string
  • Calls:
  • formatOrdinal

YY(): string

Code 
() => String(years).slice(-2)
  • Return Type: string
  • Calls:
  • String(years).slice

YYYY(): number

Code 
() => years
  • Return Type: number

M(): number

Code 
() => month + 1
  • Return Type: number

Mo(): string

Code 
() => formatOrdinal(month + 1)
  • Return Type: string
  • Calls:
  • formatOrdinal

MM(): string

Code 
() => `${month + 1}`.padStart(2, '0')
  • Return Type: string
  • Calls:
  • `${month + 1}.padStart`

MMM(): string

Code 
() => date.toLocaleDateString(toValue(options.locales), { month: 'short' })
  • Return Type: string
  • Calls:
  • date.toLocaleDateString

MMMM(): string

Code 
() => date.toLocaleDateString(toValue(options.locales), { month: 'long' })
  • Return Type: string
  • Calls:
  • date.toLocaleDateString

D(): string

Code 
() => String(days)
  • Return Type: string
  • Calls:
  • String

Do(): string

Code 
() => formatOrdinal(days)
  • Return Type: string
  • Calls:
  • formatOrdinal

DD(): string

Code 
() => `${days}`.padStart(2, '0')
  • Return Type: string
  • Calls:
  • `${days}.padStart`

H(): string

Code 
() => String(hours)
  • Return Type: string
  • Calls:
  • String

Ho(): string

Code 
() => formatOrdinal(hours)
  • Return Type: string
  • Calls:
  • formatOrdinal

HH(): string

Code 
() => `${hours}`.padStart(2, '0')
  • Return Type: string
  • Calls:
  • `${hours}.padStart`

h(): string

Code 
() => `${hours % 12 || 12}`.padStart(1, '0')
  • Return Type: string
  • Calls:
  • `${hours % 12 || 12}.padStart`

ho(): string

Code 
() => formatOrdinal(hours % 12 || 12)
  • Return Type: string
  • Calls:
  • formatOrdinal

hh(): string

Code 
() => `${hours % 12 || 12}`.padStart(2, '0')
  • Return Type: string
  • Calls:
  • `${hours % 12 || 12}.padStart`

m(): string

Code 
() => String(minutes)
  • Return Type: string
  • Calls:
  • String

mo(): string

Code 
() => formatOrdinal(minutes)
  • Return Type: string
  • Calls:
  • formatOrdinal

mm(): string

Code 
() => `${minutes}`.padStart(2, '0')
  • Return Type: string
  • Calls:
  • `${minutes}.padStart`

s(): string

Code 
() => String(seconds)
  • Return Type: string
  • Calls:
  • String

so(): string

Code 
() => formatOrdinal(seconds)
  • Return Type: string
  • Calls:
  • formatOrdinal

ss(): string

Code 
() => `${seconds}`.padStart(2, '0')
  • Return Type: string
  • Calls:
  • `${seconds}.padStart`

SSS(): string

Code 
() => `${milliseconds}`.padStart(3, '0')
  • Return Type: string
  • Calls:
  • `${milliseconds}.padStart`

d(): number

Code 
() => day
  • Return Type: number

dd(): string

Code 
() => date.toLocaleDateString(toValue(options.locales), { weekday: 'narrow' })
  • Return Type: string
  • Calls:
  • date.toLocaleDateString

ddd(): string

Code 
() => date.toLocaleDateString(toValue(options.locales), { weekday: 'short' })
  • Return Type: string
  • Calls:
  • date.toLocaleDateString

dddd(): string

Code 
() => date.toLocaleDateString(toValue(options.locales), { weekday: 'long' })
  • Return Type: string
  • Calls:
  • date.toLocaleDateString

A(): string

Code 
() => meridiem(hours, minutes)
  • Return Type: string
  • Calls:
  • meridiem

AA(): string

Code 
() => meridiem(hours, minutes, false, true)
  • Return Type: string
  • Calls:
  • meridiem

a(): string

Code 
() => meridiem(hours, minutes, true)
  • Return Type: string
  • Calls:
  • meridiem

aa(): string

Code 
() => meridiem(hours, minutes, true, true)
  • Return Type: string
  • Calls:
  • meridiem

z(): string

Code 
() => stripTimeZone(date.toLocaleDateString(toValue(options.locales), { timeZoneName: 'shortOffset' }))
  • Return Type: string
  • Calls:
  • stripTimeZone

zz(): string

Code 
() => stripTimeZone(date.toLocaleDateString(toValue(options.locales), { timeZoneName: 'shortOffset' }))
  • Return Type: string
  • Calls:
  • stripTimeZone

zzz(): string

Code 
() => stripTimeZone(date.toLocaleDateString(toValue(options.locales), { timeZoneName: 'shortOffset' }))
  • Return Type: string
  • Calls:
  • stripTimeZone

zzzz(): string

Code 
() => stripTimeZone(date.toLocaleDateString(toValue(options.locales), { timeZoneName: 'longOffset' }))
  • Return Type: string
  • Calls:
  • stripTimeZone

Yo(): string

Code 
() => formatOrdinal(years)
  • Return Type: string
  • Calls:
  • formatOrdinal

YY(): string

Code 
() => String(years).slice(-2)
  • Return Type: string
  • Calls:
  • String(years).slice

YYYY(): number

Code 
() => years
  • Return Type: number

M(): number

Code 
() => month + 1
  • Return Type: number

Mo(): string

Code 
() => formatOrdinal(month + 1)
  • Return Type: string
  • Calls:
  • formatOrdinal

MM(): string

Code 
() => `${month + 1}`.padStart(2, '0')
  • Return Type: string
  • Calls:
  • `${month + 1}.padStart`

MMM(): string

Code 
() => date.toLocaleDateString(toValue(options.locales), { month: 'short' })
  • Return Type: string
  • Calls:
  • date.toLocaleDateString

MMMM(): string

Code 
() => date.toLocaleDateString(toValue(options.locales), { month: 'long' })
  • Return Type: string
  • Calls:
  • date.toLocaleDateString

D(): string

Code 
() => String(days)
  • Return Type: string
  • Calls:
  • String

Do(): string

Code 
() => formatOrdinal(days)
  • Return Type: string
  • Calls:
  • formatOrdinal

DD(): string

Code 
() => `${days}`.padStart(2, '0')
  • Return Type: string
  • Calls:
  • `${days}.padStart`

H(): string

Code 
() => String(hours)
  • Return Type: string
  • Calls:
  • String

Ho(): string

Code 
() => formatOrdinal(hours)
  • Return Type: string
  • Calls:
  • formatOrdinal

HH(): string

Code 
() => `${hours}`.padStart(2, '0')
  • Return Type: string
  • Calls:
  • `${hours}.padStart`

h(): string

Code 
() => `${hours % 12 || 12}`.padStart(1, '0')
  • Return Type: string
  • Calls:
  • `${hours % 12 || 12}.padStart`

ho(): string

Code 
() => formatOrdinal(hours % 12 || 12)
  • Return Type: string
  • Calls:
  • formatOrdinal

hh(): string

Code 
() => `${hours % 12 || 12}`.padStart(2, '0')
  • Return Type: string
  • Calls:
  • `${hours % 12 || 12}.padStart`

m(): string

Code 
() => String(minutes)
  • Return Type: string
  • Calls:
  • String

mo(): string

Code 
() => formatOrdinal(minutes)
  • Return Type: string
  • Calls:
  • formatOrdinal

mm(): string

Code 
() => `${minutes}`.padStart(2, '0')
  • Return Type: string
  • Calls:
  • `${minutes}.padStart`

s(): string

Code 
() => String(seconds)
  • Return Type: string
  • Calls:
  • String

so(): string

Code 
() => formatOrdinal(seconds)
  • Return Type: string
  • Calls:
  • formatOrdinal

ss(): string

Code 
() => `${seconds}`.padStart(2, '0')
  • Return Type: string
  • Calls:
  • `${seconds}.padStart`

SSS(): string

Code 
() => `${milliseconds}`.padStart(3, '0')
  • Return Type: string
  • Calls:
  • `${milliseconds}.padStart`

d(): number

Code 
() => day
  • Return Type: number

dd(): string

Code 
() => date.toLocaleDateString(toValue(options.locales), { weekday: 'narrow' })
  • Return Type: string
  • Calls:
  • date.toLocaleDateString

ddd(): string

Code 
() => date.toLocaleDateString(toValue(options.locales), { weekday: 'short' })
  • Return Type: string
  • Calls:
  • date.toLocaleDateString

dddd(): string

Code 
() => date.toLocaleDateString(toValue(options.locales), { weekday: 'long' })
  • Return Type: string
  • Calls:
  • date.toLocaleDateString

A(): string

Code 
() => meridiem(hours, minutes)
  • Return Type: string
  • Calls:
  • meridiem

AA(): string

Code 
() => meridiem(hours, minutes, false, true)
  • Return Type: string
  • Calls:
  • meridiem

a(): string

Code 
() => meridiem(hours, minutes, true)
  • Return Type: string
  • Calls:
  • meridiem

aa(): string

Code 
() => meridiem(hours, minutes, true, true)
  • Return Type: string
  • Calls:
  • meridiem

z(): string

Code 
() => stripTimeZone(date.toLocaleDateString(toValue(options.locales), { timeZoneName: 'shortOffset' }))
  • Return Type: string
  • Calls:
  • stripTimeZone

zz(): string

Code 
() => stripTimeZone(date.toLocaleDateString(toValue(options.locales), { timeZoneName: 'shortOffset' }))
  • Return Type: string
  • Calls:
  • stripTimeZone

zzz(): string

Code 
() => stripTimeZone(date.toLocaleDateString(toValue(options.locales), { timeZoneName: 'shortOffset' }))
  • Return Type: string
  • Calls:
  • stripTimeZone

zzzz(): string

Code 
() => stripTimeZone(date.toLocaleDateString(toValue(options.locales), { timeZoneName: 'longOffset' }))
  • Return Type: string
  • Calls:
  • stripTimeZone

normalizeDate(date: DateLike): Date

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)
}
  • Parameters:
  • date: DateLike
  • Return Type: Date
  • Calls:
  • /Z$/i.test
  • date.match
  • (d[7] || '0').substring

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

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

  • 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
 */

  • Parameters:

  • date: MaybeRefOrGetter<DateLike>
  • formatStr: MaybeRefOrGetter<string>
  • options: UseDateFormatOptions
  • Return Type: UseDateFormatReturn
  • Calls:
  • computed (from vue)
  • formatDate
  • normalizeDate
  • toValue (from vue)

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> ✓
customMeridiem (hours: number, minutes: number, isLowercase?: boolean, hasPeriod?: boolean) => string ✓

Type Aliases

DateLike

type DateLike = Date | number | string | undefined;

UseDateFormatReturn

type UseDateFormatReturn = ComputedRef<string>;