use available dateLocale

This commit is contained in:
Maxime-J 2023-09-09 09:51:58 +00:00
parent 9b501d03e9
commit eec871dc4a
2 changed files with 6 additions and 8 deletions

View File

@ -12,11 +12,10 @@ import { startOfMonth, endOfMonth } from 'date-fns';
import Icons from 'components/icons'; import Icons from 'components/icons';
import { useLocale } from 'components/hooks'; import { useLocale } from 'components/hooks';
import { formatDate } from 'lib/date'; import { formatDate } from 'lib/date';
import { getDateLocale } from 'lib/lang';
import styles from './MonthSelect.module.css'; import styles from './MonthSelect.module.css';
export function MonthSelect({ date = new Date(), onChange }) { export function MonthSelect({ date = new Date(), onChange }) {
const { locale } = useLocale(); const { locale, dateLocale } = useLocale();
const month = formatDate(date, 'MMMM', locale); const month = formatDate(date, 'MMMM', locale);
const year = date.getFullYear(); const year = date.getFullYear();
const ref = useRef(); const ref = useRef();
@ -40,7 +39,7 @@ export function MonthSelect({ date = new Date(), onChange }) {
{close => ( {close => (
<CalendarMonthSelect <CalendarMonthSelect
date={date} date={date}
locale={getDateLocale(locale)} locale={dateLocale}
onSelect={handleChange.bind(null, close)} onSelect={handleChange.bind(null, close)}
/> />
)} )}
@ -57,7 +56,7 @@ export function MonthSelect({ date = new Date(), onChange }) {
{close => ( {close => (
<CalendarYearSelect <CalendarYearSelect
date={date} date={date}
locale={getDateLocale(locale)} locale={dateLocale}
onSelect={handleChange.bind(null, close)} onSelect={handleChange.bind(null, close)}
/> />
)} )}

View File

@ -2,7 +2,6 @@ import { useState } from 'react';
import { Button, ButtonGroup, Calendar } from 'react-basics'; import { Button, ButtonGroup, Calendar } from 'react-basics';
import { isAfter, isBefore, isSameDay, startOfDay, endOfDay } from 'date-fns'; import { isAfter, isBefore, isSameDay, startOfDay, endOfDay } from 'date-fns';
import useLocale from 'components/hooks/useLocale'; import useLocale from 'components/hooks/useLocale';
import { getDateLocale } from 'lib/lang';
import { FILTER_DAY, FILTER_RANGE } from 'lib/constants'; import { FILTER_DAY, FILTER_RANGE } from 'lib/constants';
import useMessages from 'components/hooks/useMessages'; import useMessages from 'components/hooks/useMessages';
import styles from './DatePickerForm.module.css'; import styles from './DatePickerForm.module.css';
@ -21,7 +20,7 @@ export function DatePickerForm({
const [singleDate, setSingleDate] = useState(defaultStartDate); const [singleDate, setSingleDate] = useState(defaultStartDate);
const [startDate, setStartDate] = useState(defaultStartDate); const [startDate, setStartDate] = useState(defaultStartDate);
const [endDate, setEndDate] = useState(defaultEndDate); const [endDate, setEndDate] = useState(defaultEndDate);
const { locale } = useLocale(); const { dateLocale } = useLocale();
const { formatMessage, labels } = useMessages(); const { formatMessage, labels } = useMessages();
const disabled = const disabled =
@ -60,14 +59,14 @@ export function DatePickerForm({
date={startDate} date={startDate}
minDate={minDate} minDate={minDate}
maxDate={endDate} maxDate={endDate}
locale={getDateLocale(locale)} locale={dateLocale}
onChange={setStartDate} onChange={setStartDate}
/> />
<Calendar <Calendar
date={endDate} date={endDate}
minDate={startDate} minDate={startDate}
maxDate={maxDate} maxDate={maxDate}
locale={getDateLocale(locale)} locale={dateLocale}
onChange={setEndDate} onChange={setEndDate}
/> />
</> </>