Change base input tag language in react app, overwrite base browser dependent language

HTML [ input type="date" ] tag is influenced by the browser and its localization depends on the user's browser settings.

To have full control over the date format and localization, use a custom date picker component.

Install react-datepicker and date-fns

npm install react-datepicker date-fns

then import and fix the code

here is the code

import React, { useState } from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
import { registerLocale, setDefaultLocale } from 'react-datepicker';
import en from 'date-fns/locale/en-US';
import de from 'date-fns/locale/de';


registerLocale('en', en);
registerLocale('de', de);

const App: React.FC = () => {
  const [startDate, setStartDate] = useState<Date | null>(new Date());
  const [locale, setLocale] = useState<string>('en'); // Default to English

  
  const handleLanguageChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
    setLocale(event.target.value);
  };

  return (
    <div>
      <select onChange={handleLanguageChange}>
        <option value="en">English</option>
        <option value="de">German</option>
      </select>
      <DatePicker
        selected={startDate}
        onChange={(date: Date | null) => setStartDate(date)}
        locale={locale}
      />
    </div>
  );
};

export default App;