React Material-UI Cookbook

How it works...

What's nice about this approach is that you only have one piece of state to work with, datetime, which is a Date instance. Let's step through the code to see how this is made possible, starting with the initial state of the UsingDatePickers component:

const [datetime, setDatetime] = useState(new Date());

The current date and time is assigned to the datetime state. Next, let's look at the two formatting functions that enable the Date instances to work with the TextField components:

function formatDate(date) {  const year = date.getFullYear();  const month = date.getMonth() + 1;  const day = date.getDate();  return [    year,    month < 10 ? `0${month}` : month,    day < 10 ? `0${day}` : day  ].join('-');}function formatTime(date) { const ...