How To Wrap The Datetimepicker Js Into Angularjs Directive
Solution 1:
I had the same issue. Here's what I ended up doing that worked well for me:
'use strict';
angular.module('frontStreetApp.directives')
.directive('psDatetimePicker', function (moment) {
var format = 'MM/DD/YYYY hh:mm A';
return {
restrict: 'A',
require: 'ngModel',
link: function (scope, element, attributes, ctrl) {
element.datetimepicker({
format: format
});
var picker = element.data("DateTimePicker");
ctrl.$formatters.push(function (value) {
var date = moment(value);
if (date.isValid()) {
return date.format(format);
}
return'';
});
element.on('change', function (event) {
scope.$apply(function() {
var date = picker.getDate();
ctrl.$setViewValue(date.valueOf());
});
});
}
};
});
Here's the HTML:
<!-- The dueDate field is a UNIX offset of the date --><inputtype="text"ng-model="dueDate"ps-datetime-pickerclass="form-control">
You can check out the gists and a bit more information in my blog post.
Solution 2:
I really struggled long with Eonasdan datetime picker. Most of the solutions published on the web work ok or not-so ok.
In the end I merged some of the solutions I have found online. I wrapped it in a working plunker: http://plnkr.co/n8L8UZ
The directive works using ng-model
in moment
format, what is more it allows two functions to be passed:
onDateChangeFunction
and onDateClickFunction
which are called respectively.
Happy using!
The directive source code:
angular
.module('plunker')
.directive('datetimepicker', [
'$timeout',
function($timeout) {
return {
require: '?ngModel',
restrict: 'EA',
scope: {
datetimepickerOptions: '@',
onDateChangeFunction: '&',
onDateClickFunction: '&'
},
link: function($scope, $element, $attrs, controller) {
$element.on('dp.change', function() {
$timeout(function() {
var dtp = $element.data('DateTimePicker');
controller.$setViewValue(dtp.date());
$scope.onDateChangeFunction();
});
});
$element.on('click', function() {
$scope.onDateClickFunction();
});
controller.$render = function() {
if (!!controller && !!controller.$viewValue) {
var result = controller.$viewValue;
$element.data('DateTimePicker').date(result);
}
};
$element.datetimepicker($scope.$eval($attrs.datetimepickerOptions));
}
};
}
]);
Solution 3:
A possible solution to problem 1:
You will need to set the view value to the date that is in the model right from the beginning, by doing something like this:
if (ngModel.$viewValue) {
picker.data("DateTimePicker").setDate(new Date(ngModel.$modelValue));'
picker.on('change', function(e) {
....
});
}
Solution 4:
To complete cdmckay's solution so the datetime picker widget is correctly initialized with the ng-model's value, I've added a listener on dp.show
event. So, my solution is :
'use strict';
angular.module('frontStreetApp.directives', [])
.directive('psDatetimePicker', function (moment) {
var format = 'MM/DD/YYYY hh:mm A';
return {
restrict: 'A',
require: 'ngModel',
link: function (scope, element, attributes, ctrl) {
element.datetimepicker({
format: format
});
var picker = element.data("DateTimePicker");
ctrl.$formatters.push(function (value) {
var date = moment(value);
if (date.isValid()) {
return date.format(format);
}
return'';
});
/**
* Update datetime picker's value from ng-model when opening the datetime picker's dropdown
*/
element.on('dp.show', function() {
picker.setDate(ctrl.$viewValue);
});
/**
* Update ng-model when datetime picker's value changes
*/
element.on('change', function (event) {
scope.$apply(function () {
var date = picker.getDate();
ctrl.$setViewValue(date);
});
});
}
};
});
Solution 5:
I am also using DateTimePicker by Angular Directive and it is working fine here. I tried it in this way:
element.datetimepicker({
timepicker:false,
format:'Y-m-d',
formatDate:'Y-m-d',
closeOnDateSelect: true,
onChangeDateTime: function(dp, $input){
var val = $input['context']['value'];
ctrl.$setViewValue(val);
ctrl.$render();
scope.$apply();
}
// minDate:'-1970/01/02', // yesterday is minimum date//maxDate:'+1970/01/02' // and tommorow is maximum date calendar
});
Post a Comment for "How To Wrap The Datetimepicker Js Into Angularjs Directive"