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