-
-
Save HasAndries/3135128 to your computer and use it in GitHub Desktop.
angular.module('bDatepicker', []). | |
directive('bDatepicker', function(){ | |
return { | |
require: '?ngModel', | |
restrict: 'A', | |
link: function($scope, element, attrs, controller) { | |
var updateModel; | |
updateModel = function(ev) { | |
element.datepicker('hide'); | |
element.blur(); | |
return $scope.$apply(function() { | |
return controller.$setViewValue(ev.date); | |
}); | |
}; | |
if (controller != null) { | |
controller.$render = function() { | |
element.datepicker().data().datepicker.date = controller.$viewValue; | |
element.datepicker('setValue'); | |
element.datepicker('update'); | |
return controller.$viewValue; | |
}; | |
} | |
return attrs.$observe('bDatepicker', function(value) { | |
var options; | |
options = {}; | |
if (angular.isObject(value)) { | |
options = value; | |
} | |
if (typeof(value) === "string" && value.length > 0) { | |
options = angular.fromJson(value); | |
} | |
return element.datepicker(options).on('changeDate', updateModel); | |
}); | |
} | |
}; | |
}); |
This works great, but I noticed that when I manually enter an invalid date and lose focus, the date is not corrected, and next time I focus the input, the browser can hang!
@ejain https://gist.github.com/danbarua/5356062 <-- handles user entering invalid dates manually
This has been working quite well, except for a few things.
- When clicking on the input and then off, a date will still be put in the field rather than leaving it blank.
- How to set it to an initial date value? I tried "{ date: '1/1/2013' }" but it would not show it on the view.
+1 Would be really nice if options were working as set here: b-datepicker="{{dateOptions}}"
Awesome post!! It might help you!
http://stackoverflow.com/questions/29389873/angularjs-custom-datepicker-directive
http://goo.gl/kLcijT
@bluee did you ever have any luck getting options to work?
Check My Fork GIST
Check my simplified fork using momentjs and ES6 modules https://gist.github.com/MrSpider/a9c00eb652e4ed5e7c8cff5759f7438a
Use like:
This works with angular v1.0.0 and bootstrap v2.0.4
The Datepicker is here: http://www.eyecon.ro/bootstrap-datepicker/ or https://github.com/eternicode/bootstrap-datepicker/
Thanks to Novi:
https://gist.github.com/3103533