Flatpickr

Lightweight and powerful datetime picker.

Official documentation

For more detailed information and examples, see the official documentation: Flatpickr documentation.

How to use?

To add hs.flatpickr.js in your page, wrap any block in a parent element with an ID or class and add the same ID or the class in the JS init function of the plugin.

Copy-paste the stylesheet <link> into your <head> to load the CSS.

<link rel="stylesheet" href="../../assets/vendor/flatpickr/dist/flatpickr.min.css">

Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.

<script src="../../assets/vendor/flatpickr/dist/flatpickr.min.js"></script>

Copy-paste the following <script> near the end of your pages under JS Nova to enable it.

<script src="../../assets/js/components/hs.flatpickr.js"></script>

Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.

<script>
  $(document).on('ready', function () {
    // initialization of datepicker
    $.HSCore.components.HSFlatpickr.init('.js-datepicker');
  });
</script>

Basic example

Basic example that highlights today's day.

Result
HTML

<div class="input-group">
  <input type="text" class="form-control js-datepicker" placeholder="Select dates">
</div>

With value

Use value="21/06/2019"

Result
HTML

<div class="input-group">
  <input type="text" class="js-datepicker form-control" value="21/06/2019">
</div>

With arrow

Use .input-group-merge with .input-group-prepend-merge or .input-group-append-merge with data-toggle attribute

Result
HTML

<div class="datepicker">
  <div class="input-group input-group-merge js-datepicker" data-rp-is-wrap="true">
    <input type="text" class="form-control form-control-append-icon" placeholder="Select dates" data-input>
    <div class="input-group-append-merge" data-toggle>
      <i class="nova-angle-down"></i>
    </div>
  </div>
</div>

With append

Use .input-group-append and .input-group-text classes

Result
HTML

<div class="input-group">
  <input type="text" id="with-append" class="js-datepicker form-control" value="21/06/2019">
  <div class="input-group-append">
    <label for="with-append" class="input-group-text">
      <i class="nova-calendar"></i>
    </label>
  </div>
</div>

Range example that shows starting and ending highlighted dates.

Uce data-rp-type="range" attribute

<div class="input-group">
  <input type="text" id="rangeDatepicker" class="form-control"
         data-rp-type="range"
         data-rp-date-format="d M Y"
         data-rp-default-date='["02 Oct 2018", "18 Oct 2018"]'>
</div>

$.HSCore.components.HSFlatpickr.init('#rangeDatepicker', {
  locale: {
      weekdays: {
          shorthand: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]
      },
      rangeSeparator: ' - '
  },
  nextArrow: '',
  prevArrow: ''
});

Selecting multiple dates

Use data-rp-type="multiple" attribute

Result
HTML

<div class="input-group">
  <input type="text" class="form-control js-datepicker" placeholder="Select Dates" data-rp-type="multiple">
</div>

Without bordered

Use .form-control-plaintext for input tag

Result
HTML

<div class="datepicker">
  <input type="text" class="js-datepicker form-control-plaintext" value="21/06/2019"
         data-input>
</div>

Inline without field

Use data-rp-is-inline="true attribute

Result
HTML

April

MoTuWeThFrSaSu

311234567891011121314151617181920212223242526272829301234567891011

<div class="datepicker">
  <input type="text" class="js-datepicker d-none form-control" placeholder="Select dates"
         data-rp-is-inline="true">
</div>

Today

April

MonTueWedThuFriSatSun

311234567891011121314151617181920212223242526272829301234567891011

<div style="width: 330px">
  <div class="mb-3">
    <h6 class="font-weight-semi-bold mb-0">Today</h6>
  </div>

  <div class="datepicker-inline position-relative mb-3">
    <input id="inlineCalendarAlt" type="text"
           data-rp-is-inline="true"
           data-rp-event-dates='["20180401", "20180403", "20180406"]'>
  </div>
</div>

<script>
  $(document).on('ready', function () {
    $.HSCore.components.HSFlatpickr.init('#inlineCalendarAlt', {
      locale: {
        weekdays: {
            shorthand: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]
        }
      },
      nextArrow: '<i class="nova-arrow-right icon-text icon-text-xs"></i>',
      prevArrow: '<i class="nova-arrow-left icon-text icon-text-xs"></i>'
      });
  });
</script>

Disabled

Use .datepicker-disabled class and disabled attribute for input tag

Result
HTML

<div class="datepicker datepicker-rangepicker">
  <input type="text" class="js-datepicker form-control datepicker-disabled" placeholder="Select dates"
         value="21/06/2019"
         disabled
         data-input>
</div>

Sizing

Use .input-group-sm and .input-group-lg with .input-group

Result
HTML

<!-- Small -->
<div class="input-group mb-3">
  <input type="text" class="form-control form-control-sm js-datepicker" placeholder="Select dates">
</div>
<!-- End Small -->

<!-- Default -->
<div class="input-group mb-3">
  <input type="text" class="form-control js-datepicker" placeholder="Select dates">
</div>
<!-- End Default -->

<!-- Large -->
<div class="input-group">
  <input type="text" class="form-control form-control-lg js-datepicker" placeholder="Select dates">
</div>
<!-- End Large -->

Disabling dates

Your can write custom javascript function

<div class="input-group">
  <input type="text" id="disableDatepicker" class="form-control" placeholder="Select dates">
</div>

<script>
  $(document).on('ready', function () {
      $.HSCore.components.HSFlatpickr.init('#disableDatepicker', {
          locale: {
              weekdays: {
                  shorthand: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]
              },
              rangeSeparator: ' - ',
          },
          disable: [
              function (date) {
                  // return true to disable
                  return (date.getDay() === 0 || date.getDay() === 6);
              }
          ],
          nextArrow: '<em class="nova-arrow-right"></em>',
          prevArrow: '<em class="nova-arrow-left"></em>'
      });
  });
</script>

<!-- Button Trigger Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Open modal
</button>
<!-- End Button Trigger Modal -->

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
     aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Example Title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        <label>Select a date</label>
        <div class="datepicker">
          <input type="text" class="js-datepicker form-control" placeholder="Select dates">
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Continue</button>
      </div>
    </div>
  </div>
</div>

Valdiation States

For more inforamation about form validation your can read on Validation page

Result
HTML

Select a date

<!-- Default -->
<div class="u-has-success mb-3">
  <div class="datepicker">
    <input type="text" class="js-datepicker form-control" placeholder="Select dates"
             value="21/06/2019">
  </div>
  <small class="text-success">Select a date</small>
</div>
<!-- End Default -->

<!-- Without Bordered -->
 <div class="u-has-success">
   <div class="datepicker">
     <input type="text" class="js-datepicker form-control-plaintext" placeholder="Select dates" value="21/06/2019">
   </div>
  <small class="text-success">Select a date</small>
</div>
<!-- End Without Bordered -->

Result
HTML

Select a date

<!-- Default -->
<div class="u-has-error mb-3">
  <div class="datepicker">
    <input type="text" class="js-datepicker form-control" placeholder="Select dates"
           value="21/06/2019">
  </div>
  <small class="text-danger">Select a date</small>
</div>
<!-- End Default -->

<!-- Without Bordered -->
 <div class="u-has-error">
   <div class="datepicker">
     <input type="text" class="js-datepicker form-control-plaintext" placeholder="Select dates" value="21/06/2019">
   </div>
  <small class="text-danger">Select a date</small>
</div>
<!-- End Without Bordered -->

JavaScript behavior

Config

locale: {
  firstDayOfWeek: 1 - integer
  weekdays: {
    shorthand: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"] - array
  }
  rangeSeparator: '-' - string
}
nextArrow: '>' - string
prevArrow: '<' - string
onDayCreate: function(){} - callback function

Methods

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-rp-wrapper="".

Attribute	Description
`data-rp-wrapper`	If the value is not empty, then indicates the container where the drop-down block with the calendar will be placed. If the value is empty, then the drop-down box will be placed immediately after the closing `body` tag.
`data-rp-is-inline`	If set to `true`, then the calendar will behave like a static block in the content.
`data-rp-type`	Type of calendar. Valid values are: single multiple range Default value: `single`
`data-rp-date-format`	Date format.
`data-rp-default-date`	The default date (placeholder).
`data-rp-event-dates`	Selected dates. Such dates will be highlighted in styles.
`locale.firstDayOfWeek`	Determines from which day the week begins.
`locale.weekdays.shorthand`	Short names for the days of the week.
`locale.rangeSeparator`	Separator which, if `data-rp-type="range"`is set to indicate 2 dates in the placeholder.
`nextArrow`	Markup button that shows the next month.
`prevArrow`	Markup button that shows the previous month.
`onDayCreate`	Performs functions inside when initializing the calendar. By default, a function is assigned that adds the dates specified in the `data-rp-event-dates` to the dates.