angular directive for flatpickr
npm install angular-flatpickr
An angular directive to use flatpickr.
Currently it has following capabilities
* setting init options using fp-opts attribute
* on setup callback using fp-on-setup attribute to get the created flatpickr object
There are now support for a directive based approach and a component based
* install it with npm install -S angular-flatpickr
* Add the dependency
* Component based angular 1.5+ - node_modules/angular-flatpickr/dist/ng-flatpickr-comp.js
* Directive based angular older - node_modules/angular-flatpickr/dist/ng-flatpickr.js
* Add the angular-flatpickr module in your app as shown
``js`
var module = angular.module('atApp.somemodule', [
'angular-flatpickr' // <- important
]);
* inside your parent controller or component set your default options and the post setup callback
`js
ctrl.dateOpts = {
dateFormat: 'Y-m-d',
placeholder: 'Change date..', // Default: 'Select Date..'
defaultDate: '2016-03-01 03:30:00 -0300',
onChange: function(selectedDates, dateStr, instance) {
// Do stuff on change
}
};
ctrl.datePostSetup = function(fpItem) {
console.log('flatpickr', fpItem);
}
`
##### 2 ways to use the component, first is just stating the ng-flatpickr
` html`
fp-on-setup="$ctrl.datePostSetup({
fpItem: fpItem
})">
##### The other way is if you want to set a placeholder or do something in the inside element you can use it like this
` html`
fp-on-setup="$ctrl.datePostSetup({
fpItem: fpItem
})">
##### If ng-model is stated it will set the initial date to match it
` html`
fp-opts="$ctrl.dateOpts"
fp-on-setup="$ctrl.datePostSetup({
fpItem: fpItem
})">
* inside your controller set your default options and the post setup callback
`js
$scope.dateOpts = {
dateFormat: 'Y-m-d',
placeholder: 'Change date..', // Default: 'Select Date..'
defaultDate: '2016-03-01 03:30:00 -0300',
onChange: function(selectedDates, dateStr, instance){
// Do stuff on change
}
};
$scope.datePostSetup = function(fpItem) {
console.log('flatpickr', fpItem);
}
`
` html`
ng-flatpickr
fp-opts="dateOpts"
fp-on-setup="datePostSetup(fpItem)"
ng-model="date.selectedDateObj"
data-enabletime="true">
Note: This directive doesn't watch over the fp-opts` values. For doing any changes to the flatpickr element created, use object returned from the on-setup callback
angular-flatpickr module is under MIT license see project root