defaultFormats
The defaultFormats property allows you to change the default format of dates.
For example, when a date has been truncated to a month, you might want to change how this is represented from MMMM YYYY to DD MMMM YYYY, which is another
date time filter option. You can always expand the formatting options by using the dateTimeFormatOptions property to completely customize the formatting of the date.
Examples
Simple
<Vizzly.Dashboard
defaultFormats={() => ({
// The key `month` is any of the `Key` values listed in the table below.
// The value `DD MMMM YYYY` maps to the `dateTimeFormatOptions`. Find the
// possible options here https://docs.vizzly.co/dashboard/properties/dateTimeFormatOptions#default-options
month: 'DD MMMM YYYY'
})}
/>Combining with dateTimeFormatOptions
<Vizzly.Dashboard
defaultFormats={() => ({
// The key is any of the `Key` values listed in the table below.
// The value `_custom` maps to the `dateTimeFormatOptions`
month: '_custom'
})}
dateTimeFormatOptions={{
_custom: {
description: 'Description of custom format',
formatter: (date) => {
return `CUSTOM ${date.toISOString()} CUSTOM`;
},
},
}}
/>Defaults
| Key | Format description | Example |
|---|---|---|
second | hh:mm:ss | 13:00:00 |
minute | hh:mm | 13:20 |
hour | hh:mm | 13:00 |
day | DD-MM-YYYY | 31-01-2024 |
week | week | Week 5, 2024 |
month | MMMM YYYY | Jan 2024 |
quarter | quarter | Q1, 2024 |
year | YYYY | 2024 |
hourOfDayOnly | hh:mm | 13:00 |
weekOfYearOnly | Week X | Week 3 |
dayOfWeekOnly | DDDD | Monday |
dayOfMonthOnly | N | 3 |