Add formatDay() to LocaleUtils

This is required to add the aria-label attribute. See #132 for more details.

docs/LocaleUtils.md

@@ -1,14 +1,14 @@
 # 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:
 
 ```jsx
 import DayPicker, { LocaleUtils } from "react-day-picker";
 
 function formatMonthTitle(d, locale) {
- return `${d.getMonth() + 1}/${d.getFullYear}` 
+ return `${d.getMonth() + 1}/${d.getFullYear}`
 }
 
 <DayPicker localeUtils={{ ...LocaleUtils, formatMonthTitle }} />
@@ -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`.

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],

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],

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,

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,