Calendar, interval time picker and popup components for React supports multi-languages

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