Блог

Когда я выбираю дату в календаре, она возвращает мне нужную дату, но с текущим временем. Вот пример вывода после выбора случайного дня в семь часов: «Вт, 01 декабря 2020 года, 19:28:00 GMT 0200 (восточноевропейское стандартное время)». Я хочу, чтобы он возвращал мне 00:00:00, как это происходит, когда я сам записываю дату во ввод, не выбирая ее в календаре.

Вот фрагмент кода для выбора даты:

 <MuiPickersUtilsProvider utils={DateFnsUtils}>
      <KeyboardDatePicker
        className="search-element"
        disableToolbar
        variant="inline"
        format="dd/MM/yyyy"
        id="date-picker-inline"
        label="пошук від"
        value={firstDate}
        onChange={handleFirstDateChange}
        KeyboardButtonProps={{
          'aria-label': 'set first date',
        }}
      />
 

Средства выбора даты материала всегда будут указывать текущие часовые секунды часового пояса вашего браузера, у меня с этим много проблем, но вы всегда можете сделать

 import React from "react";

export default function YourComponent() {
 const [firstDate, setFirstDate] = React.useState(null)

 const handleFirstDateChange = (date) => {
  const newDate = date;
  // Check if date is present, user can leave it as an empty field
  if (date) {
   //Set's the given date to UTC midnight (start of the day)
   newDate.setUTCHours(0,0,0,0);
  }
  // Set the date to your local state or where you are storing it
  setFirstDate(newDate)
 }

 return (
   <KeyboardDatePicker
    className="search-element"
    disableToolbar
    variant="inline"
    format="dd/MM/yyyy"
    id="date-picker-inline"
    label="пошук від"
    value={firstDate}
    onChange={handleFirstDateChange}
    KeyboardButtonProps={{
      'aria-label': 'set first date',
    }}
   />
 )
}
 

Это позволит использовать дату начала дня по UTC, вы также можете использовать setHours, но для этого будет использоваться часовой пояс вашего браузера, который может отличаться в зависимости от местоположения пользователя.

Я бы также предложил использовать библиотеку Luxon и утилиты luxon вместо date-fns, если вашим требованиям нужен определенный часовой пояс (это то, что я в итоге сделал).