react-datetime +打開並disableOnClickOutside道具不能一起工作

我有關閉日期選擇器在這裏我的代碼問題。我用這npm package react-datetime +打開並disableOnClickOutside道具不能一起工作

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

使用，該代碼日期選擇器默認打開的，當我再選擇日期選擇器將接近。但我的問題是，當我點擊外面，然後日期選擇器不關閉，所以當我點擊外部時，我應該如何關閉這個日期選擇器。

來源

2017-07-10 Ravi Shah

不確定，但我認爲的原因是，你定義了開放屬性'true'這就是爲什麼，刪除打開的屬性，並讓日期時間處理該部分。 –

我會嘗試相同的，但沒有工作 –

的open從<Datetime /> 刪除，然後它會工作。閱讀文檔約openhttps://github.com/YouCanBookMe/react-datetime

來源

2017-07-10 11:54:57

請檢查。在這裏我添加我的完整組件。 –

嗨。我從刪除打開，然後，當我點擊第一次在該日期選擇器文本框時間日期選擇器將打開，但是當我第二次同時點擊，然後日期選擇器關閉現在，當我點擊外部，然後日期選擇器第二次打開。 –

我不能複製你的錯誤 https://codepen.io/_rishabh/pen/jwQVqg?editors=0011 –

react-datetime +打開並disableOnClickOutside道具不能一起工作

回答

相關問題