I have to format the date to DD-MMM-YYYY format. I Am using reactjs. The date is formatted in IE but not in Google Chrome. Please suggest.
<input name="requested_order_ship_date" type="date"
disabled={ this.state.mode }
value={ moment(this.state.item.requested_order_ship_date).format("DD-MMM-YYYY") }
className="form-control" onChange={ this.handleInputChange } />
This actually has nothing to do with React. For <input type="date" /> values, browsers expect the value of the date to be in YYYY-MM-DD format.
See Is there any way to change input type="date" format? for more info.
Actually it is possible , i know this question has already answered, but hope this helps to someone.
import { useState } from "react";
const formatDisplayDate = (dateString) => {
if (!dateString) return "";
const date = new Date(dateString);
const day = date.getDate().toString().padStart(2, '0');
const month = date.toLocaleString('default', { month: 'short' });
const year = date.getFullYear().toString();
return `${day}-${month}-${year}`;
}; /// set above data type as you like
const App = () => {
const [date, setDate] = useState("");
return (
<div className="flex items-center space-x-4">
<div className="flex-1">
<label className="block text-sm font-medium text-gray-700">
Date
</label>
<div className="relative">
{date && (
<span className="absolute left-2 bottom-2 bg-white px-2 text-sm text-gray-600" style={{ pointerEvents: "none" }} > {formatDisplayDate(date)} </span>
)}
<input type="date" value={date} onChange={(e) => setDate(e.target.value)} className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-[#9F5316] focus:ring-[#9F5316] p-2 bg-white" required />
</div>
</div>
</div>
);
};
export default App;
