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:

Source code
<div class="card">
  <div class="card-body">
    <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="fa fa-calendar-check-o"></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="fa fa-calendar-check-o"></i>
              </button>
            </div>
          </div>
        </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">
        <button type="button" class="btn btn-shadow text-primary" data-calendar-month="previous">
          <i class="fa fa-angle-left"></i>
        </button>
        <div class="dropdown">
          <button type="button" class="btn 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="number" class="form-control" pattern="[0-9]*" maxlength="4">
        <button type="button" class="btn btn-shadow text-primary" data-calendar-month="next">
          <i class="fa fa-angle-right"></i>
        </button>
      </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="fa fa-clock-o"></i> today
          </button>
          <button type="button" class="btn btn-link" data-calendar-link="selected">
            <i class="fa fa-check-circle-o"></i> selected
          </button>
        </div>
      </div>
      <div class="modal-footer">
        <button id="btnApplyDate" type="button" class="btn btn-primary" data-dismiss="modal">
          Apply
        </button>
        <button type="button" class="btn btn-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
<button type="button" class="btn text-primary" data-calendar-month="previous">
  <i class="fa fa-angle-left"></i>
</button>
<div class="dropdown">
  <button type="button" class="btn 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="number" class="form-control" pattern="[0-9]*" maxlength="4">
<button type="button" class="btn text-primary" data-calendar-month="next">
  <i class="fa fa-angle-right"></i>
</button>

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="fa fa-clock-o"></i> today
  </button>
  <button type="button" class="btn btn-link" data-calendar-link="selected">
    <i class="fa fa-check-circle-o"></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

Options

Options can be passed via data attributes.

Options
OptionTypeDescription
data-calendar-linkstringNavigates directly to the calendar page: today or selected (selected date).
data-calendar-monthstring|numberThe 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.

Methods
MethodDescription
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.

Events
EventDescription
calendar:changeTriggered after select a date.
calendar:eachTriggered for each date while loading the calendar page.
calendar:queryTriggered 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);
});