ion-datetime-picker

Date and/or time picker for awesome Ionic framework

Introduction

I made this component because of poor implementation of native datetime picker in Android webview. How funny it was when I discovered that I can only pick a time between 0:00 and 11:59 on my 24-hour clock phone :)

Features

The ion-datetime-picker component has these features:

Make Date picker, Time picker, Datetime picker
Choose Sunday or Monday as the first day of the week
Use 12-hour or 24-hour clock
Pick time with or without seconds
Configure popup title and button labels
Configure i18n to get weekdays and months in your language

Demo

Demo app is available - enter code 8d75a0ec into Ionic View. Live demo is available on Codepen.

#Screenshots

Installation

Use bower to install the new module:

bower install ion-datetime-picker --save

Import the ion-datetime-picker javascript and css file into your HTML file (or use wiredep):

<script src="lib/ion-datetime-picker/release/ion-datetime-picker.min.js"></script>
<link href="lib/ion-datetime-picker/release/ion-datetime-picker.min.css" rel="stylesheet">

Add ion-datetime-picker as a dependency on your Ionic app:

angular.module("myApp", ["ionic", "ion-datetime-picker"]);

Usage

Put the ion-datetime-picker directive alongside the ng-model wherever you want to tap to show the picker:

<ion-list>
    <ion-item ion-datetime-picker ng-model="datetimeValue">
        {{datetimeValue| date: "yyyy-mm-dd H:mm:ss"}}
    </ion-item>
</ion-list>

Configuration attributes

`date` and `time` attributes

Choose which picker type is used. When neither is set, I assume both and use the datetime picker.

`monday-first` attribute

Set this if you want to have Monday as the first day of a week.

`seconds` attribute

By default, in the time picker, I allow to change only hours and minutes. Set this attribute to use also seconds.

`am-pm` attribute

By default, in the time picker, I use 24-hour clock. Set this attribute to change it to 12-hour clock.

`title` and `sub-title` attributes

Configure the title and sub title of the popup with the picker.

HINT: Use data-title instead of title if you are going to use the app in the desktop browser to prevent leaking of the text into a mouseover tooltip.

`button-ok` and `button-cancel` attributes

Configure the text of buttons at the bottom of the picker.

Internationalization factory

Simple internationalization option. Inject the $ionicPickerI18n factory into your code and set the localized strings.

`weekdays` key

Array of weekdays abbreviations. 0 is Sunday. If moment is installed, I try to get localized data from it, otherwise English ones are used as default.

`months` key

Array of months names. 0 is January. If moment is installed, I try to get localized data from it, otherwise English ones are used as default.

`ok` and `cancel` keys

Default, global labels of the buttons at the bottom of the picker.

angular.module("myApp")
    .run(function($ionicPickerI18n) {
        $ionicPickerI18n.weekdays = ["Нд", "Lu", "Út", "Mi", "To", "금", "Sá"];
        $ionicPickerI18n.months = ["Janvier", "Febrero", "März", "四月", "Maio", "Kesäkuu", "Červenec", "अगस्त", "Вересень", "Październik", "Νοέμβριος", "డిసెంబర్"];
        $ionicPickerI18n.ok = "オーケー";
        $ionicPickerI18n.cancel = "Cancelar";
    });

Daylight saving time

The datetime picker is using Date object with your browser's timezone, including any DST. When you change the date, hour, minute, or second, which sets the time to an invalid value because of moving from 2:00 to 3:00 at the beginning of DST, the time is automatically adjusted to a valid value. On the other hand, when the DST ends, I do NOT take the inserted hour into consideration, but this may be fixed in the future.

diankhismaw / ion-datetime-picker Goto Github PK