current date picker

by Joe

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>

SCSS

body {
  margin-top: 40px;
}

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

JavaScript

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);