Reactjs 我正在使用React控件。我想把时间限制在早上7点到晚上18点之间。有没有办法做到这一点？

我正在使用React控件。我想把时间限制在早上7点到晚上18点之间。有没有办法做到这一点

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

{
var temp=utc时刻（val）；
onChangeDateTimePicker（temp.toISOString（））；
}}
格式={（日期时间显示格式）}time={true}min={新日期（新日期（）.setHours（0,0,0,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
);

从“React”导入React；
从“react dom”导入react dom；
从“时刻”中导入时刻；
从“react widgets moment”导入momentLocalizer；
从“react widgets/lib/DateTimePicker”导入DateTimePicker；
//添加css样式。。。
导入“react widgets/dist/css/react widgets.css”；
地点（“en”）；
动量定位器（）；
const today=时刻（）；
const rootElement=document.getElementById（“根”）；
ReactDOM.render(
,
根元素
);

你可以看看这个例子

这仅限制特定日期的

min

和

max

。这不像在所有日期限制时间那样有效

---

我认为使用

DateTimePicker

这是不可能的，您可以使用min和max属性来设置限制

它告诉你如何使用它

：

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

可以选择的最小日期。Min仅限制选择，它 不约束可以键入或粘贴到中的日期值 小装置。如果需要此行为，可以通过 onChange处理程序

例如：

let { DateTimePicker } = ReactWidgets;

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

render(widget);

let{DateTimePicker}=ReactWidgets；
让小部件=（）
渲染（小部件）；

：

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

可以选择的最长日期。最大值仅限制选择，它 不约束可以键入或粘贴到中的日期值 小装置。如果需要此行为，可以通过 onChange处理程序

让{DateTimePicker}=ReactWidgets

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

render(widget);

let小部件=(
)
渲染（小部件）；

以下是我的解决方法-如果时间超出范围，则清空时间列表选项，并按css样式隐藏空选项

css

组成部分：

    <DateTimePicker
      {...tail}
      timeComponent={({ value, text }) => {
        return value.getHours() >= 7 && value.getHours() <= 18 ? text : '';
      }}
    />

{
返回值.getHours（）>=7&&value.getHours（）

您使用的是哪个

DateTimePicker

库？您可以使用

min

和

max

道具。让我添加一个例子。您能更清楚地解释一下您将使用什么吗？限制是什么？您能更清楚地描述图片中描述的示例吗？请抑制指向其他网站的图片，并放置t他对问题作了详尽的描述。

    <DateTimePicker
      {...tail}
      timeComponent={({ value, text }) => {
        return value.getHours() >= 7 && value.getHours() <= 18 ? text : '';
      }}
    />