시작하기
설치 단계와 이 플러그인의 전체 마크다운 가이드를 포함한 설정 프롬프트 복사
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 도구에 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-pickernpx cap syncImport
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);시간을 선택하세요
Section titled “시간을 선택하세요”const result = await DatePicker.present({ mode: 'time', is24h: true, minuteStep: 15, format: 'HH:mm', title: 'Select time',});
console.log(result.value);Pick Date And Time
Section titled “날짜와 시간을 선택하세요”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',});Pick A Month
Section titled “월을 선택하세요”const result = await DatePicker.present({ mode: 'yearAndMonth', date: '2026-05-01', format: 'yyyy-MM', title: 'Select month',});Pick A Range
Section titled “범위 선택”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 | 해당 지역의 시간대가 파싱 및 형식화에 사용됩니다. |
minuteStep | 24시간 시간을 선호합니다. |
doneText / cancelText | 시간 선택기 분 간격. |
사용자 정의 액션 레이블.
예제 앱The repository includes a Capacitor example app that opens the native date picker, time picker, range picker, hide()__CAPGO_KEEP_0__ 예제 앱이 포함되어 있습니다. 이 앱은 네이티브 날짜 선택기, 시간 선택기, 범위 선택기, 및 플러그인 버전 호출을 열어줍니다.
| iOS | Android |
|---|---|
![]() | ![]() |
API 참조
API 참조API의 전체 참조는 패키지 README와 TypeScript 정의에서 유지됩니다.

