antd datePicker中showTime属性的defaultValue无法设置时间

Question

我正在使用 ant design 进行基于反应钩子的开发。我正在通过网络调用从数据库中检索日期，从数据库中检索到的日期看起来像“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 函数 ###########################

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

Ant Design DatePicker：

(sandbox)

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 Date 对象。这是一个工作设置。

  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 对象。 这是一个说明两者的 sn-p。日期示例使用此答案：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>

Answer 2

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