DatePicker

Guide to using the DatePicker component in Podo UI

Basic Usage

DatePicker is a component for selecting date, time, or date+time. It supports instant (single) and period (range) modes.

TSX

import { DatePicker } from 'podo-ui';

// 단일 날짜 선택
<DatePicker
  mode="instant"
  type="date"
  value={value}
  onChange={setValue}
/>

// 기간 선택
<DatePicker
  mode="period"
  type="date"
  value={value}
  onChange={setValue}
/>

Live Examples:

Instant

Selected: -

Period

~

Selected: -

Types

Three types are supported: date (date only), time (time only), datetime (date + time)

Type Examples:

type="date"

Select date only

-

type="time"

Select time only

:

-

type="datetime"

Select date and time together

:

-

TSX

// 날짜만 선택
<DatePicker type="date" />

// 시간만 선택
<DatePicker type="time" />

// 날짜 + 시간
<DatePicker type="datetime" />

Period Selection

Set mode="period" to select a start and end date. Reset/Apply buttons are shown at the bottom.

Period Selection Examples:

Date Range

~

-

Time Range

:

~

:

-

DateTime Range

:

~

:

-

TSX

// 기간 날짜 선택
<DatePicker mode="period" type="date" />

// 기간 시간 선택
<DatePicker mode="period" type="time" />

// 기간 날짜+시간 선택
<DatePicker mode="period" type="datetime" />

States

Various states are supported:

State Examples:

Default

-

Disabled

With Initial Value

2025. 11. 30.

TSX

// 기본 상태
<DatePicker type="date" />

// 비활성화
<DatePicker type="date" disabled />

// 초기값 설정
<DatePicker type="date" value={{ date: new Date() }} />

Props

DatePicker component props:

Prop	Type	Default	Description
`mode`	`'instant' \| 'period'`	`'instant'`	Selection mode (instant: single, period: range)
`type`	`'date' \| 'time' \| 'datetime'`	`'date'`	Value type (date, time, datetime)
`value`	`{ date?: Date, time?: TimeValue, endDate?: Date, endTime?: TimeValue }`	`-`	Selected value object
`onChange`	`(value) => void`	`-`	Value change callback function
`placeholder`	`string`	`-`	Placeholder text
`disabled`	`boolean`	`false`	Disabled state
`showActions`	`boolean`	`period: true`	Show bottom buttons (default true for period mode)
`align`	`'left' \| 'right'`	`'left'`	Dropdown alignment (left or right)
`disable`	`DateCondition[]`	`-`	Unselectable date conditions (specific dates, ranges, or functions)
`enable`	`DateCondition[]`	`-`	Selectable date conditions (only specified dates are enabled)
`minDate`	`Date \| DateTimeLimit`	`-`	Minimum selectable date (Date or DateTimeLimit)
`maxDate`	`Date \| DateTimeLimit`	`-`	Maximum selectable date (Date or DateTimeLimit)
`minuteStep`	`1 \| 5 \| 10 \| 15 \| 20 \| 30`	`1`	Minute selection interval (1, 5, 10, 15, 20, 30)

Value Interface

DatePickerValue manages date and time as separate fields. This allows independent binding and control of date and time values.

TypeScript

// 시간 값 인터페이스
interface TimeValue {
  hour: number;   // 0-23
  minute: number; // 0-59
}

// DatePicker 값 인터페이스
interface DatePickerValue {
  date?: Date;        // 시작 날짜 (년, 월, 일)
  time?: TimeValue;   // 시작 시간 (시, 분)
  endDate?: Date;     // 종료 날짜 - period 모드
  endTime?: TimeValue; // 종료 시간 - period 모드
}

Field	Type	Used In	Description
`date`	`Date`	`date, datetime`	Start date (year, month, day). Stored as a Date object.
`time`	`TimeValue`	`time, datetime`	Start time (hour, minute). Object containing hour (0-23) and minute (0-59).
`endDate`	`Date`	`period + date/datetime`	End date. Specifies the end date of the range in period mode.
`endTime`	`TimeValue`	`period + time/datetime`	End time. Specifies the end time of the range in period mode.

Usage Examples

// 날짜만 선택 (type="date")
const dateValue: DatePickerValue = {
  date: new Date(2024, 0, 15), // 2024년 1월 15일
};

// 시간만 선택 (type="time")
const timeValue: DatePickerValue = {
  time: { hour: 14, minute: 30 }, // 14:30
};

// 날짜+시간 선택 (type="datetime")
const datetimeValue: DatePickerValue = {
  date: new Date(2024, 0, 15),
  time: { hour: 14, minute: 30 },
};

// 기간 선택 (mode="period", type="date")
const periodValue: DatePickerValue = {
  date: new Date(2024, 0, 15),    // 시작일
  endDate: new Date(2024, 0, 20), // 종료일
};

// 기간+시간 선택 (mode="period", type="datetime")
const periodDatetimeValue: DatePickerValue = {
  date: new Date(2024, 0, 15),
  time: { hour: 9, minute: 0 },
  endDate: new Date(2024, 0, 20),
  endTime: { hour: 18, minute: 0 },
};

Disabling Dates

Use disable and enable props to restrict selectable dates. You can specify conditions using specific dates, date ranges, or functions.

Disabling Examples:

Disable Specific Dates

Make specific dates unselectable

-

Disable Date Range

Make a range of dates unselectable

-

Disable with Function

Dynamically disable dates with a condition function

-

Enable Only Specific Dates

Use enable to make only specified dates selectable

-

TSX

// 특정 날짜 비활성화
<DatePicker
  type="date"
  disable={[
    new Date(2024, 0, 10), // 2024년 1월 10일
    new Date(2024, 0, 15), // 2024년 1월 15일
  ]}
/>

// 날짜 범위 비활성화
<DatePicker
  type="date"
  disable={[
    { from: new Date(2024, 0, 5), to: new Date(2024, 0, 12) },
  ]}
/>

// 함수로 비활성화 (주말 비활성화)
<DatePicker
  type="date"
  disable={[
    (date) => date.getDay() === 0 || date.getDay() === 6,
  ]}
/>

// 특정 날짜만 활성화
<DatePicker
  type="date"
  enable={[
    { from: new Date(2024, 0, 1), to: new Date(2024, 0, 7) },
  ]}
/>

TypeScript

// 날짜 범위 인터페이스
interface DateRange {
  from: Date;
  to: Date;
}

// 날짜 조건 타입
type DateCondition =
  | Date                        // 특정 날짜
  | DateRange                   // 날짜 범위
  | ((date: Date) => boolean);  // 조건 함수

Min/Max Date

Use minDate and maxDate props to specify selectable date range. You can specify time as well using Date object or DateTimeLimit format.

Min/Max Date Examples:

Date Only Limit

Selectable from today to 30 days later

-

Date + Time Limit

Precise limit including start/end time

:

-

TSX

// 날짜만 제한 (Date 객체)
<DatePicker
  type="date"
  minDate={new Date()}                    // 오늘부터
  maxDate={new Date(2024, 11, 31)}        // 2024년 12월 31일까지
/>

// 날짜+시간 제한 (DateTimeLimit 객체)
<DatePicker
  type="datetime"
  minDate={{
    date: new Date(),
    time: { hour: 9, minute: 0 },        // 오늘 09:00부터
  }}
  maxDate={{
    date: new Date(2024, 11, 31),
    time: { hour: 18, minute: 0 },       // 2024-12-31 18:00까지
  }}
/>

TypeScript

// 날짜+시간 제한 인터페이스
interface DateTimeLimit {
  date: Date;
  time?: TimeValue; // { hour: number, minute: number }
}

// minDate/maxDate 타입
type MinMaxDate = Date | DateTimeLimit;

Minute Step

Use minuteStep prop to specify minute selection interval. Supports 1, 5, 10, 15, 30 minute intervals. Default is 1 minute.

Minute Step Examples:

minuteStep=1

1 minute (default)

:

-

minuteStep=5

5 minutes

:

-

minuteStep=10

10 minutes

:

-

minuteStep=15

15 minutes

:

-

minuteStep=20

20 minutes

:

-

minuteStep=30

30 minutes

:

-

TSX

// 1분 단위 (기본값)
<DatePicker type="time" minuteStep={1} />

// 5분 단위
<DatePicker type="time" minuteStep={5} />

// 10분 단위
<DatePicker type="time" minuteStep={10} />

// 15분 단위
<DatePicker type="time" minuteStep={15} />

// 20분 단위
<DatePicker type="time" minuteStep={20} />

// 30분 단위
<DatePicker type="time" minuteStep={30} />

// datetime과 함께 사용
<DatePicker type="datetime" minuteStep={15} />

TypeScript

// 분 단위 선택 타입
type MinuteStep = 1 | 5 | 10 | 15 | 20 | 30;

CDN Usage (Vanilla JS)

Use DatePicker with pure JavaScript without React. Load the script and styles via jsDelivr CDN.

Live Demo

Below are live examples of the Vanilla JS DatePicker:

Instant Date

-

Period Selection

-

Date + Time

-

Basic Usage

<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/podo-ui@latest/cdn/podo-datepicker.min.css">

<!-- JS -->
<script src="https://cdn.jsdelivr.net/npm/podo-ui@latest/cdn/podo-datepicker.min.js"></script>

<!-- HTML -->
<div id="my-datepicker"></div>

<!-- Initialize -->
<script>
  const picker = new PodoDatePicker('#my-datepicker', {
    mode: 'instant',
    type: 'date',
    onChange: function(value) {
      console.log('Selected:', value);
    }
  });
</script>

Automatically fetches the latest version from jsDelivr CDN.

Options

JavaScript

const picker = new PodoDatePicker('#my-datepicker', {
  // 선택 모드: 'instant' (단일) 또는 'period' (기간)
  mode: 'instant',

  // 값 타입: 'date', 'time', 'datetime'
  type: 'date',

  // 초기값
  value: {
    date: new Date(),
    time: { hour: 9, minute: 0 }
  },

  // 값 변경 콜백
  onChange: function(value) {
    console.log(value);
  },

  // 비활성화
  disabled: false,

  // 드롭다운 정렬: 'left' 또는 'right'
  align: 'left',

  // 하단 버튼 표시 (period 모드에서 기본 true)
  showActions: true,

  // 분 단위: 1, 5, 10, 15, 20, 30
  minuteStep: 15,

  // 최소/최대 날짜
  minDate: new Date(),
  maxDate: new Date(2025, 11, 31),

  // 또는 시간 포함
  minDate: {
    date: new Date(),
    time: { hour: 9, minute: 0 }
  },

  // 날짜 비활성화 조건
  disable: [
    new Date(2024, 0, 1),  // 특정 날짜
    { from: new Date(2024, 0, 10), to: new Date(2024, 0, 20) },  // 범위
    function(date) { return date.getDay() === 0; }  // 일요일
  ],

  // 특정 날짜만 활성화
  enable: [
    { from: new Date(2024, 0, 1), to: new Date(2024, 0, 15) }
  ]
});

Methods

JavaScript

// Returns the current value
const value = picker.getValue();
// { date: Date, time: { hour: 9, minute: 0 }, endDate: Date, endTime: {...} }

// Sets the value
picker.setValue({
  date: new Date(2024, 5, 15),
  time: { hour: 14, minute: 30 }
});

// Clears the value
picker.clear();

// Enables the DatePicker
picker.enable();

// Disables the DatePicker
picker.disable();

// Destroys the DatePicker instance
picker.destroy();

Localization

Customize texts using the texts option.

JavaScript

const picker = new PodoDatePicker('#my-datepicker', {
  type: 'date',
  texts: {
    weekDays: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
    months: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
             'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    yearSuffix: '',  // 년 -> 빈 문자열
    reset: 'Reset',
    apply: 'Apply'
  }
});