Skip to content
This repository has been archived by the owner on Apr 2, 2023. It is now read-only.

capawesome-team/capacitor-datetime-picker

Repository files navigation

⚠️ Deprecated repository

This project has been moved to the following monorepo: capawesome-team/capacitor-plugins.



Datetime Picker

@capawesome-team/capacitor-datetime-picker

Capacitor plugin that let the user easily enter both a date and a time.


Maintainers

Maintainer GitHub Social
Robin Genz robingenz @robin_genz

Demo

A working example can be found here: robingenz/capacitor-plugin-demo

Android iOS

Installation

If you are an Insider, see Getting started with Insiders and follow the instructions to install the plugin.

If you are not an Insider, please install the package from the public npm registry:

npm install @capawesome-team/capacitor-datetime-picker
npx cap sync

Configuration

No configuration required for this plugin.

Usage

import { DatetimePicker } from '@capawesome-team/capacitor-datetime-picker';

const present = async () => {
  const date = new Date('1995-12-24T02:23:00');

  const { value } = DatetimePicker.present({
    cancelButtonText: 'Cancel',
    doneButtonText: 'Ok',
    mode: 'time',
    value: date.toISOString(),
    theme: 'dark',
    locale: 'en-US',
  });

  return value;
};

API

present(...)

present(options?: PresentOptions | undefined) => Promise<PresentResult>

Open the datetime picker.

An error is thrown if the input is canceled or dismissed by the user.

Only available for Android and iOS.

Param Type
options PresentOptions

Returns: Promise<PresentResult>

Since: 0.0.1


Interfaces

PresentResult

Prop Type Description Since
value string The value entered by the user. The format of this value matches the value of the format parameter. 0.0.1

PresentOptions

Prop Type Description Default Since
cancelButtonText string The cancel button text. 'Cancel' 0.0.1
doneButtonText string The done button text. 'Ok' 0.0.1
format string The format in which values are received and returned. 'yyyy-MM-dd'T'HH:mm:ss.sss'Z'' 0.0.1
locale string BCP 47 language tag to define the language of the UI. 0.0.2
max string The latest date and time to accept. The format of this value must match the value of the format parameter. This value must specify a date string later than or equal to the one specified by the min attribute. 0.0.1
min string The earliest date and time to accept. The format of this value must match the value of the format parameter. This value must specify a date string earlier than or equal to the one specified by the max attribute. 0.0.1
mode 'date' | 'time' | 'datetime' Whether you want a date or time or datetime picker. 'datetime' 0.0.1
theme 'auto' | 'light' | 'dark' Choose the theme that the datetime picker should have. With auto the system theme is used. This value overwrites the theme configuration value. Only available for Android and iOS. 0.0.1
value string The predefined value when opening the picker. The format of this value must match the value of the format parameter. 0.0.1

Credits

The iOS implementation of this plugin is based on RPicker which is licensed under MIT.

Changelog

See CHANGELOG.md.

License

See LICENSE.