AngularJS + bootstrap-datepicker

by Bhabani Raju

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
<div class="container">

  <div ng-app="myApp" ng-controller="my-ctrl">
    <pre>{{test.date}}</pre>
    <br />
    <pre>{{test|json}}</pre>
    <br />

    <p>
      Date:
      <input type="text" class="date" ng-model="test.date" data-provide="datepicker" />
    </p>
    <button ng-click="setDate('2000-01-01')">
      set date "2000-01-01"
    </button>
  </div>
</div>

JavaScript

//



$(document).ready(function() {

  $(".date").datepicker({
    format: "yyyy-mm-dd",
    daysOfWeekHighlighted: "0,6",
    todayHighlight: true,
    autoclose: true
  });
});

var myApp = angular
  .module('myApp', [])
  .controller('my-ctrl', function($scope) {
    $scope.test = {};
    
    $scope.setDate = function(p) {
      console.log($scope.test.date);
      $scope.test= {'date' : p};
      console.log($scope.test.date);
    };
  });

/*
https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js
https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css

*/