Search This Blog


Wednesday, February 6, 2013

[AngularJS] datepicker with jQuery

The best way to implement a dtaepicker on website, in my opinion, is through HTML5 input tag with type=date. This input type, however, is not well-supported. AngularJS is a very promising extension for HTML, so I did some study on how to implement datepicker with AngularJS. The easiest way is to combine AngularJS directive and jQuery datepicker. The following is complete source code:

<!DOCTYPE html>
<html ng-app="myApp">

<title>datepicker with AngularJS and jQuery</title>
<link rel="stylesheet" href="" />

<body ng-controller="myCtrl">

<input type="text" ng-model="date" datepicker/>

<script src=""></script>
<script src=""></script>
<script src=""></script>
angular.module('myApp', []).directive('datepicker', function($parse) {
  var directiveDefinitionObject = {
    restrict: 'A',
    link: function postLink(scope, iElement, iAttrs) {
        dateFormat: 'yy-mm-dd',
        onSelect: function(dateText, inst) {
            $parse(iAttrs.ngModel).assign(scope, dateText);
  return directiveDefinitionObject;

function myCtrl($scope) {
  $ = "1212-12-12"

The source code is also available here, and demo is here.

[1] AngularJS: Directives
[2] Datepicker Widget | jQuery UI API Documentation
[3] jsFiddle demo