Using AngularJS Bootstrap Datepicker

A simple implementation of datepicker using AngularJs Boostrap.


<!DOCTYPE html>
<html ng-app="app">
        <script src=""></script>
        <script src=""></script>
        <script src="datepicker.js"></script>
        <link href="" rel="stylesheet">
    <body ng-controller="DatepickerDemoCtrl" style="padding-top: 50px">
        <div class="container">
            <div class="row">
                <div class="col-md-3">
                    <p class="input-group">
                      <input type="text" class="form-control" datepicker-popup="dd-MMMM-yyyy" ng-model="dt" is-open="opened" min-date="minDate" max-date="maxDate" datepicker-options="dateOptions" ng-required="true" show-button-bar="false"/>
                      <span class="input-group-btn">
                        <button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>


var app = angular.module('app', ['ui.bootstrap']); 

app.controller('DatepickerDemoCtrl', function ($scope) {
  $scope.dt = new Date();
  $scope.minDate = new Date();

  $scope.maxDate =  new Date();
  $scope.maxDate.setMonth($scope.maxDate.getMonth() + 1); 

  $scope.dateOptions = {
    startingDay: 1,
    showWeeks: false
  $scope.opened = false;

  $ = function($event) {
    $scope.opened = !$scope.opened;

app.directive('datepickerPopup', function (){
  return {
    restrict: 'EAC',
    require: 'ngModel',
    link: function(scope, element, attr, controller) {
      //remove the default formatter from the input directive to prevent conflict


  • Used a custom directive ‘datepickerPopup’ taken from here so that default date would have correct display formatting
  • Unsure why it’s not working when local files are used, so instead CDN files are referenced. Will find out why? :)