Datepicker

Datepicker provides date selection through a modal calendar popup. It supports single date and date range selection modes.

Import

import { Datepicker, RangeDatepicker } from '@ui-kitten/components';

Basic Usage

Single Date

import React, { useState } from 'react';
import { Layout, Datepicker } from '@ui-kitten/components';

const DatepickerExample = () => {
  const [date, setDate] = useState(new Date());

  return (
    <Layout style={{ flex: 1, padding: 16 }}>
      <Datepicker
        label="Select Date"
        caption="Choose a delivery date"
        date={date}
        onSelect={(nextDate) => setDate(nextDate)}
      />
    </Layout>
  );
};

Date Range

import React, { useState } from 'react';
import { Layout, RangeDatepicker } from '@ui-kitten/components';

const RangeDatepickerExample = () => {
  const [range, setRange] = useState({});

  return (
    <Layout style={{ flex: 1, padding: 16 }}>
      <RangeDatepicker
        label="Select Range"
        range={range}
        onSelect={(nextRange) => setRange(nextRange)}
      />
    </Layout>
  );
};

Props

Datepicker

Property	Type	Default	Description
date	Date	undefined	The currently selected date.
onSelect	(date: Date) => void	-	Called when a date is selected.
min	Date	undefined	Minimum selectable date.
max	Date	undefined	Maximum selectable date.
dateService	DateService	NativeDateService	Custom date service for localization and formatting.
label	string | number | (props) => ReactElement	undefined	Label displayed above the input.
caption	string | number | (props) => ReactElement	undefined	Caption displayed below the input.
placeholder	string | number | (props) => ReactElement	'dd/mm/yyyy'	Placeholder displayed when no date is selected.
status	'basic' | 'primary' | 'success' | 'info' | 'warning' | 'danger' | 'control'	'basic'	Status of the control.
size	'small' | 'medium' | 'large'	'medium'	Size of the control.
accessoryLeft	(props) => ReactElement	undefined	Render function for the accessory shown at the start of the control.
accessoryRight	(props) => ReactElement	undefined	Render function for the accessory shown at the end of the control.
controlStyle	ViewStyle	undefined	Style applied to the control that opens the calendar.
placement	PopoverPlacement | string	'bottom start'	Position of the calendar relative to the control.
backdropStyle	ViewStyle	undefined	Style applied to the backdrop behind the calendar.
autoDismiss	boolean	true	Whether the calendar closes as soon as a date is selected.
onFocus	() => void	undefined	Called when the calendar opens.
onBlur	() => void	undefined	Called when the calendar closes.

Datepicker embeds a Calendar and accepts all of its presentation properties too — filter, initialVisibleDate, boundingMonth, startView, title, renderDay, renderFooter, renderMonth, renderYear, renderArrowLeft, renderArrowRight and onVisibleDateChange — plus all React Native TouchableOpacity props.

Datepicker exposes an imperative API through a ref typed as DatepickerRef:

Method	Signature	Description
focus	() => void	Opens the calendar.
blur	() => void	Closes the calendar.
isFocused	() => boolean	Whether the calendar is open.
clear	() => void	Clears the selected date.
scrollToToday	() => void	Scrolls the calendar to the current date.
scrollToDate	(date: Date) => void	Scrolls the calendar to a given date.
getCalendarVisibleDate	() => Date | undefined	Returns the currently visible calendar date.

RangeDatepicker

Property	Type	Default	Description
range	{ startDate?: Date, endDate?: Date }	{}	The currently selected date range.
onSelect	(range: { startDate: Date, endDate: Date }) => void	-	Called when a range is selected.
min	Date	undefined	Minimum selectable date.
max	Date	undefined	Maximum selectable date.
dateService	DateService	NativeDateService	Custom date service for localization and formatting.
label	string | number | (props) => ReactElement	undefined	Label displayed above the input.
caption	string | number | (props) => ReactElement	undefined	Caption displayed below the input.

RangeDatepicker accepts the same control and calendar properties as Datepicker, and exposes the same ref API, typed as RangeDatepickerRef. Note that it does not accept autoDismiss — a range needs two taps, so the calendar stays open until both ends are picked.

Storybook

Live examples coming soon via Storybook.