Date and/or time picker for awesome Ionic framework v1
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 :)
Looking for a picker that works with Ionic framework v2?
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 and classes
- Configure i18n to get weekdays and months in your language
- Configure size of a step
Demo app is available - enter code 8d75a0ec
into Ionic View.
Live demo is available on Codepen.
#Screenshots
-
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"]);
Put the ion-datetime-picker
directive alongside the ng-model
wherever you want to tap to show the picker:
<ion-list>
<div class="item" ion-datetime-picker ng-model="datetimeValue">
{{datetimeValue| date: "yyyy-MM-dd H:mm:ss"}}
</div>
</ion-list>
It is not possible to use <ion-item>
until #18 is fixed.
Choose which picker type is used. When neither is set, I assume both and use the datetime picker.
Set this if you want to have Monday as the first day of a week.
By default, in the time picker, I allow to change only hours and minutes. Set this attribute to use also seconds.
By default, in the time picker, I use 24-hour clock. Set this attribute to change it to 12-hour clock.
By default, when any caret button is tapped, I add or subtract 1 particular unit. Set these attributes to change it to anything you want.
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.
Configure the text of buttons at the bottom of the picker.
Disable/Enable calendar days according to type and date range specified.
only-valid="{'after': '2016-04-09'}"
only-valid="{'after': 'today', 'inclusive': true}"
only-valid="{'outside': {'initial': '2016-04-09', 'final': '2016-06-15'}, 'inclusive': true}"
Types supported: 'after'
, 'before'
, 'between'
and 'outside'
. If you want to include the day specified, set 'inclusive'
property to true
.
Simple internationalization & customization options. Inject the $ionicPickerI18n
factory into your code and set the localized strings and button classes.
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.
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.
Default, global labels of the buttons at the bottom of the picker.
Custom space-delimited classes applied to 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";
$ionicPickerI18n.okClass = "button-positive";
$ionicPickerI18n.cancelClass = "button-stable";
});
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.