Input date

Input date is a set of bootstrap components (mainly input-group and modal) to build a control that allows users to navigate in the calendar and select a date. See the example below:

From

Until

Source code

HTML JavaScript

<div class="row">
  <div class="col-12 col-md-6 col-lg-6">
    <div class="form-group">
      <label>From</label>
      <div class="input-group">
        <div class="form-control"></div>
        <div class="input-group-append">
          <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#calendar">
            <i class="icon-calendar"></i>
          </button>
        </div>
      </div>
    </div>
  </div>
  <div class="col-12 col-md-6 col-lg-6">
    <div class="form-group">
      <label>Until</label>
      <div class="input-group">
        <div class="form-control"></div>
        <div class="input-group-append">
          <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#calendar">
            <i class="icon-calendar"></i>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
<div id="calendar" class="modal modal-calendar fade" tabindex="-1" data-backdrop="static">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <div class="input-group mx-auto">
          <div class="input-group-prepend">
            <button type="button" class="btn btn-link" data-calendar-month="previous">
              <i class="icon-arrow-left"></i>
            </button>
          </div>
          <div class="input-group-prepend">
            <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown"></button>
            <div class="dropdown-menu">
              <a href="#" class="dropdown-item" data-calendar-month="0">January</a>
              <a href="#" class="dropdown-item" data-calendar-month="1">February</a>
              <a href="#" class="dropdown-item" data-calendar-month="2">March</a>
              <a href="#" class="dropdown-item" data-calendar-month="3">April</a>
              <a href="#" class="dropdown-item" data-calendar-month="4">May</a>
              <a href="#" class="dropdown-item" data-calendar-month="5">June</a>
              <a href="#" class="dropdown-item" data-calendar-month="6">July</a>
              <a href="#" class="dropdown-item" data-calendar-month="7">August</a>
              <a href="#" class="dropdown-item" data-calendar-month="8">September</a>
              <a href="#" class="dropdown-item" data-calendar-month="9">October</a>
              <a href="#" class="dropdown-item" data-calendar-month="10">November</a>
              <a href="#" class="dropdown-item" data-calendar-month="11">December</a>
            </div>
          </div>
          <input type="text" class="form-control" maxlength="4">
          <div class="input-group-append">
            <button type="button" class="btn btn-link" data-calendar-month="next">
              <i class="icon-arrow-right"></i>
            </button>
          </div>
        </div>
      </div>
      <div class="modal-body">
        <table class="table-calendar">
          <thead>
            <tr>
              <th>Su</th>
              <th>Mo</th>
              <th>Tu</th>
              <th>We</th>
              <th>Th</th>
              <th>Fr</th>
              <th>Sa</th>
            </tr>
          </thead>
        </table>
        <div class="text-center">
          <button type="button" class="btn btn-link" data-calendar-link="today">
            <i class="icon-clock"></i> today
          </button>
          <button type="button" class="btn btn-link" data-calendar-link="selected">
            <i class="icon-check"></i> selected
          </button>
        </div>
      </div>
      <div class="modal-footer">
        <button id="btnApply" type="button" class="btn btn-primary" data-dismiss="modal">
          Apply
        </button>
        <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
          Cancel
        </button>
      </div>
    </div>
  </div>
</div>

var $calendar = $('#calendar');
var $btnApply = $('#btnApply')

$calendar.on('show.bs.modal', function (e) {
  var $formControl = $(e.relatedTarget)
    .closest('.form-group')
    .find('.form-control');

  $btnApply.prop('target', $formControl);
  $calendar.calendar('date', $formControl.prop('date') || new Date());
});

$btnApply.on('click', function () {
  var $target = $btnApply.prop('target');
  var date = $calendar.calendar('date');
  var formattedDate = moment(date).format('dddd, MMMM D, YYYY');

  $target.prop('date', date).text(formattedDate);
});

It is possible have only one calendar for the entire application if you want to.

Calendar

The calendar is displayed in a bootstrap modal and defined by the class .modal-calendar.

The navigation of the calendar is placed in the modal header. The modal body contains the current page (.table-calendar) and the calendar links (today and selected date). The buttons for confirm and cancel are placed in the modal footer. See the basic structure below:

Source code

<div class="modal modal-calendar fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <!-- Calendar navigation -->
      </div>
      <div class="modal-body">
        <!-- Calendar current page (table) -->
        <!-- Calendar links (today and selected date) -->
      </div>
      <div class="modal-footer">
        <!-- Buttons for confirm and cancel -->
      </div>
    </div>
  </div>
</div>

Calendar header

The calendar header contains the navigation that allows the user to go to the next pages or to the previous pages of the calendar. Also, the user can select a month in the dropdown or type the desired year. See the example below:

Source code

<div class="input-group mx-auto">
  <div class="input-group-prepend">
    <button type="button" class="btn btn-link" data-calendar-month="previous">
      <i class="icon-arrow-left"></i>
    </button>
  </div>
  <div class="input-group-prepend">
    <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown"></button>
    <div class="dropdown-menu">
      <a href="#" class="dropdown-item" data-calendar-month="0">January</a>
      <a href="#" class="dropdown-item" data-calendar-month="1">February</a>
      <a href="#" class="dropdown-item" data-calendar-month="2">March</a>
      <a href="#" class="dropdown-item" data-calendar-month="3">April</a>
      <a href="#" class="dropdown-item" data-calendar-month="4">May</a>
      <a href="#" class="dropdown-item" data-calendar-month="5">June</a>
      <a href="#" class="dropdown-item" data-calendar-month="6">July</a>
      <a href="#" class="dropdown-item" data-calendar-month="7">August</a>
      <a href="#" class="dropdown-item" data-calendar-month="8">September</a>
      <a href="#" class="dropdown-item" data-calendar-month="9">October</a>
      <a href="#" class="dropdown-item" data-calendar-month="10">November</a>
      <a href="#" class="dropdown-item" data-calendar-month="11">December</a>
    </div>
  </div>
  <input type="text" class="form-control" maxlength="4">
  <div class="input-group-append">
    <button type="button" class="btn btn-link" data-calendar-month="next">
      <i class="icon-arrow-right"></i>
    </button>
  </div>
</div>

Calendar body

The calendar body contains the current page and allows the user to select the desired date. In addition, the body contains the links to today's date and to the selected date.

Source code

<table class="table-calendar">
  <thead>
    <tr>
      <th>Su</th>
      <th>Mo</th>
      <th>Tu</th>
      <th>We</th>
      <th>Th</th>
      <th>Fr</th>
      <th>Sa</th>
    </tr>
  </thead>
</table>
<div class="text-center">
  <button type="button" class="btn btn-link" data-calendar-link="today">
    <i class="icon-clock"></i> today
  </button>
  <button type="button" class="btn btn-link" data-calendar-link="selected">
    <i class="icon-check"></i> selected
  </button>
</div>

Calendar footer

The calendar footer contains the buttons to confirm or cancel the selected date. See the example below:

Source code

<button type="button" class="btn btn-primary" data-dismiss="modal">
  Apply
</button>
<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
  Cancel
</button>

Options

Options can be passed via data attributes:

Option	Type	Description
`data-calendar-link`	string	Navigates directly to the calendar page: `today` or `selected` (selected date).
`data-calendar-month`	string\|number	The month for which it will be navigated: `0..11` (January to December), `previous` or `next`.

By design these attribute options only work for children of a .modal-calendar.

Methods

A few methods are available to control the calendar:

Method	Description
`calendar('date')`	Gets the selected date.
`calendar('date', myDate)`	Sets the selected date (automatically queries the selected date). Triggers the events `calendar:change` and `calendar:query`.
`calendar('query:date')`	Gets the queried date (does not reflect the selected date).
`calendar('query:date', myDate)`	Sets the queried date (recalculates the calendar page). Triggers the event `calendar:query`.
`calendar('query:nextMonth')`	Go to next month. Triggers the event `calendar:query`.
`calendar('query:nextYear')`	Go to next year. Triggers the event `calendar:query`.
`calendar('query:previousMonth')`	Go to previous month. Triggers the event `calendar:query`.
`calendar('query:previousYear')`	Go to previous year. Triggers the event `calendar:query`.

Events

Events triggered from the calendar can be listened to write custom logic:

Event	Description
`calendar:change`	Triggered after select a date.
`calendar:each`	Triggered for each date while loading the calendar page.
`calendar:query`	Triggered after querying the date.

Source code

$modalCalendar.on('calendar:change', function (e, date) {
  console.log('Selected date: ' + date);
});

$modalCalendar.on('calendar:each', function (e, date) {
  console.log('Anchor tag: ' + e.relatedTarget); // Only for dates in the queried month and year
  console.log('Current date: ' + date);
});

$modalCalendar.on('calendar:query', function (e, date) {
  console.log('Queried date' + date);
});