react-date-time-picker-popup
Calendar, interval time picker and popup components for React supports multi-languages
Install
yarn add react-date-time-picker-popup
Usage
import React, { useState } from 'react'
import { Popup, DatePicker } from 'react-date-time-picker-popup'
import 'react-date-time-picker-popup/dist/index.css'
const App = () => {
const [visible, setVisible] = useState(false);
const [day, setDay] = useState(new Date());
return <div className='App'>
<button onClick={() => setVisible(true)}>Show Popup</button>
<Popup visible={visible} setVisible={setVisible}>
<DatePicker lang="tr" selectedDay={day} setSelectedDay={setDay} timeSelector={true} />
</Popup>
</div>
}
export default App
DatePicker
props | type | default | required |
---|---|---|---|
lang | string | ‘en’ | false |
selectedDay | Date | true | |
setSelectedDay | func | true | |
timeSelector | boolean | true | false |
minuteInterval | number | 5 | false |
BGColor | string | rgb(44, 76, 104) | false |
disabledHours | array | false | |
disabledMinutes | array | false |
Popup
props | type | default | required |
---|---|---|---|
visible | boolean | true | |
setVisible | func | true | |
BGColor | string | rgb(44, 76, 104) | false |
children | React.ReactNode | false |
Time
props | type | default | required |
---|---|---|---|
year | number | true | |
month | number | true | |
day | Date | true | |
setDay | func | true | |
selectedMinute | string | true | |
setSelectedMinute | func | true | |
selectedHour | string | true | |
setSelectedHour | func | true | |
minuteInterval | number | 5 | false |
disabledHours | array | false | |
disabledMinutes | array | false | |
BGColor | string | rgb(44, 76, 104) | false |
License
MIT © kursatsmsek