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
GitHub
View Github