DateTimePicker with date, hours, minutes and seconds

user_17648201 0
Viewed 2548

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,}}
/>

This is what I have so far

reactjs datetimepicker javascript
1 Answers

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;
user_12549960
Related