basic-datepicker-react
v0.2.1
Published
A simple and basic reusable datepicker component using react
Downloads
21
Readme
Basic Datepicker React
A simple and basic reusable datepicker component built in typescript using react and compatible with
No other third party libraries just only standard built-in Date objects
Installation
npm i basic-datepicker-react
yarn add basic-datepicker-react
pnpm add basic-datepicker-react
Example (classic)
import {Datepicker} from 'basic-datepicker-react'
import {useState} from 'react'
const Example = () => {
const [inputValue, setInputValue] = useState('')
const [open, setOpen] = useState(false)
const submit = e => {
e.preventDefault()
// your logic
console.log(inputValue)
}
return (
<form className='test' onSubmit={submit}>
<label htmlFor='birthdate'>Birthdate</label>
<input name='birthdate' type='text' onClick={() => setOpen(!open)} defaultValue={inputValue}/>
{open
? <Datepicker locale='en'
hide={() => setOpen(false)}
setInputValue={setInputValue}
disableFuture={true}
theme='dark'
currentSelectedValue={inputValue}/>
: null
}
<input type='submit' value='Submit'/>
</form>
)
}
export default Example
Example (with React-hook-form)
import {Datepicker} from 'basic-datepicker-react'
import {useState} from 'react'
import {useForm} from "react-hook-form";
const Example = () => {
const [isShown, setIsShown] = useState(false)
const {register, handleSubmit, setValue, getValues} = useForm()
//IMPORTANT the following function is mandatory to get input value from datePicker.
// You can copy/paste safely (we'll provide it in package later)
const getInputValue = (value, name) => {
setValue(name, value)
}
const submit = (data) => console.log(data)
return (
<form onSubmit={handleSubmit(submit)}>
<label htmlFor='birthdate'>Birthdate</label>
<input onClick={() => setIsShown(true)} type='text' {...register('birthdate')}/>
{isShown
? <Datepicker RHFinputName='birthdate'
hide={() => setIsShown(false)}
disableFuture={true}
setInputValue={getInputValue}
currentSelectedValue={getValues('birthdate')}/>
: null
}
<input type='submit' value='Submit'/>
</form>
)
}
export default Example
props:
RHFinputName
the string you use to target your input with RHF (only if you work with react-hook-form) | Optional
setInputValue
your setter fn to get input value (state setter without RHF or the getInputValue function with RHF)
| Required
hide
your state setter | Required
locale
a string to set the format of the date in therm of your region | Optional
disableFuture
boolean to disable all days after today | Optional
theme
a string: 'light' by default or 'dark' | Optional
currentSelectedValue
your state to tell the datepicker if you reopen the day you've already selected | Optional