diff --git a/src/components/input/MonthSelect.js b/src/components/input/MonthSelect.js
index fb1bf535..312c6854 100644
--- a/src/components/input/MonthSelect.js
+++ b/src/components/input/MonthSelect.js
@@ -12,11 +12,10 @@ import { startOfMonth, endOfMonth } from 'date-fns';
 import Icons from 'components/icons';
 import { useLocale } from 'components/hooks';
 import { formatDate } from 'lib/date';
-import { getDateLocale } from 'lib/lang';
 import styles from './MonthSelect.module.css';
 
 export function MonthSelect({ date = new Date(), onChange }) {
-  const { locale } = useLocale();
+  const { locale, dateLocale } = useLocale();
   const month = formatDate(date, 'MMMM', locale);
   const year = date.getFullYear();
   const ref = useRef();
@@ -40,7 +39,7 @@ export function MonthSelect({ date = new Date(), onChange }) {
             {close => (
               <CalendarMonthSelect
                 date={date}
-                locale={getDateLocale(locale)}
+                locale={dateLocale}
                 onSelect={handleChange.bind(null, close)}
               />
             )}
@@ -57,7 +56,7 @@ export function MonthSelect({ date = new Date(), onChange }) {
             {close => (
               <CalendarYearSelect
                 date={date}
-                locale={getDateLocale(locale)}
+                locale={dateLocale}
                 onSelect={handleChange.bind(null, close)}
               />
             )}
diff --git a/src/components/metrics/DatePickerForm.js b/src/components/metrics/DatePickerForm.js
index 9eb3c52e..2dcca77a 100644
--- a/src/components/metrics/DatePickerForm.js
+++ b/src/components/metrics/DatePickerForm.js
@@ -2,7 +2,6 @@ import { useState } from 'react';
 import { Button, ButtonGroup, Calendar } from 'react-basics';
 import { isAfter, isBefore, isSameDay, startOfDay, endOfDay } from 'date-fns';
 import useLocale from 'components/hooks/useLocale';
-import { getDateLocale } from 'lib/lang';
 import { FILTER_DAY, FILTER_RANGE } from 'lib/constants';
 import useMessages from 'components/hooks/useMessages';
 import styles from './DatePickerForm.module.css';
@@ -21,7 +20,7 @@ export function DatePickerForm({
   const [singleDate, setSingleDate] = useState(defaultStartDate);
   const [startDate, setStartDate] = useState(defaultStartDate);
   const [endDate, setEndDate] = useState(defaultEndDate);
-  const { locale } = useLocale();
+  const { dateLocale } = useLocale();
   const { formatMessage, labels } = useMessages();
 
   const disabled =
@@ -60,14 +59,14 @@ export function DatePickerForm({
               date={startDate}
               minDate={minDate}
               maxDate={endDate}
-              locale={getDateLocale(locale)}
+              locale={dateLocale}
               onChange={setStartDate}
             />
             <Calendar
               date={endDate}
               minDate={startDate}
               maxDate={maxDate}
-              locale={getDateLocale(locale)}
+              locale={dateLocale}
               onChange={setEndDate}
             />
           </>