Thursday 27 October 2016

BootStrap datepiker different format (dd/mm/yy OR YY OR MM or MM/YY etc)

@{
  ViewBag.Title = "datepicker";
}

<h2>datepicker</h2>
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="~/Content/css/bootstrap.min.css" rel="stylesheet" />
  <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css" rel="stylesheet" />

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

  <style>
  .ui-datepicker-calendar {
  display: none;
  }


  </style>
  <script>
  $(document).ready(function () {

  $('#datePickerAll').datepicker({
  format: 'dd-mm-yyyy',
  autoclose: true
  });


  $("#datepickerYear").datepicker({
  format: " yyyy", // Notice the Extra space at the beginning
  viewMode: "years",
  minViewMode: "years",
  autoclose:true
  });

  $("#datePickerMM").datepicker({
  format: " mm", // Notice the Extra space at the beginning
  viewMode: "months",
  minViewMode: "months",
  autoclose: true
  });



  $("#datepickermmyyyy").datepicker({
  format: "mm-yyyy",
  viewMode: "months",
  minViewMode: "months",
  autoclose: true
  });


  });

  </script>

</head>
<body>
  <div class="row">
  <div class="col-md-6">
  <strong>dd/mm/yyyy</strong>
  <div class="input-group input-append date" id="datePickerAll">
  <input type="text" class="form-control" name="date" />
  <span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span>
  </div>
  </div>

  <div class="col-md-6">
  <strong>yyyy</strong>

  <div class="input-group input-append date" id="datepickerYear">
  <input type="text" class="form-control" name="date" />
  <span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span>
  </div>
  </div>
  </div>

  <div class="row">
  <div class="col-md-6">
  <strong>MM</strong>
  <div class="input-group input-append date" id="datePickerMM">
  <input type="text" class="form-control" name="date" />
  <span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span>
  </div>
  </div>

  <div class="col-md-6">
  <strong>mmyyyy</strong>

  <div class="input-group input-append date" id="datepickermmyyyy">
  <input type="text" class="form-control" name="date" />
  <span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span>
  </div>
  </div>
  </div>
</body>
</html>