@@ -47,20 +47,28 @@ const DateField = ({
4747}
4848onChange ( date ?. format ( DateFormat . MMM_DD_YYYY ) ) ;
4949} ;
50- const { locale} = useSelector ( ( state ) => ( {
51- locale :getCurrentLocale ( state ) ,
52- } ) ) ;
50+ const locale = useSelector ( getCurrentLocale ) ;
5351
5452const formatDate = ( dateToFormat ) => {
5553if ( ! dateToFormat ) {
5654return null ;
5755}
58- if ( showTimeSelect ) {
59- return moment ( new Date ( dateToFormat ) , DateFormat . MMM_DD_YYYY_HH_MM_SS ) ;
56+
57+ const format = showTimeSelect
58+ ?DateFormat . MMM_DD_YYYY_HH_MM_SS
59+ :DateFormat . MMM_DD_YYYY ;
60+
61+ // The locale has to be lower cased, because moment.js accepts arguments like: 'es-mx', not
62+ // 'es-MX' we can't just return null if the locale is not already loaded, because the date needs
63+ // to have value, so we default to 'en' in that case
64+ const language = ( locale || 'en' ) . toLowerCase ( ) ;
65+ // If the date is not valid in the given format, we try to parse it without format
66+ const date = moment ( dateToFormat , format , language , true ) ;
67+ if ( date . isValid ( ) ) {
68+ return date ;
6069}
61- return showTimeSelect
62- ?moment ( new Date ( dateToFormat ) , DateFormat . MMM_DD_YYYY_HH_MM_SS )
63- :moment ( new Date ( dateToFormat ) , DateFormat . MMM_DD_YYYY ) ;
70+ // Fallback to default parsing
71+ return moment ( dateToFormat ) ;
6472} ;
6573
6674const selectedDate = formatDate ( value ) ;