首页 > 解决方案 > 反应js中的范围派克

问题描述

我有一个应用程序,我使用来自 ant design 的 range piker。OK该应用程序具有默认值,当我在设置时间后单击时应该获得新值。当我单击时出现问题OK,因为我得到一个如下所示的数组: 在此处输入图像描述

但我应该只得到一个数组,比如: onOk: ["2015-01-05T23:00:00.000Z", "2017-12-31T22:00:00.000Z"] 两个选定的日期。如何解决这个问题?

function onChange(value, dateString) {
  console.log('Selected Time: ', value);
  console.log('Formatted Selected Time: ', dateString);
}

function onOk(value) {
  console.log('onOk: ', value);
}

ReactDOM.render(
  <div>
    <br />
 <RangePicker
        showTime={{ format: 'HH:mm' }}
        format="DD-MM-YYYY HH:mm"
        onChange={onChange}
        onOk={onOk}
        defaultValue={[moment('2015-01-01', 'YYYY-MM-DD'),moment('2018-01-01', 'YYYY-MM-DD')]}
      />
  </div>,
  document.getElementById('container'),

标签: reactjs

解决方案


要以您指定的格式获取日期,我们必须使用 ISO_8601 格式。只需更改 RangePicker 的格式属性以匹配 ISO_8601 格式。

 <RangePicker
      showTime={{ format: "HH:mm" }}
      defaultValue={[
        moment("2015/01/01", dateFormat),
        moment("2015/01/01", dateFormat)
      ]}
      onOk={onOk}
      format={moment().format("YYYY-MM-DDTHH:mm:ss.SSSZ")}
    />

这是工作演示的链接 - https://stackblitz.com/edit/react-bxs6wc?file=index.js


推荐阅读