custom-react-dp
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.8 • Public • Published

    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

    Install

    npm i custom-react-dp

    DownloadsWeekly Downloads

    17

    Version

    0.0.8

    License

    MIT

    Unpacked Size

    141 kB

    Total Files

    10

    Last publish

    Collaborators

    • tranhducvnn