如何默認為Material UI日期時間選擇器的當前UTC日期/時間

Question

我正在嘗試為用戶創建一個對話框，以使用React和Material UI提供開始和結束日期/時間。 我想將開始默認為當天的開頭和結束到當天結束（UTC），但我甚至無法弄清楚如何獲得默認的日期和時間來顯示。

我有這樣的狀態的開始和結束：

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

然后我在render方法中有字段：

<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日期顯示在文本字段中。

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