Skip to main content

Datepicker

The TkDatepicker component is a versatile and customizable date picker that supports single date and date range selection. It offers various display modes, localization, and customizable date formatting.

import { TkDatepicker } from '@takeoff-ui/react'

Playground​

Preview

Generated Code

<TkDatepicker
  mode="single"
  size="base"
  headerType="basic"
  iconPosition="left"
  timeFormat="24"
  label="Select Date"
  placeholder="yyyy-mm-dd"
  dateFormat="yyyy-MM-dd"
  minuteStep={1}
  hourStep={1}
  icon="calendar_month"
  locale="en"
/>
<TkDatepicker
  mode="single"
  size="base"
  headerType="basic"
  iconPosition="left"
  timeFormat="24"
  label="Select Date"
  placeholder="yyyy-mm-dd"
  dateFormat="yyyy-MM-dd"
  :minuteStep="1"
  :hourStep="1"
  icon="calendar_month"
  locale="en"
/>
<tk-datepicker
  mode="single"
  size="base"
  headerType="basic"
  iconPosition="left"
  timeFormat="24"
  label="Select Date"
  placeholder="yyyy-mm-dd"
  dateFormat="yyyy-MM-dd"
  [minuteStep]="1"
  [hourStep]="1"
  icon="calendar_month"
  locale="en"
/>

Controls

Basic​

A simple TkDatepicker is created using default properties, allowing for single date selection.

View Code
const [selectedDate, setSelectedDate] = useState("");
<TkDatepicker
    label="Select Date"
    placeholder="Choose a date"
    dateFormat="dd/MM/yyyy"
    value={selectedDate}
    onTkChange={(event) => setSelectedDate(event.detail)}
/>

States​

View Code
<TkDatepicker
  label="Error"
  value="2024-01-15"
  invalid={true}
  error="Bu alan zorunludur"
/>
<TkDatepicker
  label="Readonly"
  value="2024-01-15"
  readonly
/>
<TkDatepicker
  label="Disabled"
  value="2024-01-15"
  disabled
/>

Inline Mode​

Demonstrates how to use the TkDatepicker in inline mode, where the calendar is always visible.

Selected date: 2023-05-15

View Code
const [selectedDate, setSelectedDate] = useState("2023-05-15");

<TkDatepicker
  value={selectedDate}
  onTkChange={(event) => setSelectedDate(event.detail)}
  inline
/>

Date Range Selection​

Shows how to enable date range selection using the mode="range" property.

Selected range: 2024-02-10 - 2024-02-20

View Code
const [dateRange, setDateRange] = useState({
  start: "2024-02-10",
  end: "2024-02-20",
});  

<TkDatepicker
    mode="range"
    label="Select Date Range"
    placeholder="Start date - End date"
    value={dateRange}
    onTkChange={(event) => setDateRange(event.detail)}
    inline
/>

Custom Date Format​

Illustrates how to customize the date display format using the dateFormat property.

View Code
<TkDatepicker
  label="Custom Format"
  placeholder="DD.MM.YYYY"
  dateFormat="dd.MM.yyyy"
  value={selectedDate}
  onTkChange={handleDateChange}
/>

Allowed and Disabled Dates​

Demonstrates how to restrict or enable specific dates using allowedDates and disabledDates properties.

View Code
const [selectedDate1, setSelectedDate1] = useState("");
const [selectedDate2, setSelectedDate2] = useState("");
const dates = ["10/02/2026", "15/02/2026", "20/02/2026"]; // Example dates
<TkDatepicker
   label="Only specific dates are selectable"
   placeholder="Choose a date"
   dateFormat="dd/MM/yyyy"
   allowedDates={dates}
   value={selectedDate1}
   onTkChange={(event) => setSelectedDate1(event.detail)}
/>
<TkDatepicker
   label="Specific dates are disabled"
   placeholder="Choose a date"
   dateFormat="dd/MM/yyyy"
   disabledDates={dates}
   value={selectedDate2}
   onTkChange={(event) => setSelectedDate2(event.detail)}
/>

Disabled Week Days​

Demonstrates how to disable specific days of the week using the disabledWeekDays property.

View Code
const [selectedDate1, setSelectedDate1] = useState('');
const [selectedDate2, setSelectedDate2] = useState('');

// Weekend days (Saturday and Sunday)
const weekendDays = [0, 6]; // 0 is Sunday, 6 is Saturday
  
// Weekdays (Monday to Friday)
const weekdays = [1, 2, 3, 4, 5]; // 1 is Monday, 5 is Friday

<TkDatepicker
  label="Weekends Disabled"
  placeholder="Select a weekday"
  dateFormat="dd/MM/yyyy"
  disabledWeekDays={weekendDays}
  value={selectedDate1}
  onTkChange={(event) => setSelectedDate1(event.detail)}
/>

<TkDatepicker
  label="Only Weekends Allowed"
  placeholder="Select a weekend day"
  dateFormat="dd/MM/yyyy"
  disabledWeekDays={weekdays}
  value={selectedDate2}
  onTkChange={(event) => setSelectedDate2(event.detail)}
/>

Localization​

Demonstrates how to set different locales for the TkDatepicker using the locale property.

View Code
const [enDate, setEnDate] = useState("");
const [trDate, setTrDate] = useState("");

<TkDatepicker
    label="English (US)"
    placeholder="Select date"
    locale="en-US"
    dateFormat="MMM d, yyyy"
    value={enDate}
    onTkChange={handleEnDateChange}
/>
<TkDatepicker
    label="Turkish"
    placeholder="Tarih seçin"
    locale="tr-TR"
    value={trDate}
    onTkChange={handleTrDateChange}
/>

First Day Of Week​

Demonstrates how to change firstDayOfWeekIndex property.


View Code
const [selectedDate, setSelectedDate] = useState("");
<TkDatepicker
    label="Default for First Day of Week"
    placeholder="Choose a date"
    dateFormat="dd/MM/yyyy"
    value={selectedDate}
    onTkChange={(event) => setSelectedDate(event.detail)}
/>
 <TkDatepicker
    label="Thursday for First Day of Week"
    placeholder="Choose a date"
    dateFormat="dd/MM/yyyy"
    value={selectedDate}
    onTkChange={(event) => setSelectedDate(event.detail)}
    firstDayOfWeekIndex={3}
/>

Header Types​

Illustrates different header styles available via the headerType property.

View Code

Demonstrates how to customize the footer using the footerType and footerVariant properties.

You can set Today by passing setToday() function to the footer slot and trigger it on button click.

Additionally, you can manually set the value by allowApplyButton property. When allowApplyButton is enabled, changes are only committed when the apply() method is called.


Selected Date:

View Code
import { useRef, useState } from "react";
import { TkDatepicker, TkButton } from "@takeoff-ui/react";

const dp = useRef(null);

const [date, setDate] = useState();

const setToday = async () => {
   await dp?.current?.setToday();
};

const submit = async () => {
  await dp?.current?.apply();
};

<TkDatepicker ref={dp} value={date} allowApplyButton inline onTkChange={e => setDate(e.detail)}>
  <div slot="footer-actions" className="flex justify-between w-full">
    <TkButton label="Today" type="filled" variant="secondary" onTkClick={setToday} />
    <div className="flex gap-2">
      <TkButton label="Cancel" type="text" variant="neutral" />
      <TkButton label="Submit" onTkClick={submit}></TkButton>
    </div>
  </div>
</TkDatepicker>

Time Picker Mode​

Demonstrates how to enable date & time selection using the showTimePicker property for single date.

View Code
const [selectedDateTime, setSelectedDateTime] = useState("");
const [timeFormat, setTimeFormat] = useState<'12' | '24'>('12');
<TkDatepicker
    label="Select Date & Time"
    placeholder="YYYY-MM-DD HH:mm"
    showTimePicker
    value={selectedDateTime}
    onTkChange={(event) => setSelectedDateTime(event.detail)}
    timeFormat={timeFormat}
/>

Time Only​

Illustrates how to use timeOnly to select only time.

View Code
const [selectedTime, setSelectedTime] = useState("");
<TkDatepicker
    label="Select Time"
    headerType="basic"
    timeOnly
    value={selectedTime}
    onTkChange={(event) => setSelectedTime(event.detail)}
    timeFormat="12"
/>

Date & Time Range Selection​

Illustrates how to use mode="range" together with showTimePicker to select a date range with time.

View Code
const [dateTimeRange, setDateTimeRange] = useState({
  start: "2024-02-10 08:00",
  end: "2024-02-10 17:30",
});

<TkDatepicker
    mode="range"
    label="Select Date & Time Range"
    placeholder="YYYY-MM-DD HH:mm - YYYY-MM-DD HH:mm"
    showTimePicker
    value={dateTimeRange}
    onTkChange={(event) => setDateTimeRange(event.detail)}
/>

API​

Props​

NameTypeDefaultDescription
booleanfalseWhether to require manual confirmation (Apply button) before committing changes. If true, changes are only applied when apply() is called.
string[][]Array of dates that are allowed to be selected. All other dates will be disabled. Note: Format should match dateFormat prop
booleanfalseIndicates whether the input of datepicker can be cleared
string'yyyy-MM-dd'Date format pattern
booleanfalseWhether to disable input mask
booleanfalseWhether the datepicker is disabled
string[][]Array of dates that are disabled for selection. Format should match dateFormat prop
number[][]Disabled week days (0-6, where 0 is Sunday and 6 is Saturday) Example: [0,6] will disable Sunday and Saturday
stringnullError message to display
numbernullDefines the first day of the week. 0 for Monday, 1 for Tuesday, ..., 6 for Sunday. If not provided, the first day of the week is determined by the locale prop. If neither firstDayOfWeekIndex nor locale provide a value, defaults to Monday (0). Providing this prop overrides the locale setting for the start of the week.
"basic", "divided", "light"'basic'The visual variant of the footer: 'basic', 'divided', or 'light'.
"basic", "dark", "divided", "light", "primary"'basic'Header visual variant
stringnullHint text to display
number1Hour increment step.
IIconOptions, IMultiIconOptions, string'calendar_month'Specifies a material icon name to be displayed.
"left", "right"'left'Defines the position of the icon.
booleanfalseWhether to display inline panel
booleanfalseWhether the datepicker is in an invalid state
stringnullDefines the label for the input
string'en'Locale for date formatting
string''Maximum selectable date
stringnullMaximum selectable time (HH:mm format).
string''Minimum selectable date
stringnullMinimum selectable time (HH:mm format).
number1Minute increment step.
"range", "single"'single'The selection mode of the date picker: 'single' for single date selection, 'range' for date range selection.
stringnullThe name of the control.
stringnullInput placeholder text
booleanfalseWhether the datepicker is read-only
booleanfalseDisplays a red asterisk (*) next to the label for visual emphasis.
booleanfalseWhether to show the timepicker panel next to the calendar.
"base", "large", "small"'base'Defines the size for the label
"12", "24"'24'Time format: '12' or '24'.
booleanfalseEnables time-only mode. In this mode, no date selection is required and the input shows a time mask. When enabled, the panel renders only the time picker and tk-change emits a time string (e.g. HH:mm or hh:mm a).
IDateSelection, stringnullThe value representing the selected date(s)

Events​

NameDescription
tk-changeEmitted on date selection changes
tk-input-changeEmitted on input value changes

Methods​

NameTypeDescription
applyapply() => Promise<void>Applies the current internal selection and emits tk-change
closePanelclosePanel() => Promise<void>Closes the datepicker panel if it is open.
setTodaysetToday() => Promise<void>Sets the date to today

Slots​

NameDescription
footerCustom footer template.
footer-actionsCustom actions template to default footer.

Interfaces​

IDateSelection​

interface IDateSelection {
  start: string;
  end?: string;
}