react-datetime + öffnen und disableOnClickOutside prop nicht zusammenarbeiten

Question

Ich habe ein Problem für den Abschluss der Datumsauswahl hier mein Code. Ich bin mit diesem 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} 
 
     /> 
 
    ); 
 
    } 
 
}

Mit diesen Code Datumsauswahl standardmäßig geöffnet, wenn ich wählen Sie dann die Datumsauswahl nahe sein. aber mein Problem ist, wenn ich draußen klicke, dann date picker nicht schließen, also wie soll ich diesen date picker schließen, wenn ich draußen klicke.

Answer 1

entfernen Sie die open von <Datetime /> dann wird es funktionieren. lesen Sie die Dokumentation über open