Dates and Times

() => {
  const [date, setStartDate] = React.useState()
  const [format, setFormat] = React.useState()
  const [time, setTime] = React.useState(Date.now())
  const formattedDate = date && new Date(date)
  return (
    <>
      <input
        type="date"
        onChange={e => setStartDate(e.target.value)}
        value={date}
      />
      <br />
      <select onChange={e => setFormat(e.target.value)}>
        <option />
        <option select={format === 'short'} value="short">
          short
        </option>
        <option select={format === 'medium'} value="medium">
          medium
        </option>
        <option select={format === 'long'} value="long">
          long
        </option>
        <option select={format === 'full'} value="full">
          full
        </option>
        <option select={format === 'hourOfDay'} value="hourOfDay">
          hourOfDay
        </option>
        <option select={format === 'monthOnly'} value="monthOnly">
          monthOnly
        </option>
        <option select={format === 'monthWithDay'} value="monthWithDay">
          monthWithDay (deprecated)
        </option>
        <option
          select={format === 'shortMonthShortDay'}
          value="shortMonthShortDay"
        >
          shortMonthShortDay
        </option>
        <option
          select={format === 'mediumMonthShortDay'}
          value="mediumMonthShortDay"
        >
          mediumMonthShortDay
        </option>
        <option
          select={format === 'fullMonthShortDay'}
          value="fullMonthShortDay"
        >
          fullMonthShortDay
        </option>
        <option
          select={format === 'mediumMonthWithYear'}
          value="mediumMonthWithYear"
        >
          mediumMonthWithYear
        </option>
        <option
          select={format === 'longMonthWithYear'}
          value="longMonthWithYear"
        >
          longMonthWithYear
        </option>
      </select>
      <br />
      <p>
        Parks and Rec first aired on{' '}
        <DateTime
          value={formattedDate}
          format={format || 'short'}
          type={DateTime.Type.Date}
        />
      </p>
      <p>
        It is now{' '}
        <DateTime
          value={time}
          format={format || 'short'}
          type={DateTime.Type.Time}
        />
      </p>
    </>
  )
}