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	ReactText | (props) => ReactElement	undefined	Label displayed above the input.
caption	ReactText | (props) => ReactElement	undefined	Caption displayed below the input.
placeholder	string	undefined	Placeholder text displayed when no date is selected.

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	ReactText | (props) => ReactElement	undefined	Label displayed above the input.
caption	ReactText | (props) => ReactElement	undefined	Caption displayed below the input.

Storybook

Live examples coming soon via Storybook.