시작하기

이 플러그인의 설치 단계와 전체 마크다운 가이드를 포함한 설치 명령어를 복사할 수 있습니다.

        Set up this Capacitor plugin in the project.

Use the package manager already used by the project.
Install these package(s): `@capgo/capacitor-date-picker`
Run the required Capacitor sync/update step after installation.
Read this markdown guide for the full setup steps: https://raw.githubusercontent.com/Cap-go/website/refs/heads/main/apps/docs/src/content/docs/docs/plugins/date-picker/getting-started.mdx
Use that guide for platform-specific steps, native file edits, permissions, config changes, imports, and usage setup.
If that guide references other docs pages, read them too.

설치

동기화 가이드입니다. 플러그인을 설치하기 위해 AI-Assisted Setup을 사용할 수 있습니다. AI 도구에 Capgo 기능을 추가하려면 다음 명령어를 사용하세요:

npx skills add https://github.com/Cap-go/capgo-skills --skill capacitor-plugins

다음과 같은 명령어를 사용하세요:

Use the `capacitor-plugins` skill from `Cap-go/capgo-skills` to install the `@capgo/capacitor-date-picker` plugin in my project.

만약 Manual Setup을 선호한다면, 다음 명령어를 실행하고 아래 플랫폼별 지침을 따르세요:

npm install @capgo/capacitor-date-picker
npx cap sync

import

import { DatePicker } from '@capgo/capacitor-date-picker';

날짜를 선택하세요

const result = await DatePicker.present({
  mode: 'date',
  date: '2026-05-27',
  min: '2026-01-01',
  max: '2026-12-31',
  format: 'yyyy-MM-dd',
  title: 'Select date',
});

console.log(result.value);

시간을 선택하세요

const result = await DatePicker.present({
  mode: 'time',
  is24h: true,
  minuteStep: 15,
  format: 'HH:mm',
  title: 'Select time',
});

console.log(result.value);

날짜와 시간 선택

const result = await DatePicker.present({
  mode: 'dateAndTime',
  date: '2026-05-27T14:30:00',
  format: "yyyy-MM-dd'T'HH:mm:ss",
  title: 'Select date and time',
});

날짜 선택

const result = await DatePicker.present({
  mode: 'yearAndMonth',
  date: '2026-05-01',
  format: 'yyyy-MM',
  title: 'Select month',
});

시간 선택

const range = await DatePicker.presentRange({
  start: '2026-05-01',
  end: '2026-05-27',
  format: 'yyyy-MM-dd',
  startTitle: 'Start date',
  endTitle: 'End date',
});

console.log(range.start, range.end, range.value);

숨기기

await DatePicker.hide();

플랫폼 옵션

await DatePicker.present({
  mode: 'date',
  date: '2026-05-27',
  title: 'Select date',
  ios: {
    style: 'inline',
    theme: 'light',
  },
  android: {
    theme: 'light',
  },
});

일반 옵션

옵션	설명
`mode`	`date`, `time`, `dateAndTime`, `yearAndMonth`, `countDownTimer`, 또는 `range`.
`date`	기본 선택 값.
`min` / `max`	선택 가능한 최소 및 최대 값.
`format`	출력 형식. ISO, Java/Unicode 및 일반 Moment-style 형식이 지원됩니다.
`title`	대화 상자 제목.
`locale`	국가/지역을 사용하는 원시 선택기에서 지원되는 경우 사용되는 지역.
`timezone`	파싱 및 형식화에 사용되는 시간대.
`is24h`	24시간 형식이 선호됩니다.
`minuteStep`	시간 선택기 분 간격.
`doneText` / `cancelText`	사용자 정의 액션 레이블.

예제 앱

저장소에는 Capacitor 예제 앱이 포함되어 있으며, 원시 날짜 선택기, 시간 선택기, 범위 선택기를 열어줍니다. hide()와 플러그인 버전 호출.

iOS	안드로이드

@API 참조

@API의 전체 참조는 패키지 README 및 TypeScript 정의에서 유지됩니다.