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

Question

Я пытаюсь создать диалоговое окно для пользователя, чтобы предоставить начальную и конечную дату / время с помощью React и Material UI. Я бы хотел установить по умолчанию начало начала текущего дня и конец конца текущего дня (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 или значение, но ничего не работает ...

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

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