custom-react-dp
v0.0.8
Published
```typescript import React, { useEffect, useRef } from 'react' import DatePicker, { DatePickerValue } from 'custom-react-dp' import { useDatePicker } from 'custom-react-dp' import useOnClickOutside from 'hooks/useOnClickOutside' import Input from './
Downloads
3
Maintainers
Readme
Custom React Date Picker With Hooks
One line of code worths thousands lines of explanations.
import React, { useEffect, useRef } from 'react'
import DatePicker, { DatePickerValue } from 'custom-react-dp'
import { useDatePicker } from 'custom-react-dp'
import useOnClickOutside from 'hooks/useOnClickOutside'
import Input from './Input'
import styles from './styles.module.scss'
const Container: React.FC<any> = () => {
const containerRef = useRef(null)
const datePickerData = useDatePicker({
fromTimeLabel: 'Check-in',
timeLabel: 'Time',
toTimeLabel: 'Check-out',
timeType: 12
})
const {
action: {
hideDatePicker,
} } = datePickerData
useOnClickOutside(containerRef, () => {
hideDatePicker()
})
const onChange = (value: DatePickerValue) => {
console.log('on change value', value)
}
return <div className={styles.container} ref={containerRef}>
<Input data={datePickerData} />
<DatePicker
data={datePickerData}
pickTimeRange={true}
/>
</div>
}
export default Container
import React from 'react'
import styles from './styles.module.scss'
import { DatePickerType } from 'custom-react-dp'
interface Props {
data: DatePickerType
}
const Input: React.FC<Props> = ({
data
}) => {
const {
state: {
valueString
},
action: {
showDatePicker
} } = data
const onFocus = () => {
showDatePicker()
}
const onChange = () => {
}
return <div className={styles.container}>
<input onChange={onChange} value={valueString} type="text" onFocus={onFocus} />
</div>
}
export default Input