Component Library
Browse and explore components
Datepicker
A Datepicker is a UI component that allows users to select a date from a calendar interface.
Default Datepicker
Component Code
Copy Code
import { IconCalendarMonth } from '@tabler/icons-react'
import { Datepicker } from 'flowbite-react'
const DefaultDatepCode = () => {
return (
<>
<div className='max-w-sm'>
<Datepicker
className='!form-control'
icon={() => <IconCalendarMonth size={20} />}
/>
</div>
</>
)
}
export default DefaultDatepCode
Localization
Component Code
Copy Code
import { IconCalendarMonth } from '@tabler/icons-react'
import { Datepicker } from 'flowbite-react'
const LocalizationDatepCode = () => {
return (
<>
<div className='max-w-sm'>
<Datepicker
language='pt-BR'
labelTodayButton='Hoje'
labelClearButton='Limpar'
className='!form-control'
icon={() => <IconCalendarMonth size={20} />}
/>
</div>
</>
)
}
export default LocalizationDatepCode
Limit The Date
Component Code
Copy Code
import { IconCalendarMonth } from '@tabler/icons-react'
import { Datepicker } from 'flowbite-react'
const LimitDatepCode = () => {
return (
<>
<div className='max-w-sm'>
<Datepicker
minDate={new Date(2023, 0, 1)}
maxDate={new Date(2023, 3, 30)}
className='!form-control'
icon={() => <IconCalendarMonth size={20} />}
/>
</div>
</>
)
}
export default LimitDatepCode
Week Start
Component Code
Copy Code
import { IconCalendarMonth } from '@tabler/icons-react'
import { Datepicker } from 'flowbite-react'
const WeekStartCode = () => {
return (
<>
<div className='max-w-sm'>
<Datepicker
weekStart={1} // Monday
className='!form-control'
icon={() => <IconCalendarMonth size={20} />}
/>
</div>
</>
)
}
export default WeekStartCode
Autohide
Component Code
Copy Code
import { IconCalendarMonth } from '@tabler/icons-react'
import { Datepicker } from 'flowbite-react'
const AutoHideCode = () => {
return (
<>
<div className='max-w-sm'>
<Datepicker
autoHide={false}
className='!form-control'
icon={() => <IconCalendarMonth size={20} />}
/>
</div>
</>
)
}
export default AutoHideCode
With Title
Component Code
Copy Code
import { IconCalendarMonth } from '@tabler/icons-react'
import { Datepicker } from 'flowbite-react'
const TitleDatePickerCode = () => {
return (
<>
<div className='max-w-sm'>
<Datepicker
title='DatePicker Title'
className='!form-control'
icon={() => <IconCalendarMonth size={20} />}
/>
</div>
</>
)
}
export default TitleDatePickerCode
API ( Datepicker )
| Prop | Description | Type | Default |
|---|---|---|---|
language | Sets the language of the datepicker. | 'pt-BR' | - |
labelTodayButton | Label for the "Today" button. | 'Hoje' | - |
labelClearButton | Label for the "Clear" button. | 'Limpar' | - |
minDate | The minimum selectable date. | Date(2023, 0, 1) | - |
maxDate | The maximum selectable date. | Date(2023, 3, 30) | - |
weekStart | Sets the first day of the week. | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 0 |
autoHide | Automatically hides the datepicker after selecting a date. | boolean | true |
title | Sets the title of the datepicker. | 'Flowbite Datepicker' | - |