Skip to content

Instantly share code, notes, and snippets.

@Yeswanth-JG
Forked from HasAndries/gist:3135128
Last active April 22, 2016 17:38
Show Gist options
  • Save Yeswanth-JG/6d10ac92353a8d364b65f77cf36bf36d to your computer and use it in GitHub Desktop.
Save Yeswanth-JG/6d10ac92353a8d364b65f77cf36bf36d to your computer and use it in GitHub Desktop.
angularjs directive for bootstrap datepicker : eternicode/bootstrap-datepicker
angular.module('bDatepicker', []).
directive('bDatepicker', function () {
return {
require: '?ngModel',
restrict: 'A',
link: function ($scope, element, attrs, controller) {
options = angular.fromJson(attrs.bDatepicker); //taking options from the element attribute
var defaultOpts = {
format: 'dd/mm/yyyy',
todayHighlight: true
};
options=options||defaultOps;
var updateModel;
updateModel = function (ev) { //update the Date Picker
element.datepicker('hide');
element.blur();
return $scope.$apply(function () {
return controller.$setViewValue(ev.date);
});
};
if (controller != null) {
controller.$render = function () {
element.datepicker(options).data().datepicker.date = controller.$viewValue;
element.datepicker('setValue');
element.datepicker('update');
return controller.$viewValue;
};
}
return attrs.$observe('bDatepicker', function (value) {
return $(element).datepicker(options).on('changeDate', updateModel);
});
}
};
});
@Yeswanth-JG
Copy link
Author

Yeswanth-JG commented Apr 22, 2016

Use like:

<input b-datepicker="{{dateOptions}}" ng-model="dateObject" >

$scope.dateOptions = {format: 'dd/mm/yyyy'}
This works with angular v1.0.0 and bootstrap v2.0.4
The Datepicker is here: Eternicode-Bootstrap-Datepicker

or

github-page

Optimized for simple input-text toggle. Optimizing is needed for accepting other markups.

Thanks to Novi:
novi-GIST

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment