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

j0j032 / basic-datepicker-react Goto Github PK