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

问题描述

我在基于React Hook的开发中使用了蚂蚁设计。我正在通过网络调用从数据库中检索日期，并且从数据库中检索的日期看起来像是“ 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',//or
defaultValue: moment(formData['Campaign-date'],'HH:mm')
//or
defaultValue: moment(formData['Campaign-date'].split('T')[1].split('.),'HH:mm')

，但是没有任何效果。始终将值设置为“ 00:00”。 而且我的onChange功能没有问题。它工作完美。日期/时间更改代码明智地按预期工作。只是我页面上的视图显示的时间不正确。

我真的很坚持。因此，非常感谢您的帮助。

解决方法

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

,

蚂蚁设计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对象。 这是一个片段，说明了两者。日期示例使用以下答案：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[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>