I am working on a system where I am asked to set an exact time point with this format dd/MM/yyyy HH:mm:ss, the problem is that I can't find a way to add a datetimepicker that contains all that at once, The component MUI's DateTimePicker is very ugly, and I like the native datepicker (it's the one I'd like to use) but I've only been able to choose the full date, hours, minutes but not seconds. Is there a way to do it? So far my code is like this (I also attach an image of the result):
<TextField
id="datetime-local"
label="Next appointment"
type="datetime-local"
defaultValue={ new Date() }
InputLabelProps={{shrink: true,}}
/>
material-ui has pickers: @material-ui/pickers
You can use it with format option:
import React, { useState } from 'react';
import { DateTimePicker } from '@material-ui/pickers';
function App() {
const [selectedDate, handleDateChange] = useState(new Date());
return (
<DateTimePicker format="dd-MM-yyyy HH:mm:ss" value={selectedDate} onChange={handleDateChange} />
);
}
export default App;