added: support for intl date-picker, italian datepicker

app/soapbox/features/compose/components/schedule-form.tsx

@@ -1,7 +1,9 @@
 'use strict';
 
 import classNames from 'clsx';
+import { enUS, it } from 'date-fns/locale';
 import React from 'react';
+import { registerLocale } from 'react-datepicker';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { setSchedule, removeSchedule } from 'soapbox/actions/compose';
@@ -11,6 +13,7 @@ import BundleContainer from 'soapbox/features/ui/containers/bundle-container';
 import { DatePicker } from 'soapbox/features/ui/util/async-components';
 import { useAppDispatch, useCompose } from 'soapbox/hooks';
 
+
 export const isCurrentOrFutureDate = (date: Date) => {
   return date && new Date().setHours(0, 0, 0, 0) <= new Date(date).setHours(0, 0, 0, 0);
 };
@@ -35,6 +38,12 @@ const ScheduleForm: React.FC<IScheduleForm> = ({ composeId }) => {
   const dispatch = useAppDispatch();
   const intl = useIntl();
 
+  if ('it' === intl.locale) {
+    registerLocale(intl.locale, it);
+  } else {
+    registerLocale(intl.locale, enUS);
+  }
+
   const scheduledAt = useCompose(composeId).schedule;
   const active = !!scheduledAt;
 
@@ -59,9 +68,10 @@ const ScheduleForm: React.FC<IScheduleForm> = ({ composeId }) => {
       <HStack space={2} alignItems='center'>
         <BundleContainer fetchComponent={DatePicker}>
           {Component => (<Component
+            locale={intl.locale}
             selected={scheduledAt}
             showTimeSelect
-            dateFormat='MMMM d, yyyy h:mm aa'
+            dateFormat='PPPPp'
             timeIntervals={15}
             wrapperClassName='react-datepicker-wrapper'
             onChange={onSchedule}

app/soapbox/features/ui/components/modals/compose-event-modal/compose-event-modal.tsx

@@ -1,4 +1,6 @@
+import { enUS, it } from 'date-fns/locale';
 import React, { useEffect, useState } from 'react';
+import { registerLocale } from 'react-datepicker';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import Toggle from 'react-toggle';
 
@@ -93,6 +95,13 @@ interface IComposeEventModal {
 
 const ComposeEventModal: React.FC<IComposeEventModal> = ({ onClose }) => {
   const intl = useIntl();
+
+  if ('it' === intl.locale) {
+    registerLocale(intl.locale, it);
+  } else {
+    registerLocale(intl.locale, enUS);
+  }
+
   const dispatch = useAppDispatch();
 
   const [tab, setTab] = useState<'edit' | 'pending'>('edit');
@@ -261,8 +270,9 @@ const ComposeEventModal: React.FC<IComposeEventModal> = ({ onClose }) => {
       >
         <BundleContainer fetchComponent={DatePicker}>
           {Component => (<Component
+            locale={intl.locale}
             showTimeSelect
-            dateFormat='MMMM d, yyyy h:mm aa'
+            dateFormat='PPPPp'
             timeIntervals={15}
             wrapperClassName='react-datepicker-wrapper'
             placeholderText={intl.formatMessage(messages.eventStartTimePlaceholder)}
@@ -288,8 +298,9 @@ const ComposeEventModal: React.FC<IComposeEventModal> = ({ onClose }) => {
         >
           <BundleContainer fetchComponent={DatePicker}>
             {Component => (<Component
+              locale={intl.locale}
               showTimeSelect
-              dateFormat='MMMM d, yyyy h:mm aa'
+              dateFormat='PPPPp'
               timeIntervals={15}
               wrapperClassName='react-datepicker-wrapper'
               placeholderText={intl.formatMessage(messages.eventEndTimePlaceholder)}

package.json

@@ -115,6 +115,7 @@
     "cryptocurrency-icons": "^0.18.1",
     "css-loader": "^6.7.1",
     "cssnano": "^5.1.10",
+    "date-fns": "^2.29.3",
     "detect-passive-events": "^2.0.0",
     "dotenv": "^16.0.0",
     "emoji-datasource": "5.0.1",

yarn.lock

@@ -4773,6 +4773,11 @@ date-fns@^2.0.1, date-fns@^2.24.0:
   resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.28.0.tgz#9570d656f5fc13143e50c975a3b6bbeb46cd08b2"
   integrity sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw==
 
+date-fns@^2.29.3:
+  version "2.29.3"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.29.3.tgz#27402d2fc67eb442b511b70bbdf98e6411cd68a8"
+  integrity sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA==
+
 debug@2.6.9, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"