Я работаю с React реагировать на виджет.Я хотел ограничить время с 7:00 до 18:00.Есть ли способ добиться этого? - PullRequest
Новая
       20

Я работаю с React реагировать на виджет.Я хотел ограничить время с 7:00 до 18:00.Есть ли способ добиться этого?

0 голосов
/ 24 сентября 2019

Я работаю с React реагировать-виджет.Я хотел ограничить время с 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))} />

Ответы [ 2 ]

1 голос
/ 24 сентября 2019

Вы можете использовать свойства min и max для установки своих пределов.

API DateTimePicker сообщает вам, как его использовать.

мин :

тип: Дата по умолчанию: новая Дата (1900, 0, 1)

Минимальная дата, которую можно выбрать.Минимум ограничивает только выбор, он не ограничивает значения даты, которые можно вводить или вставлять в виджет.Если вам нужно это поведение, вы можете ограничить значения с помощью обработчика onChange.

Пример: 

let { DateTimePicker } = ReactWidgets;

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

render(widget);

max :

тип: Дата по умолчанию: новая Дата (2099, 11, 31)

Максимальная дата, которую можно выбрать.Макс ограничивает только выбор, он не ограничивает значения даты, которые можно ввести или вставить в виджет.Если вам нужно такое поведение, вы можете ограничить значения с помощью обработчика onChange.

let {DateTimePicker} = ReactWidgets; 

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

render(widget);
0 голосов
/ 24 сентября 2019

Вы можете сделать это следующим образом: 

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.

...