Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Working example of AngularJS and Bootstrap DatePicker directive? [closed]

Tags:

I've seen a variety of github directive examples, but none include a working JSFiddle and I've not been able to get any of them to work. Surprised this isn't in Angular-UI by this point.

like image 353
brushleaf Avatar asked Apr 08 '13 02:04

brushleaf


People also ask

Why bootstrap Datepicker is not working?

Because you're defining the code in the head the body and its contents haven't been loaded yet; so the selector finds no elements to initialize datepicker. If you don't want to use document. ready functionality you could also move the script to the end of the body tag.

How do I keep my Datepicker open?

You have to use . show() method to keep your dateTimePicker visible, note that all the DateTimePicker's functions are reachable via the data attribute e.g.

How Datepicker is implemented in AngularJS?

Java Script: var datePicker = angular. module('app', []); datePicker. directive('datepicker', function () { return { restrict: 'C', require: 'ngModel', link: function (scope, element, attrs, ngModelCtrl) { element. datepicker({ dateFormat: 'dd, MM, yy', onSelect: function (date) { scope.


1 Answers

please see this directive, a working calendar fiddle: http://jsfiddle.net/nabeezy/HB7LU/209/

myApp.directive('calendar', function () {             return {                 require: 'ngModel',                 link: function (scope, el, attr, ngModel) {                     $(el).datepicker({                         dateFormat: 'yy-mm-dd',                         onSelect: function (dateText) {                             scope.$apply(function () {                                 ngModel.$setViewValue(dateText);                             });                         }                     });                 }             };         }) 
like image 149
Joe Naber Avatar answered Oct 06 '22 00:10

Joe Naber