Bootstrap Datepicker - Set Current Date as Selectet

bootstrap-datepicker-set-current-date-as-selectet.markdown

Bootstrap Datepicker - Set Current Date as Selectet

A Pen by gearmobile on CodePen.

License.

index.html

<div class="container">
  <div class="row">
		<div class="col-md-12">
			 <form method="post">

				  <!--simple-->
				  <div id="sandbox" class="form-group">
						<label for="simple">Date</label>
						<input id="simple" type="text" class="form-control" value="">
				  </div>

				  <!--component-->
				  <div class="form-group">
						<div class="input-group date" id="datePicker">
							 <input type="text" class="form-control" name="date" value="">
							 <span class="input-group-addon">
								  <i class="glyphicon glyphicon-calendar"></i>
							 </span>
						</div>
				  </div>
				  <button type="submit" class="btn btn-default">Submit</button>
			 </form>
		</div>
  </div>
</div>

<div class="container">
  <div class="row">
		<div class="col-lg-12">
			 <div class="panel">
				  <fieldset>
						<div class="form-group" id="box1">
							 <label for="datepicker1">Date 1</label>
							 <input type="text" class="form-control" id="datepicker1" value="">
						</div>
				  </fieldset>
				  <fieldset>
						<div class="form-group" id="box2">
							 <label for="datepicker2">Date 2</label>
							 <input type="text" class="form-control" id="datepicker2" value="">
						</div>
				  </fieldset>
			 </div>
		</div>
  </div>
</div>

script.js

var date = new Date();
var today = new Date(date.getFullYear(), date.getMonth(), date.getDate());

var optSimple = {
  format: 'mm-dd-yyyy',
  todayHighlight: true,
  orientation: 'bottom right',
  autoclose: true,
  container: '#sandbox'
};

var optComponent = {
  format: 'mm-dd-yyyy',
  container: '#datePicker',
  orientation: 'auto top',
  todayHighlight: true,
  autoclose: true
};

// SIMPLE
$( '#simple' ).datepicker( optSimple );

// COMPONENT
$( '#datePicker' ).datepicker( optComponent );

// ===================================

$( '#datepicker1' ).datepicker({
  format: "mm : dd : yyyy",
  todayHighlight: true,
  autoclose: true,
  container: '#box1',
  orientation: 'top right'
});

$( '#datepicker2' ).datepicker({
  format: 'mm \\ dd \\ yyyy',
  todayHighlight: true,
  autoclose: true,
  container: '#box2',
  orientation: 'top right'
});

$( '#datepicker1, #datepicker2, #simple, #datePicker' ).datepicker( 'setDate', today );

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

style.scss

body {
	margin-top: 40px;
}

.container {
	margin-bottom: 60px;
	border: 1px solid rgba( 0,0,0, .4 );
	padding: 40px;
	border-radius: 6px;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker3.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.min.css" rel="stylesheet" />