Create Next App

BASuite

BAButton BAInput BABox BACheckbox BACollapse BADate BAFormElement

BADate

A date picker component with support for min/max date validation, multiple picker modes, and optional time selection.

Select Date

With Time

Month Picker

Example:

 
import { BADate } from "basuite"; 

<> 
    <BADate label="Select Date" onChange={(date) => console.log(date)} /> 
    <BADate label="With Time" showTime onChange={(date) => console.log(date)} /> 
    <BADate label="Month Picker" picker="month" /> 
    <BADate label="With Min/Max Date" minDate={new Date(2024, 0, 1)} maxDate={new Date(2024, 11, 31)} /> 
</>

Props:

Name	Type	Description	Default
label	string	Label displayed above the date picker.
disabled	boolean	Disables the date picker when true.	false
required	boolean	Marks the date field as required.	false
onChange	(date: Date \| null, dateString: string) => void	Callback triggered when the selected date changes.
value	Date	Controlled value for the date picker.
minDate	Date	Minimum selectable date.
maxDate	Date	Maximum selectable date.
validate	boolean	Optional validation flag for custom logic.
picker	"week" \| "month" \| "quarter" \| "year"	Determines the type of date picker.
showTime	boolean	Enables time selection along with date.	false