How to force input type="date" to display in mm-dd-yyyy format?-CodePudding

In a React project, I'm displaying date in normal form i.e dd/mm/yyyy since its based on browser location settings, but, I need it in mm/dd/yyyy format based on english date. Is there any way to enforce it to display it in that required format.

const DateComp = () => {
  var newDateValue = new Date().toISOString().split("T")[0];

  const [selectedDate, setSelectedDate] = useState(newDateValue);
  return (
    <>
      <input
        type="date"
        required
        className="form-control cpselect box-shadow"
        defaultValue={selectedDate}
      />
    </>
  );
};

export default DateComp;

Here input type="date" accepts only toISOString(), but, it shows date only in dd/mm/yyyy format whereas I'm expecting it to format in mm/dd/yyyy. What could be best solution?

CodePudding user response：

Use react-date-picker package.

import React, { useState } from 'react';
import DatePicker from 'react-date-picker';

function MyApp() {
  const [value, onChange] = useState(new Date());

  return (
    <div>
      <DatePicker onChange={onChange} value={value} format="MM-dd-y" />
    </div>
  );
}

CodePudding user response：

[![enter image description here][1]][1]You can try out this one: first install: npm install --save moment

import Moment from 'moment';

const formatDate = Moment().format("MMM Do YY");

The output will be Aug 24th 2022 format.