Change translated text for selected time

[shuvro1226]

I am using react-datepicker package for date and time picking. I am passing language dynamically to the datepicker via locale prop for setting the language of the date and time picker. For the time picker, when the locale is set as de it translates AM/PM to vormittags/machmittags based on the selected time. I want to change that to Uhr instead. But reading their documentation it seems to be not supported by default. I need some suggestions on if it's possible to achieve this somehow while using the package.

Here's the time picker code -

<DatePicker
 selected={time}
 readOnly={true}
 showTimeSelect
 shouldCloseOnSelect
 showTimeSelectOnly
 timeIntervals={15}
 timeCaption={t("AddNewEvent.time")}
 dateFormat="hh:mm aaaa"
 open={isTimepickerOpen}
 onClickOutside={handleToggleTimePicker}
 className="form-control"
 onChange={(value) => handleChange("time", value)}
 locale={i18n.language}
 />

[alirezakm10]

You can customize your language translations in the following way. I've included the necessary parts of my code to help you copy and adapt it for your needs.

In this example, I modify the Persian translation of AM and PM to custom values. I then spread the rest of the language translations and overwrite the specific sections I want to change. Finally, I use the modified object in the locale of the date picker.

Here’s how you can do it:

// React Imports
import type { ComponentProps } from 'react';

// MUI imports
import Box from '@mui/material/Box';
import { styled } from '@mui/material/styles';
import type { BoxProps } from '@mui/material/Box';
import { faIR } from 'date-fns-jalali/locale';

// If your language exists in the main package, you can use the actual date-fns/locale import instead.

// Third-party Imports
import ReactDatePickerComponent, { registerLocale } from 'react-datepicker';

// Styles
import 'react-datepicker/dist/react-datepicker.css';

type Props = ComponentProps<typeof ReactDatePickerComponent> & {
  boxProps?: BoxProps;
};

// Extend and Customize the Locale
const customFaIR = {
  ...faIR,
  localize: {
    ...faIR.localize,
    dayPeriod: (value: string) => {
      if (value === 'am') return 'قبل از ظهر'; // Custom AM
      if (value === 'pm') return 'بعد از ظهر'; // Custom PM
      return value;
    },
  },
};

// Register the Custom Locale
registerLocale('custom-faIR', customFaIR);

Then use the custom locale in your component like this:

<AppReactDatepicker
  locale="custom-faIR"
  autoComplete="off"
  selected={field.value ? new Date(field.value * 1000) : null} // Convert timestamp to Date
  onChange={(date: Date | null) => {
    if (date) {
      const unixTimestamp = Math.floor(date.getTime() / 1000); // Convert Date to timestamp
      setFieldValue('discharge_time_to', unixTimestamp); // Store Unix timestamp
    } else {
      setFieldValue('discharge_time_to', null); // Handle null case
    }
  }}
  showTimeSelect
  showTimeSelectOnly
  timeIntervals={60}
  timeCaption="پایان زمان تخلیه"
  dateFormat="H aa"
  timeFormat="HH:mm"
  filterTime={(time) => {
    if (!values?.discharge_time_from) return true; // Allow all times if no start time is set

    const startTime = new Date(Number(values?.discharge_time_from) * 1000); // Convert timestamp to Date
    return time >= startTime; // Disable times before the selected start time
  }}
  customInput={
    <TextField
      fullWidth
      label="پایان زمان تخلیه"
      error={Boolean(errors.discharge_time_to && touched.discharge_time_to)}
      inputProps={{
        readOnly: true,
      }}
    />
  }
/>