Bootstrap 3 Template

This is a simple Twitter Bootstrap 3 template. You can fork it to get a ready to use Bootstrap 3 fiddle.

by gangadharjannu

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<link rel="stylesheet" href="https://uxsolutions.github.io/bootstrap-datepicker/bootstrap-datepicker/css/bootstrap-datepicker3.min.css">
<script src="https://uxsolutions.github.io/bootstrap-datepicker/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div id="myApp" ng-controller="MyController">
  {{msg}}
  <div class="form-group">
    <label>Model Production Date</label>
    <input date-picker1 type="text" class="form-control" placeholder="Production Date" ng-model="productionDate">
  </div>
  <div class="form-group">
    <label>Next Review Date</label>
    <input date-picker2 type="text" class="form-control" placeholder="Next Review Date" ng-model="nextReviewDate">
  </div>
</div>

CSS

/* Latest compiled and minified CSS included as External Resource*/


/* Optional theme */


/*@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');*/

body {
  margin: 10px;
}

JavaScript

angular.module("myApp", []);
  angular
    .module("myApp")
    .controller("MyController", function() {
      var vm = this;
      vm.msg = "hiiii";
    })
    .directive('datePicker1', function() {
      return function(scope, element, attrs) {
        element.datepicker({
          format: "yyyy/mm/dd",
          todayHighlight: true,
          autoclose: true
        });
        scope.$evalAsync(function() {
          scope['productionDate'] = element.val();
        });
      };
    })
    .directive('datePicker2', function() {
      return {
        restrict: 'A',
        link: linker,
      }

      function linker(scope, $element, attrs) {
        $element.datepicker({
          format: "yyyy/mm/dd",
          todayHighlight: true,
          autoclose: true
        });
        var oneYearFromNow = null;
        scope.$watch('productionDate', function(newVal, oldVal) {
          if (newVal) {
            oneYearFromNow = (parseInt(newVal.split("/")[0], 10) + 1) + newVal.slice(4);
            $element.datepicker('setStartDate', newVal);
            $element.datepicker('setEndDate', oneYearFromNow);
            $element.datepicker('update');
          }
        });
      };
    });

  angular.bootstrap(document.getElementById("myApp"), ['myApp']);