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