react-datetime + open 和 disableOnClickOutside 道具不能一起工作
react-datetime + open and disableOnClickOutside prop don't work together
我的代码无法关闭日期选择器。我正在使用这个 npm package
/* eslint linebreak-style: ["error", "windows"] */
/* eslint-disable no-unused-vars */
import React, { Component } from 'react';
import Datetime from 'react-datetime';
const toDay = new Date();
const month = toDay.getMonth();
let date = toDay.getDate();
let hours = toDay.getHours() % 12;
const amPm = toDay.getHours() >= 12 ? 'PM' : 'AM';
hours = hours > 0 ? hours : 12;
console.log(hours);
console.log(toDay.getHours());
let minutes = toDay.getMinutes();
const obj = { readOnly: true };
if (hours < 10) {
hours = `0${hours}`;
}
if ((minutes % 5) > 0) {
minutes += (5 - (minutes % 5));
}
if (minutes > 55) {
minutes = 0;
hours += 1;
if (hours > 12) {
hours = 12;
date += 1;
}
}
if (minutes < 10) {
minutes = `0${minutes}`;
}
const timeobj = {
minutes: {
step: 5,
},
};
const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec',
];
const yesterday = Datetime.moment().subtract(1, 'day');
const maxDays = Datetime.moment().add(6, 'month');
const valid = current => current.isAfter(yesterday) && current.isBefore(maxDays);
export default class DatePicker extends Component {
constructor() {
super();
this.state = {
// open: true,
};
}
render() {
return (
<Datetime
timeConstraints={timeobj}
isValidDate={valid}
defaultValue={`${monthNames[month]} ${date} at ${hours}:${minutes} ${amPm}`}
dateFormat="MMM DD [at]"
inputProps={obj}
open
closeOnSelect
disableOnClickOutside={false}
/>
);
}
}
使用,此代码日期选择器默认打开,当我 select 然后日期选择器将关闭。但我的问题是当我点击外面时日期选择器没有关闭所以当我点击外面时我应该如何关闭这个日期选择器。
从 <Datetime />
中删除 open
然后它会工作。
阅读有关 open
https://github.com/YouCanBookMe/react-datetime
的文档
我的代码无法关闭日期选择器。我正在使用这个 npm package
/* eslint linebreak-style: ["error", "windows"] */
/* eslint-disable no-unused-vars */
import React, { Component } from 'react';
import Datetime from 'react-datetime';
const toDay = new Date();
const month = toDay.getMonth();
let date = toDay.getDate();
let hours = toDay.getHours() % 12;
const amPm = toDay.getHours() >= 12 ? 'PM' : 'AM';
hours = hours > 0 ? hours : 12;
console.log(hours);
console.log(toDay.getHours());
let minutes = toDay.getMinutes();
const obj = { readOnly: true };
if (hours < 10) {
hours = `0${hours}`;
}
if ((minutes % 5) > 0) {
minutes += (5 - (minutes % 5));
}
if (minutes > 55) {
minutes = 0;
hours += 1;
if (hours > 12) {
hours = 12;
date += 1;
}
}
if (minutes < 10) {
minutes = `0${minutes}`;
}
const timeobj = {
minutes: {
step: 5,
},
};
const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec',
];
const yesterday = Datetime.moment().subtract(1, 'day');
const maxDays = Datetime.moment().add(6, 'month');
const valid = current => current.isAfter(yesterday) && current.isBefore(maxDays);
export default class DatePicker extends Component {
constructor() {
super();
this.state = {
// open: true,
};
}
render() {
return (
<Datetime
timeConstraints={timeobj}
isValidDate={valid}
defaultValue={`${monthNames[month]} ${date} at ${hours}:${minutes} ${amPm}`}
dateFormat="MMM DD [at]"
inputProps={obj}
open
closeOnSelect
disableOnClickOutside={false}
/>
);
}
}
使用,此代码日期选择器默认打开,当我 select 然后日期选择器将关闭。但我的问题是当我点击外面时日期选择器没有关闭所以当我点击外面时我应该如何关闭这个日期选择器。
从 <Datetime />
中删除 open
然后它会工作。
阅读有关 open
https://github.com/YouCanBookMe/react-datetime