Shards

Under the hood, datepickers in Shards are powered by the Datepicker for Bootstrap library which is provided for you inside the shards.js or shards.min.js JavaScript files.

If you’d like, you can download and include the library manually, although we recommend using the version provided by us as it’s tested and assures compatibility.

Basic Datepicker

At the most basic level in order to create the simplest datepicker component you need a simple input field.

<input type="text" class="form-control" id="datepicker-example">

<!-- JavaScript -->
<script>
    $('#datepicker-example').datepicker({});
</script>

The datepicker() method accepts a configuration object that lets you extend the way the datepicker behaves. For example, in order to generate a datepicker that displays the calendar weeks, autocloses when a date is selected and highlights the current day, you would use the following configuration:

<input type="text" class="form-control" id="datepicker-example">

<!-- JavaScript -->
<script>
  $('#datepicker-example').datepicker({
      calendarWeeks: true,
      autoclose: true,
      todayHighlight: true
  });
</script>

Ranges

You can also create datepicker ranges using two different components.

<div class="shards-demo">
  <div class="input-daterange input-group" id="datepicker-example-3">
    <input type="text" class="input-sm form-control" name="start" placeholder="Start Date" />
    <input type="text" class="input-sm form-control" name="end" placeholder="End Date" />
  </div>
</div>

<!-- JavaScript -->
<script>
  $('#datepicker-range-example').datepicker();
</script>

Make sure you check out the library official documentation to learn more about all the available datepicker configuration settings.