@nnomadic/capacitor-datetime-picker NPM

@nnomadic/capacitor-datetime-picker

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

Installation

npm install @nnomadic/capacitor-datetime-picker
npx cap sync

Configuration

No configuration required for this plugin.

Demo

Android	iOS

Usage

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

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

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

  return value;
};

API

present(...)

present(options?: PresentOptions | undefined) => any

Open the datetime picker.

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

Only available on Android and iOS.

Param	Type
`options`	PresentOptions

Returns: any

Since: 0.0.1

Interfaces

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 on Android and iOS. Spinner options only available on Android		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
`androidTimePickerMode`	'clock' \| 'spinner'	Whether to use the spinner or clock mode for the time picker on Android. This value overwrites the `androidTimePickerMode` configuration value. Only available on Android.		5.1.0
`androidDatePickerMode`	'spinner' \| 'calendar'	Whether to use the calendar or spinner mode for the date picker on Android. This value overwrites the `androidDatePickerMode` configuration value. Only available on Android.		5.1.0

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

Credits

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

capacitor plugin native

6.0.0

1 year ago