JSFiddle - React, Tailwind, and code Playground

by Ali Adravi

HTML

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-MfvZlkHCEqatNoGiOXveE8FIwMzZg4W85qfrfIFBfYc= sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
    
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.7.0.js"></script>        
<div ng-app="myapp" ng-controller='mainCtrl'>
    <h3>Angularjs Bootstrap Datepicker</h3>
    <div class="row col-sm-12">
        <div class="form-group">
           <div class="input-group date col-sm-4" id="datetimepicker1">
                <input type="text" 
                       ng-model='model.dob'
                       is-open='isOpen.dob'
                       datepicker-popup="MM/dd/yyyy"
                      datepicker-options="dateOptions"
                       ng-click='isOpen.dob = !isOpen.dob'
                       class="form-control" 
                       placeholder="Date of birth">
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"
                        ng-click='isOpen.dob = !isOpen.dob'></span>
                </span>
            </div>
        </div>
     </div>

    <div class="row">
        <div class="col-sm-6">
                <div class="input-group date col-sm-8" id="datetimepicker1">
                    <input type="text" class="form-control" placeholder="Start Date">
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
        </div>
         <div class="col-sm-6">        
             <div class="input-group date col-sm-8" id="datetimepicker1">
                 <input type="text" class="form-control" placeholder="End Date">
                 <span...

JavaScript

angular.module('myapp', ['ui.bootstrap'])
.controller('mainCtrl', ['$scope', function($scope){
  $scope.model={
      dob: '',
      startDate: '',
      endDate: ''
  };
    
    $scope.isOpen={
       dob: false,
       startDate: false,
       endDate: false
    };

}])