Skip to main content
Datepicker displays a calendar in a popover for selecting dates. It supports date filtering, min/max dates, and custom date formatting.

​
Import

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

​
Usage

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

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

  return (
    <Datepicker
      date={date}
      onSelect={nextDate => setDate(nextDate)}
    />
  );
};

​
With Label and Caption

<Datepicker
  label='Birth Date'
  placeholder='Select date'
  caption='MM/DD/YYYY'
  date={date}
  onSelect={setDate}
/>

​
Date Range

Restrict selectable dates with min and max props. 
import React from 'react';
import { Datepicker } from '@ui-kitten/components';

const DateRangePicker = () => {
  const [date, setDate] = React.useState(new Date());
  
  const minDate = new Date(2020, 0, 1);
  const maxDate = new Date(2025, 11, 31);

  return (
    <Datepicker
      label='Select Date'
      date={date}
      onSelect={setDate}
      min={minDate}
      max={maxDate}
    />
  );
};

​
Filter Dates

Disable specific dates with a filter function. 
import React from 'react';
import { Datepicker } from '@ui-kitten/components';

const FilteredDatepicker = () => {
  const [date, setDate] = React.useState(new Date());

  // Disable weekends
  const filter = (date) => {
    const day = date.getDay();
    return day !== 0 && day !== 6;
  };

  return (
    <Datepicker
      label='Weekdays Only'
      date={date}
      onSelect={setDate}
      filter={filter}
    />
  );
};

​
Status

<Datepicker
  status='success'
  label='Valid Date'
  date={date}
  onSelect={setDate}
/>

<Datepicker
  status='danger'
  label='Invalid Date'
  caption='Date is required'
  date={null}
  onSelect={setDate}
/>

​
Sizes

<Datepicker size='small' date={date} onSelect={setDate} />
<Datepicker size='medium' date={date} onSelect={setDate} />
<Datepicker size='large' date={date} onSelect={setDate} />

​
Accessories

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

const CalendarIcon = (props) => <Icon {...props} name='calendar' />;

<Datepicker
  accessoryRight={CalendarIcon}
  date={date}
  onSelect={setDate}
/>

​
Auto Dismiss

Control whether the picker closes after selection. 
<Datepicker
  date={date}
  onSelect={setDate}
  autoDismiss={false}
/>

​
Props

​
date
Date
Currently selected date.
​
onSelect
(date: Date) => void
Called when a date is selected.
​
min
Date
Minimum selectable date.
​
max
Date
Maximum selectable date.
​
filter
(date: Date) => boolean
Function to determine whether a date should be disabled. Return true to enable, false to disable.
​
autoDismiss
boolean
default:"true"
Whether to hide the calendar when a date is selected.
​
placeholder
RenderProp<TextProps> | React.ReactText
Text to display when no date is selected.
​
label
RenderProp<TextProps> | React.ReactText
String, number or function component to render above the input.
​
caption
RenderProp<TextProps> | React.ReactText
String, number or function component to render below the input.
​
status
EvaStatus
default:"basic"
Status of the component. Can be basic, primary, success, info, warning, danger or control.
​
size
'small' | 'medium' | 'large'
default:"medium"
Size of the input field.
​
accessoryLeft
RenderProp<Partial<ImageProps>>
Function component to render at the start.
​
accessoryRight
RenderProp<Partial<ImageProps>>
Function component to render at the end.
​
disabled
boolean
default:"false"
Whether the datepicker is disabled.
​
placement
string
default:"'bottom'"
Position of the calendar popup.

​
Methods

​
focus()
() => void
Focuses the datepicker and shows the calendar.
​
blur()
() => void
Removes focus and hides the calendar.
​
isFocused()
() => boolean
Returns whether the calendar is currently visible.
​
clear()
() => void
Clears the selected date.
​
scrollToToday()
() => void
Shows the current date in the picker. The picker must be visible.
​
scrollToDate(date)
(date: Date) => void
Shows a specific date in the picker. The picker must be visible.

​
Form Examples

​
Birth Date Picker

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

const BirthDatePicker = () => {
  const [birthDate, setBirthDate] = React.useState(null);
  
  const maxDate = new Date();
  const minDate = new Date(1900, 0, 1);

  return (
    <Layout style={{ padding: 16 }}>
      <Datepicker
        label='Birth Date'
        placeholder='Select your birth date'
        date={birthDate}
        onSelect={setBirthDate}
        min={minDate}
        max={maxDate}
      />
    </Layout>
  );
};

​
Appointment Scheduler

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

const AppointmentScheduler = () => {
  const [date, setDate] = React.useState(null);
  const [error, setError] = React.useState('');

  const minDate = new Date();
  minDate.setDate(minDate.getDate() + 1); // Start from tomorrow

  const maxDate = new Date();
  maxDate.setDate(maxDate.getDate() + 90); // Up to 90 days ahead

  // Disable weekends
  const filter = (date) => {
    const day = date.getDay();
    return day !== 0 && day !== 6;
  };

  const handleBooking = () => {
    if (!date) {
      setError('Please select a date');
      return;
    }
    setError('');
    // Book appointment
  };

  return (
    <Layout style={{ padding: 16, gap: 16 }}>
      <Text category='h6'>Book an Appointment</Text>
      
      <Datepicker
        label='Appointment Date'
        placeholder='Select date (weekdays only)'
        date={date}
        onSelect={(nextDate) => {
          setDate(nextDate);
          setError('');
        }}
        min={minDate}
        max={maxDate}
        filter={filter}
        status={error ? 'danger' : 'basic'}
        caption={error}
      />
      
      <Button onPress={handleBooking}>
        BOOK APPOINTMENT
      </Button>
    </Layout>
  );
};

​
Date Range Form

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

const DateRangeForm = () => {
  const [startDate, setStartDate] = React.useState(new Date());
  const [endDate, setEndDate] = React.useState(null);

  return (
    <Layout style={{ padding: 16, gap: 16 }}>
      <Text category='h6'>Select Date Range</Text>
      
      <Datepicker
        label='Start Date'
        date={startDate}
        onSelect={setStartDate}
      />
      
      <Datepicker
        label='End Date'
        date={endDate}
        onSelect={setEndDate}
        min={startDate}
      />
    </Layout>
  );
};

​
Vacation Planner

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

const VacationPlanner = () => {
  const [startDate, setStartDate] = React.useState(null);
  const [endDate, setEndDate] = React.useState(null);

  const minDate = new Date();
  const maxDate = new Date();
  maxDate.setFullYear(maxDate.getFullYear() + 1);

  const calculateDays = () => {
    if (!startDate || !endDate) return 0;
    const diffTime = Math.abs(endDate - startDate);
    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
    return diffDays;
  };

  return (
    <Layout style={{ padding: 16, gap: 16 }}>
      <Text category='h6'>Plan Your Vacation</Text>
      
      <Datepicker
        label='Departure Date'
        placeholder='Select departure date'
        date={startDate}
        onSelect={(date) => {
          setStartDate(date);
          if (endDate && date > endDate) {
            setEndDate(null);
          }
        }}
        min={minDate}
        max={maxDate}
      />
      
      <Datepicker
        label='Return Date'
        placeholder='Select return date'
        date={endDate}
        onSelect={setEndDate}
        min={startDate || minDate}
        max={maxDate}
        disabled={!startDate}
      />
      
      {startDate && endDate && (
        <Text appearance='hint'>
          Duration: {calculateDays()} days
        </Text>
      )}
    </Layout>
  );
};

Build docs developers (and LLMs) love

Get started for freeTalk to us