0

我正在使用 React react-widget。我想限制早上 7:00 到晚上 18:00 之间的时间。有没有办法做到这一点？

  <DateTimePicker 
            onChange={(val) => {    
                    var temp = moment.utc(val);
                    onChangeDateTimePicker(temp.toISOString());                          
            }}
            format={(DATETIME_DISPLAY_FORMAT)} time={true} min={new Date(new Date().setHours(0,0,0,0))} />
4

3 回答 3

0

您可以通过以下方式执行此操作：

import React from "react";
import ReactDOM from "react-dom";
import Moment from "moment";
import momentLocalizer from "react-widgets-moment";
import DateTimePicker from "react-widgets/lib/DateTimePicker";
// Add the css styles...
import "react-widgets/dist/css/react-widgets.css";

Moment.locale("en");
momentLocalizer();

const today = Moment();

const rootElement = document.getElementById("root");
ReactDOM.render(
  <DateTimePicker
    time
    date
    min={today.set({ hour: 7, minute: 0, second: 0, millisecond: 0 }).toDate()}
    max={today.set({ hour: 18, minute: 0, second: 0, millisecond: 0 }).toDate()}
  />,
  rootElement
);

您可以查看示例https://codesandbox.io/s/stoic-surf-ydu2y。

这只是限制min特定max日期。这不像限制time所有日期那样起作用。

我认为这是不可能的react-widgets DateTimePicker。

于 2019-09-24T06:41:15.320 回答
0

您可以使用min和max属性来设置您的限制。

DateTimePicker API告诉您如何使用它。

分钟：

类型：日期默认值：新日期（1900, 0, 1）

可以选择的最小日期。Min 仅限制选择，它不限制可以键入或粘贴到小部件中的日期值。如果您需要这种行为，您可以通过 onChange 处理程序限制值。

例子：

let { DateTimePicker } = ReactWidgets;

let widget = (   <DateTimePicker 
    min={new Date()}   /> )

render(widget);

最大值：

类型：日期默认值：新日期（2099、11、31）

可以选择的最大日期。Max 仅限制选择，它不限制可以键入或粘贴到小部件中的日期值。如果您需要这种行为，您可以通过 onChange 处理程序限制值。

让 { DateTimePicker } = ReactWidgets;

let widget = (
  <DateTimePicker 
    max={new Date()}
  />
)

render(widget);
于 2019-09-24T06:50:58.850 回答
0

这是我的解决方法 - 如果时间超出范围，则清空 timeList 选项并通过 css 样式隐藏空选项。

css

  .rw-list-option:empty {
    display: none;
  }

零件：

    <DateTimePicker
      {...tail}
      timeComponent={({ value, text }) => {
        return value.getHours() >= 7 && value.getHours() <= 18 ? text : '';
      }}
    />
于 2021-04-14T07:56:31.083 回答