pikaday-angular is a directive wraper that aims to make using Pikaday with AngularJS as simple as possible. Examples →
WARNING! This lib was made for a very old version of Angular.JS (v1.3.15) and, unfortunately, I no longer have time to maintain it.
How simple? - Include the module as a dependency.
angular.module('YourApp', ['pikaday'])Then use the pikaday attribute to bind the picker to a scope.
<input pikaday="myPickerObject">You now have access to Pikaday's methods from the scoped object myPickerObject.
Any of Pikaday's options can be passed to the corresponding attribute, the directive takes care of coercing the value to the proper type.*
*With the exception of function expressions, which are bound as callbacks. see: Functions
<input pikaday="myPickerObject" number-of-months="2">Optionally, you may provide a global config* object for all pickers by creating a pikadayConfigProvider.
*In-line attributes override global configs.
angular.module('YourApp')
.config(['pikadayConfigProvider', function(pikaday) {
pikaday.setConfig({
numberOfMonths: 2
});
}])Pikaday has several events you can bind callbacks to: onSelect, onOpen, onClose, onDraw, and disableDayFn. Callbacks can be passed two optional, predefined parameters in the function expression:
| Option | Type | Description |
|---|---|---|
pikaday |
Object: Pikaday | The Pikaday object for the current input |
date |
Object: Date | The current selected date, or date to be evaluated by the filter |
Example:
<!-- controller as syntax - onSelect callback -->
<input pikaday="ctrl.myPicker" on-select="ctrl.onPikadaySelect(pikaday)">
<!-- scope syntax - passing date to filter Fn -->
<input pikaday="myPicker" on-disable-day="myDateFilter(date)">Then in your controller:
angular.module('YourApp')
.controller('sampleController', function() {
// use scope.onPikadaySelect for older scope syntax
this.onPikadaySelect = function onPikadaySelect(pikaday) {
alert(pikaday.toString());
};
});You can access any of Pikaday's methods though the named scope, i.e. myPickerObject. For example, if you needed to apply a maximum date after the picker is initialised, you simply call the setMaxDate method.
angular.module('YourApp')
.controller('sampleController', function() {
this.someFunction = function () {
this.myPickerObject.setMaxDate(new Date( '01/01/2016' ));
}
});See Pikaday's documentation for a full list of available methods.
To set the language with the i18n attribute, you must create a locales object, and pass it to setConfig. This makes setting locale using the attribute i18n="de" possible. You may also want to configure Moment.js to handle formatting the output in the appropriate i18n locale. see: Moment.
.config(['pikadayConfigProvider', function(pikaday) {
var locales = {
de: {
previousMonth : 'Vorheriger Monat',
nextMonth : 'Nächster Monat',
months : ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"],
weekdays : ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"],
weekdaysShort : ["So.", "Mo.", "Di.", "Mi.", "Do.", "Fr.", "Sa."]
}
};
pikaday.setConfig({
i18n: locales.de, // sets the default language [optional]
locales: locales // required if setting the language using the i18n attribute
});
}])If you load Moment.js anywhere in your HTML, Pikaday will automatically start using Moment to parse input dates and format the pickers output. If you are using Moment.js anywhere in your document, you should* specify the format option, either in the global config or as an attribute.
*Otherwise Moment.js will use some rather counter intuitive ISO8601 compliant defaults "YYYY-MM-DDTHH:mm:ssZ".
Caveat: Whilst it's possible to specify some fancy output formats with Moment, it may have a detrimental effect on the users ability to enter a date in the input field, as Moment.js will expect the input to conform to the current format setting. See Moment's docs for clarification of some of the issues regarding date string parsing.
To get Moment.js to handle i18n output formatting, you need to load the appropriate Moment.js locale file. Moment will automatically default to the most recently loaded locale file. Explicit locale selection can be made programmatically by calling moment.locale("<key>") with the key of a loaded locale.
[npm || bower] install --save pikaday-angular
pikaday-angular is provided in a UMD wrapper, making it compatible with several build systems & preprocessors such as Browserify, see the source of the Example page to see pikaday-angular being used with Browserify & Gulp.
The coercion tests can be run after installing the required npm packages.
# From the command line:
$ npm install
$ npm test
v2.0.0: WARNING: BREAKING CHANGES
This version represents a complete rewrite of the directive with the goal of having complete support for all of Pikaday's options, both in the provider and as attributes, whilst being more maintainable in the long run. The directive no longer applies it's own defaults, instead decorating the config object only when needed. The new build should be flexible, but still simple to use.
- Clarified naming of module and provider :
- Updated to support all of Pikaday config options, functions and callbacks
- Any option can now be added via
pikadayConfigProvider - Added coercion tests
npm install; npm test - Removed all defaults (directive will only apply attributes that are present)
- Added multiple locale selection
- Updated README.md
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent