Datepicker

by Rohit Bisht

HTML

<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://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
    
    <div class="section">
      <div class="container-fluid">
        <div class="row">
          <div class="col-md-12 col-sm-12">
            <div class="row text-center">
              <h3>Dashboard</h3>
            </div>
            <div class="row text-center">
              <div class="col-md-6 col-sm-6 text-center">
                <div class="row">Select Dashboard</div>
                <div class="col-md-12 col-sm-12 text-center">
                  <select style="width:60%;" class="text-center">
                    <option value="audi" selected="" disabled="">Select</option>
                    <option value="one">one</option>
                    <option value="two">two</option>
                    <option value="three">three</option>
                  </select>
                </div>
              </div>
              <div class="col-md-3 col-sm-3 text-center">
                <div class="row">From</div>
                <div class="col-md-12 col-sm-12 text-center">
                  <div class="inner-addon right-addon">
                    <i class="glyphicon glyphicon-calendar"></i>
                    <input class="text-center form-control date fromDate" type="text" placeholder="dd/mm/yyy" id="fromDate" style="height:20px;">
                  </div>
                </div>
              </div>
              <div class="col-md-3 col-sm-3 text-center">
                <div class="row">To</div>
                <div...

CSS

/* enable absolute positioning */
    .inner-addon {
      position: relative;
    }
    
    /* style glyph */
    .inner-addon .glyphicon {
      position: absolute;
      padding: 3px;
      pointer-events: none;
    }
    
    /* align glyph */
    .left-addon .glyphicon  { left:  0px;}
    .right-addon .glyphicon { right: 0px;}
    
    /* add padding  */
    .left-addon input  { padding-left:  30px; }
    .right-addon input { padding-right: 30px; }

JavaScript

$(document).ready(function () {
      		$('#fromDate').datepicker({
                    format: "dd/mm/yyyy",
                    //startDate: '+1d',
                    endDate: 'd',
              		showOn: "both", 
			}).on('changeDate', function (selected) {
        var minDate = new Date(selected.date.valueOf());
        $('#toDate').datepicker('setStartDate', minDate);
    });
        	$('#toDate').datepicker({
                    format: "dd/mm/yyyy",
                    //startDate: '+1d',
                    endDate: 'd',
              		
			});
      		$('.date').on('changeDate', function(ev){
      			$(this).datepicker('hide');
      		});
      	});