antd datePicker中showTime屬性的defaultValue無法設置時間

Question

我正在使用 ant 設計進行基於反應掛鈎的開發。 我正在通過網絡調用從數據庫中檢索日期，從數據庫中檢索的日期看起來像“2020-09-01T05:02:00.000+0000”。 它是一個字符串。 我必須在我的頁面中通過 antd datePicker 解析這個日期並顯示日期值和時間值。 雖然我已經成功設置了日期部分，但我堅持設置時間。 這是我的代碼，

########### 這是我的日期選擇器###########

                          <DatePicker
                            name="Campaign-date"
                            defaultValue={moment(formData['Campaign-date'].split('T')[0])}
                   
                            showTime={{
                                defaultValue: moment(formData['Campaign-date'].split('T')[1],'HH:mm'),
                                format: 'HH:mm'
                                
                            }}
                            format={'YYYY-MM-DD HH:mm'}
                            style={{ width: '100%' }}
                            onChange={handleDateChange}
                        />

######################### 這是我的handleDateChange function ################## #######

const handleDateChange = date => {
    setFormdata({
        ...formData,
        'Campaign-date': date
            .format('YYYY-MM-DD HH:mm')
            .split(' ')
            .join('T')
    });
};

formData['Campaign-date']是從數據庫中檢索到的日期。 我覺得showTime屬性沒有按預期工作。 我想得到“05:02”的結果，但顯示的值是“00:00”。

我嘗試了 showTime 的不同變化，例如，

defaultValue: moment('05:02','HH:mm'),
//or
defaultValue: moment(formData['Campaign-date'],'HH:mm')
//or
defaultValue: moment(formData['Campaign-date'].split('T')[1].split('.),'HH:mm')

但沒有任何工作。 它始終將值設置為“00:00”。 我的 onChange 功能沒有問題。 它工作完美。 日期/時間更改代碼按預期工作。 只是我頁面上的視圖沒有顯示正確的時間。

我真的很堅持。 因此，非常感謝任何幫助。

Answer 1

<DatePicker
      name="Campaign-date"
      defaultValue={moment(formData['Campaign-date'].split('T')[0])}
               
      showTime={{
              defaultValue: moment(formData['Campaign-date'].split('T')[1].split('.')[0],'HH:mm:ss'),
              format: 'HH:mm:ss'
                            
                        }}
      format={'YYYY-MM-DD HH:mm'}
      style={{ width: '100%' }}
      onChange={handleDateChange}
      />

Answer 2

Ant 設計日期選擇器：

（ 沙箱）

import React from "react";
import ReactDOM from "react-dom";
import { DatePicker, Space } from "antd";
import moment from "moment";

import "./index.css";
import "antd/dist/antd.css";

const initialState = {
  data1: "form field",
  data2: "form field 2",
  "Campaign-date": "2020-09-01T05:02:00.000+0000"
};

function FormComponent() {
  const [formData, setFormData] = React.useState(initialState);

  console.log(formData);

  function onChange(value, dateString) {
    if (value) {
      setFormData({
        ...formData,
        "Campaign-date": value.toISOString(true)
      });
    }
    //console.log("Selected Time: ", value); //Moment object
    //console.log("Formatted Selected Time: ", dateString); //String
  }

  return (
    <Space direction="vertical" size={12}>
      <DatePicker
        name="Campaign-date"
        defaultValue={moment(formData["Campaign-date"], "YYYY/MM/DD HH:mm")}
        format={"YYYY/MM/DD HH:mm"}
        showTime={{ format: "HH:mm" }}
        onChange={onChange}
      />
      <div style={{ marginTop: 16 }}>
        Selected Date:{" "}
        {formData["Campaign-date"]
          ? moment(formData["Campaign-date"]).format("YYYY-MM-YY HH:mm")
          : "None"}
      </div>
    </Space>
  );
}

ReactDOM.render(<FormComponent />, document.getElementById("container"));

如果您使用 react-datepicker 2.0 或更高版本，則需要使用 javascript 日期 object。 這是一個工作設置。

  function parseISOString(s) {
    var b = s.split(/\D+/);
    return new Date(Date.UTC(b[0], --b[1], b[2], b[3], b[4], b[5], b[6]));
  }

  const isoString = '2020-09-01T05:02:00.000+0000';
  const dateFromISOString = parseISOString(isoString);
  
  <DatePicker
    selected={dateFromISOString}
    dateFormat="dd/MM/yyyy HH:mm"
    showTimeSelect
    timeFormat="HH:mm"
    timeIntervals={15}
    placeholderText="Select date"
    onChange={handleChange}
  />

---

概述

您從數據庫接收的字符串是 ISO 日期字符串。

您可以使用 moment.js 輕松解析它或手動解析它並從中創建一個新的 Date object。 這是說明兩者的片段。 日期示例使用此答案： Change ISO Date String to Date Object - JavaScript

 const isoString = "2020-09-01T05:02:00.000+0000" // with Moment console.log("With Moment"); const timeFromMoment = moment(isoString).format("HH:mm"); console.log(timeFromMoment); // with Date console.log("With Date"); // https://stackoverflow.com/questions/27012854/change-iso-date-string-to-date-object-javascript function parseISOString(s) { var b = s.split(/\D+/); return new Date(Date.UTC(b[0], --b[1], b[2], b[3], b[4], b[5], b[6])); } const dateFromISOString = parseISOString(isoString); console.log(dateFromISOString); // return Local adusted time const localHours = dateFromISOString.getHours(); console.log(localHours); // return UTC time const utcHours = dateFromISOString.getUTCHours(); console.log(utcHours);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.27.0/moment.min.js"></script>