Skip to main content

Datepicker

The Datepicker component is used for selecting dates and times. It offers different customizable date formats, and supports various sizes and locales.

Import​

Phaselis exports one main component for Datepicker.

import { Datepicker } from 'phaselis'
  • Datepicker: Main Component import for Datepicker

Usage​

Basic Datepicker​

import { Datepicker } from "phaselis";

const Example = () => {
  return <Datepicker />;
};

export default Example;

Datepicker with Custom Format​

import { Datepicker } from "phaselis";

const Example = () => {
  return (
    <Datepicker
      format="yyyy-MM-dd"
      onChange={(e, date) => console.log("Formatted date selected:", date)}
    />
  );
};

export default Example;

Props​

mode​

date | time | datetime

Specifies the type of selection: date, time, or both. Defaults to "date".

<Datepicker mode="datetime" />

minDate​

Date

Sets the minimum selectable date.

<Datepicker minDate={new Date(2023, 0, 1)} />

maxDate​

Date

Sets the maximum selectable date.

<Datepicker maxDate={new Date(2023, 11, 31)} />

format​

string

Defines the display format for the selected date. Uses date-fns format options. Defaults to "dd.MM.yyyy".

<Datepicker format="yyyy-MM-dd" />

size​

ComponentSize

Controls the size of the date picker. Defaults to "md".

<Datepicker size="lg" />

locale​

string

Specifies the locale for the date formatting. Defaults to "TR_tr".

<Datepicker locale="en_US" />

theme​

light | dark | auto

Specify the theme for the date picker modal.

<Datepicker theme="dark" />

disabled​

boolean

Disables the date picker, preventing user interaction.

<Datepicker disabled />

rightIconVisible​

boolean

Controls whether the right icon is visible. Defaults to true.

<Datepicker rightIconVisible={false} />

style​

NameTypeDescription
containerViewStyleStyle for the outer container of the date picker.
leftSlotViewStyleStyle for the left slot element (e.g., icon).
rightSlotViewStyleStyle for the right slot element (e.g., icon).
elementTextStyleStyle for the text element displaying the date.

Custom styles for the Datepicker component.

// Object with named styles
<Datepicker
  style={{
    container: {
      padding: 10,
      borderRadius: 8,
      backgroundColor: "#b9e0ff",
    },
    leftSlot: { marginRight: 5 },
    element: { fontSize: 16, color: "#11295a" },
  }}
/>

// Direct element styling (text display)
<Datepicker
  style={{ fontSize: 18, fontWeight: 'bold', color: '#0066cc' }}
/>

containerStyle​

ViewStyle

Additional style applied directly to the container.

<Datepicker containerStyle={{ marginBottom: 10 }} />

leftSlotStyle​

IconStyle | ViewStyle

Additional style applied directly to the left slot.

<Datepicker leftIcon="Calendar" leftSlotStyle={{ color: 'blue' }} />

rightSlotStyle​

IconStyle | ViewStyle

Additional style applied directly to the right slot.

<Datepicker rightSlotStyle={{ marginLeft: 8 }} />

LeftSlot / RightSlot​

ReactNode

Custom components or icons rendered on the left or right side of the input field.

import { Text } from "react-native";
<Datepicker
  LeftSlot={() => <Text>Start Date</Text>}
  RightSlot={() => <Text>End Date</Text>}
/>

leftIcon / rightIcon​

SlotIconName

Name of the icon to display on the left or right side of the input field.

<Datepicker leftIcon="Calendar" rightIcon="Clock" />

onChange​

(event: any, value: any, ...args: any[]) => any

Callback function triggered when the date changes. Receives the event and the selected date as parameters.

<Datepicker onChange={(e, date) => console.log("Selected date:", date)} />

disabled​

boolean

Disables the date picker, preventing user interaction.

<Datepicker disabled />