Блог

Главная - Вопросы по программированию - Как установить по умолчанию текущую дату / время UTC для средства выбора даты и времени пользовательского интерфейса Material

Как установить по умолчанию текущую дату / время UTC для средства выбора даты и времени пользовательского интерфейса Material

#javascript #reactjs #material-ui

#javascript #reactjs #материал-пользовательский интерфейс

Вопрос:

Я пытаюсь создать диалоговое окно для пользователя, чтобы указать начальную и конечную дату / время с помощью React и Material UI. Я хотел бы установить по умолчанию значение start до начала текущего дня и end до конца текущего дня (UTC), но я даже не могу понять, как получить дату и время по умолчанию для отображения.

У меня есть начало и конец в таком состоянии:

 state = {
    start: new Date(),
    end: new Date()
};

и тогда у меня есть поля в методе рендеринга:

 <TextField
    type="datetime-local"
    label="Start Date/Time"
    InputLabelProps={{
        shrink: true
    }}
    required={true}
    // TODO make it start of today
    defaultValue={this.state.start.toUTCString()}
    onChange={this.handleStartChange}
/>
<TextField
    type="datetime-local"
    label="End Date/Time"
    InputLabelProps={{
        shrink: true
    }}
    required={true}
    value={this.state.end.toString()}
    // TODO make it end of today
    onChange={this.handleEndChange}
/>

но когда я открываю диалоговое окно, в текстовых полях mm/dd/yyyy --:-- --
вместо текущей даты / времени устанавливается состояние. Я пробовал как toUTCString, так и toString, чтобы указать дату, используя defaultValue или value, но ничего не работает…

Я бы хотел, чтобы текущая дата UTC отображалась в текстовых полях.

Комментарии:

1. Пользовательский интерфейс Material не включает средства выбора даты / времени из поля, текстовое поле по умолчанию соответствует базовому вводу HTML 5. Используйте что-то вроде этого , если вы хотите согласованного поведения на всех платформах.

2. @JaredSmith спасибо — это выглядит интересно!!! Я новичок во всем этом, поэтому потребуется некоторое время, чтобы разобраться в moment, date-fns, luxon и dayjs, чтобы использовать его. но это было бы лучше, чем то, что я сейчас делаю, наверняка.

Ответ №1:

это то, что у меня получилось:

                     <TextField
                        style={{ margin: 0, width: '200px' }}
                        label="Start Date/Time (UTC)"
                        type="datetime-local"
                        defaultValue={this.state.start
                            .toISOString()
                            .slice(0, 16)}
                        InputLabelProps={{
                            shrink: true
                        }}
                        required={true}
                        onChange={this.handleStartChange}
                    />
                    <TextField
                        style={{ margin: 0, width: '200px' }}
                        label="End Date/Time (UTC)"
                        type="datetime-local"
                        defaultValue={this.state.end
                            .toISOString()
                            .slice(0, 16)}
                        InputLabelProps={{
                            shrink: true
                        }}
                        required={true}
                        onChange={this.handleEndChange}
                    />
Метки: