DatePicker

A date picker component for selecting dates and date ranges.

Demo

React

Vue

Example

React

import { useState } from 'react';
// Import component
import { DatePicker } from '@fintech-sandpit/ui/react';
// Import styles (optional). Please note that you need to import the styles
// for DatePicker and ReadOnlyInput components since the DatePicker component
// is composed of these components.
import '@fintech-sandpit/ui/style/components/date_picker.css';
import '@fintech-sandpit/ui/style/components/readonly_input.css';

const [value, setValue] = useState<Date[]>([
  new Date('2026-01-15'),
]);

return (
  <DatePicker
    value={value}
    mode="single"
    label="Select date"
    placeholder="No date selected yet"
    onChange={setValue}
  />
);

import { useState } from 'react';
// Import component
import { DatePicker } from '@fintech-sandpit/ui/react';
// Import styles (optional)
import '@fintech-sandpit/ui/style/components/date_picker.css';
import '@fintech-sandpit/ui/style/components/readonly_input.css';

const [value, setValue] = useState<Date[]>([
  new Date('2026-01-01'),
  new Date('2026-01-31'),
]);

return (
  <DatePicker
    value={value}
    mode="range"
    label="Select date range"
    numOfMonths={2}
    placeholder="No date range selected yet"
    onChange={setValue}
  />
);

Vue

<script setup lang="ts">
import { ref } from 'vue';
// Import component
import { DatePicker } from '@fintech-sandpit/ui/vue';
// Import styles (optional). Please note that you need to import the styles
// for DatePicker and ReadOnlyInput components since the DatePicker component
// is composed of these components.
import '@fintech-sandpit/ui/style/components/date_picker.css';
import '@fintech-sandpit/ui/style/components/readonly_input.css';

const value = ref<Date[]>([new Date('2026-01-01')]);
</script>

<template>
  <DatePicker
    v-model="value"
    label="Select date"
    placeholder="No date selected yet"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
// Import component
import { DatePicker } from '@fintech-sandpit/ui/vue';
// Import styles (optional)
import '@fintech-sandpit/ui/style/components/date_picker.css';
import '@fintech-sandpit/ui/style/components/readonly_input.css';

const value = ref<Date[]>([
  new Date('2026-01-01'),
  new Date('2026-01-31'),
]);
</script>

<template>
  <DatePicker
    v-model="value"
    mode="range"
    label="Select date range"
    :num-of-months="2"
    placeholder="No date range selected yet"
  />
</template>

Props

React

Name	Type	Default	Description
value	Date[]	—	The value of the date picker (controlled)
defaultValue	Date[]	—	Default value of the date picker (uncontrolled)
label	string	—	Label under the date input
placeholder	string	—	Placeholder text
mode	DatePickerSelectionMode	'single'	Selection mode
numOfMonths	number	1	Number of months to display
startOfWeek	number	1	First day of the week (0 = Sunday, 1 = Monday, etc.)
min	Date	—	Min allowed date
max	Date	—	Max allowed date
defaultView	DatePickerView	—	Default view of the date picker
minView	DatePickerView	—	Min allowed view
maxView	DatePickerView	—	Max allowed view
orientation	Orientation	'vertical'	Orientation of the text input
colorScheme	DatePickerColorScheme	'neutral'	Color scheme
size	FieldSize	'md'	Size
format	string	'%j.%m.%Y'	Format of the output date 1
timeZone	string	'UTC'	Time zone
clearable	boolean	false	Whether the input value can be cleared
required	boolean	false	Whether the input is required
invalid	boolean	false	Whether the input is invalid
readOnly	boolean	false	Whether the input is read only
disabled	boolean	false	Whether the input is disabled
closeOnSelect	boolean	false	Whether to close the popup after selecting a date
fixedWeeks	boolean	false	Whether to fix the number of weeks in the popup
lazyMount	boolean	false	Whether to lazy mount the popup window
presets	DatePickerPreset[]	—	Date range presets 2

1. Date formats are described on the FormatDate component page.
2. Makes sense only in range mode.

Vue

Name	Type	Default	Description
model-value	Value	—	Controlled value of the date picker 1
default-value	Date[]	—	Default value of the date picker (uncontrolled)
label	string	—	Label under the date input
placeholder	string	—	Placeholder text
mode	DatePickerSelectionMode	'single'	Selection mode
num-of-months	number	1	Number of months to display
start-of-week	number	1	First day of the week (0 = Sunday, 1 = Monday, etc.)
min	Date	—	Min allowed date
max	Date	—	Max allowed date
default-view	DatePickerView	—	Default view of the date picker
min-view	DatePickerView	—	Min allowed view
max-view	DatePickerView	—	Max allowed view
orientation	Orientation	'vertical'	Orientation of the text input
color-scheme	DatePickerColorScheme	'neutral'	Color scheme
size	FieldSize	'md'	Size
format	string	'%j.%m.%Y'	Format of the output date 2
time-zone	string	'UTC'	Time zone
clearable	boolean	false	Whether the input value can be cleared
required	boolean	false	Whether the input is required
invalid	boolean	false	Whether the input is invalid
read-only	boolean	false	Whether the input is read only
disabled	boolean	false	Whether the input is disabled
close-on-select	boolean	false	Whether to close the popup after selecting a date
fixed-weeks	boolean	false	Whether to fix the number of weeks in the popup
lazy-mount	boolean	false	Whether to lazy mount the popup window
presets	DatePickerPreset[]	—	Date range presets 3

1. Can be used with the v-model directive for two-way binding.
2. Date formats are described on the FormatDate component page.
3. Makes sense only in range mode.

Events

React

Name	Arguments	Description
onValueChange	(value: Date[]) => void	Callback fired when the value changes

Vue

Name	Payload	Description
@update:model-value	Date[]	Event emitted when the value changes

Types

type DatePickerColorScheme = 'neutral' | 'primary' | 'secondary'

type DatePickerPreset = {
  label: string;
  value: (
    | 'thisWeek'
    | 'lastWeek'
    | 'thisMonth'
    | 'lastMonth'
    | 'thisQuarter'
    | 'lastQuarter'
    | 'thisYear'
    | 'lastYear'
    | 'last3Days'
    | 'last7Days'
    | 'last14Days'
    | 'last30Days'
    | 'last90Days'
  );
}

type DatePickerSelectionMode = 'single' | 'multiple' | 'range'

type DatePickerView = 'day' | 'month' | 'year'

type FieldSize = 'sm' | 'md' | 'lg'

type Orientation = 'horizontal' | 'vertical'