diff --git a/docs/LocaleUtils.md b/docs/LocaleUtils.md index e12fd91355..630ef3a54f 100644 --- a/docs/LocaleUtils.md +++ b/docs/LocaleUtils.md @@ -1,6 +1,6 @@ # LocaleUtils -`LocaleUtils` is a set of functions used to localize the component (see: [Custom localization](LocalizationCustom.md)). You may want to implement your own `LocaleUtils`, or override some of its functions. +`LocaleUtils` is a set of functions used to localize the component (see: [Custom localization](LocalizationCustom.md)). You may want to implement your own `LocaleUtils`, or override some of its functions. For example, this code renders the month's title as `M/YYYY` instead of the default: @@ -8,7 +8,7 @@ For example, this code renders the month's title as `M/YYYY` instead of the defa import DayPicker, { LocaleUtils } from "react-day-picker"; function formatMonthTitle(d, locale) { - return `${d.getMonth() + 1}/${d.getFullYear}` + return `${d.getMonth() + 1}/${d.getFullYear}` } @@ -17,6 +17,10 @@ function formatMonthTitle(d, locale) { ## Functions +### `formatDay(d: date, locale: string) -> string` + +Format the string used as `aria-label` for the given day. + ### `formatMonthTitle(d: date, locale: string) -> string` Return the string used to format the month's title in the day picker for the given date `d`. diff --git a/docs/LocalizationCustom.md b/docs/LocalizationCustom.md index a13632919f..cc1f05015d 100644 --- a/docs/LocalizationCustom.md +++ b/docs/LocalizationCustom.md @@ -30,6 +30,7 @@ const FIRST_DAY = { } const localeUtils = { + formatDay: (d, locale="en") => `${weekdaysLong[locale][d.getDay()]}, ${d.getDate()} ${months[locale][d.getMonth()]} ${d.getFullYear()}`, formatMonthTitle: (d, locale) => `${MONTHS[locale][d.getMonth()]} ${d.getFullYear()}`, formatWeekdayShort: (i, locale) => WEEKDAYS_SHORT[locale][i], formatWeekdayLong: (i, locale) => WEEKDAYS_LONG[locale][i], diff --git a/examples/src/examples/LocalizedCustom.js b/examples/src/examples/LocalizedCustom.js index 761256361a..37ff438fa1 100644 --- a/examples/src/examples/LocalizedCustom.js +++ b/examples/src/examples/LocalizedCustom.js @@ -21,6 +21,8 @@ const firstDayOfWeek = { }; const localeUtils = { + formatDay: (d, locale="en") => + `${weekdaysLong[locale][d.getDay()]}, ${d.getDate()} ${months[locale][d.getMonth()]} ${d.getFullYear()}`, formatWeekdayShort: (index, locale="en") => weekdaysShort[locale][index], formatWeekdayLong: (index, locale="en") => weekdaysLong[locale][index], getFirstDayOfWeek: (locale) => firstDayOfWeek[locale], diff --git a/src/LocaleUtils.js b/src/LocaleUtils.js index 399f9e7501..6d6e142529 100644 --- a/src/LocaleUtils.js +++ b/src/LocaleUtils.js @@ -7,6 +7,10 @@ const WEEKDAYS_SHORT = ["Su", "Mo", "Tu", const MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; +export function formatDay(day) { + return day.toDateString(); +} + export function formatMonthTitle(d) { return `${MONTHS[d.getMonth()]} ${d.getFullYear()}`; } @@ -28,6 +32,7 @@ export function getMonths() { } export default { + formatDay, formatMonthTitle, formatWeekdayShort, formatWeekdayLong, diff --git a/src/addons/MomentLocaleUtils.js b/src/addons/MomentLocaleUtils.js index 6cce7582cb..b9f6c28aa6 100644 --- a/src/addons/MomentLocaleUtils.js +++ b/src/addons/MomentLocaleUtils.js @@ -1,5 +1,9 @@ import moment from "moment"; +export function formatDay(day, locale="en") { + return moment(day).locale(locale).format("ddd ll"); +} + export function formatMonthTitle(date, locale="en") { return moment(date).locale(locale).format("MMMM YYYY"); } @@ -27,6 +31,7 @@ export function getMonths(locale="en") { } export default { + formatDay, formatMonthTitle, formatWeekdayShort, formatWeekdayLong,