A customizable, performant, multilingual date & time picker popup component for React.
How to use it:
1. Install and import the component.
# Yarn $ yarn add react-date-time-picker-popup # NPM $ npm i react-date-time-picker-popup
import React, { useState } from 'react'
import { Popup, DatePicker } from 'react-date-time-picker-popup'
import 'react-date-time-picker-popup/dist/index.css'
2. Enable a button to toggle a date time picker popup.
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
3. Available props for the datepicker component.
lang = 'en', selectedDay, setSelectedDay, timeSelector = true, minuteInterval = 5, BGColor = 'rgb(44, 76, 104)', disabledHours = [], disabledMinutes = [],
4. Available props for the popup component.
visible setVisible BGColor = 'rgb(44, 76, 104)' children
5. Available props for the time picker.
year, month, day, setDay, selectedMinute, setSelectedMinute, selectedHour, setSelectedHour, minuteInterval = 5, disabledHours = [], disabledMinutes = [], BGColor = 'rgb(44, 76, 104)',
Preview:
Download Details:
Author: kursatsmsek
Live Demo: View The Demo
Download Link: Download The Source Code
Official Website: https://github.com/kursatsmsek/react-date-time-picker-popup
License: MIT
