DatePicker

<bh-datepicker> | BharatDatePicker

The DatePicker component provides an intuitive way to select dates with a calendar interface. It supports various customization options including different sizes, styles, and date formats.

Open in

Basic Usage

Preview

Open in

HTML

<bh-datepicker
  placeholder="Select date"
  size="medium"
  label="Event Date"
  hint="Choose a date for your event"
  format="yyyy-mm-dd"
  minDate="2025-04-01"
  maxDate="2025-12-31">
</bh-datepicker>

React

import React from 'react';
import { BharatDatepicker } from 'bharat-ui/react/components/datepicker';
function App() {
return (

   <BharatDatepicker
    placeholder="Select date"
    size="medium"
    label="Event Date"
    hint="Choose a date for your event">
  </BharatDatepicker>

);
}
export default App;

Variants

The DatePicker component supports different visual styles to match your application’s design.

Default

Preview

Open in

HTML

<bh-datepicker placeholder="Default DatePicker" size="medium"></bh-datepicker>

React

import React from 'react';
import { BharatDatepicker } from 'bharat-ui/react/components/datepicker';
function App() {
return (

   <BharatDatepicker
     placeholder="Default DatePicker" size="medium">
  </BharatDatepicker>

);
}
export default App;

Pill

Preview

Open in

HTML

<bh-datepicker placeholder="Pill DatePicker" size="medium" pill></bh-datepicker>

React

import React from 'react';
import { BharatDatepicker } from 'bharat-ui/react/components/datepicker';
function App() {
return (

   <BharatDatepicker
    placeholder="Pill DatePicker" size="medium" pill >
  </BharatDatepicker>

);
}
export default App;

Sizes

The DatePicker component comes in three different sizes.

Preview

Open in

HTML

<bh-datepicker placeholder="Small DatePicker" size="small"></bh-datepicker>
<bh-datepicker placeholder="Medium DatePicker" size="medium"></bh-datepicker>
<bh-datepicker placeholder="Large DatePicker" size="large"></bh-datepicker>

React

import React from 'react';
import { BharatDatepicker } from 'bharat-ui/react/components/datepicker';
function App() {
return (
  <>
   <BharatDatepicker
     placeholder="Small DatePicker" size="small">
  </BharatDatepicker>
   <BharatDatepicker
     placeholder="Medium DatePicker" size="medium">
  </BharatDatepicker>
   <BharatDatepicker
     placeholder="Large DatePicker" size="large">
  </BharatDatepicker>
  </>

);
}
export default App;

Labels and Hints

You can add labels and hints to provide additional context for the DatePicker.

Preview

Open in

HTML

<bh-datepicker
  placeholder="Select Birthdate"
  size="medium"
  label="Date of Birth"
  labelPosition="top"
  labelSize="18px"
  labelColor="#454545">
</bh-datepicker>

<bh-datepicker
  placeholder="Select Event Date"
  size="medium"
  label="Event Date"
  labelPosition="left"
  labelSize="18px"
  labelColor="#454545"
  hint="Please select a future date for your event">
</bh-datepicker>

React

import React from 'react';
import { BharatDatepicker } from 'bharat-ui/react/components/datepicker';
function App() {
return (
  <>
   <BharatDatepicker
     placeholder="Select Birthdate"
    size="medium"
    label="Date of Birth"
    labelPosition="top"
    labelSize="18px"
    labelColor="#454545">
  </BharatDatepicker>
   <BharatDatepicker
      placeholder="Select Event Date"
    size="medium"
    label="Event Date"
    labelPosition="left"
    labelSize="18px"
    labelColor="#454545"
    hint="Please select a future date for your event">
  </BharatDatepicker>
  </>

);
}
export default App;

Date Constraints

You can set minimum and maximum dates to restrict the date selection range.

Preview

Open in

HTML

<bh-datepicker
  placeholder="Select Date (Min Today)"
  size="medium"
  minDate="2025-04-09"
  hint="Only future dates are allowed">
</bh-datepicker>

<bh-datepicker
  placeholder="Select Date (Max Today)"
  size="medium"
  maxDate="2025-04-09"
  hint="Only past dates are allowed">
</bh-datepicker>

React

import React from 'react';
import { BharatDatepicker } from 'bharat-ui/react/components/datepicker';
function App() {
return (
  <>
   <BharatDatepicker
      placeholder="Select Date (Min Today)"
      size="medium"
      minDate="2025-04-09"
      hint="Only future dates are allowed">
  </BharatDatepicker>
   <BharatDatepicker
       placeholder="Select Date (Max Today)"
      size="medium"
      maxDate="2025-04-09"
      hint="Only past dates are allowed">
  </BharatDatepicker>
  </>

);
}
export default App;

Custom Date Formats

You can customize the date format according to your requirements.

Preview

Open in

HTML

<bh-datepicker
  placeholder="DD/MM/YYYY"
  size="medium"
  format="dd/mm/yyyy">
</bh-datepicker>

<bh-datepicker
  placeholder="MM-DD-YYYY"
  size="medium"
  format="mm-dd-yyyy">
</bh-datepicker>

React

import React from 'react';
import { BharatDatepicker } from 'bharat-ui/react/components/datepicker';
function App() {
return (
  <>
   <BharatDatepicker
      placeholder="DD/MM/YYYY"
      size="medium"
      format="dd/mm/yyyy">
  </BharatDatepicker>
   <BharatDatepicker
       placeholder="MM-DD-YYYY"
      size="medium"
      format="mm-dd-yyyy">
  </BharatDatepicker>
  </>

);
}
export default App;

Properties

Property	Type	Description
currentMonth	number	Current month displayed in the calendar (0-11)
currentYear	number	Current year displayed in the calendar
format	string	Format for displaying the selected date (supported: yyyy-mm-dd, dd/mm/yyyy, mm-dd-yyyy)
hint	string	Hint text displayed below the datepicker
label	string	Label text for the datepicker
labelColor	string	Color of the label text
labelPosition	string	Position of the label (top, left)
labelSize	string	Font size of the label
maxDate	string	Maximum selectable date in yyyy-mm-dd format
minDate	string	Minimum selectable date in yyyy-mm-dd format
outline	boolean	Whether to display the datepicker with an outline style
pill	boolean	Whether to display the datepicker with rounded corners
placeholder	string	Placeholder text when no date is selected
selectedDate	Object	JavaScript Date object for the currently selected date
showCalendar	boolean	Whether the calendar dropdown is visible
size	string	Size of the datepicker (small, medium, large)
value	string	The selected date value in the specified format
variant	string	Visual style variant (default, gradient, tricolor)