Multilingual Date Time Picker Popup For React

Description:

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)',