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.
<div class="input-group">
<input type="text" class="form-control js-datepicker" placeholder="Select dates">
</div>
With value
Use value="21/06/2019"
<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
<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
<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
<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
<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
<div class="datepicker">
<input type="text" class="js-datepicker d-none form-control" placeholder="Select dates"
data-rp-is-inline="true">
</div>
Today
<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
<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
<!-- 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>
Modal
<!-- 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
<!-- 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 -->
<!-- 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 -->
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 |
|---|---|
|
|
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.
|
|
|
If set to true, then the calendar will behave like a static block in the content.
|
|
|
Type of calendar. Valid values are:
single
|
|
|
Date format. |
|
|
The default date (placeholder). |
|
|
Selected dates. Such dates will be highlighted in styles. |
|
|
Determines from which day the week begins. |
|
|
Short names for the days of the week. |
|
|
Separator which, if data-rp-type="range"is set to indicate 2 dates in the
placeholder.
|
|
|
Markup button that shows the next month. |
|
|
Markup button that shows the previous month. |
|
|
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.
|