JavaScript Date Range, Date and Time Picker Component.
Smarty enabled ajax functionality on date change!
How is Daterangepicker compared to Datepicker?
Daterangepicker is larger in size because is using moment.js as dependedncy but is definitely richer in features.
Daterangepicker can also be used as a single dropdown. Smarty designed them both to look almost the same.
Datepicker: 34Kb
Daterangepicker: 33Kb + 58Kb moment.js
<!--
Remove params you don't need (or set to true/false where is possible)
Debug is on, you can check your console to see the ajax params sent to the server.
data-quick-locale is optional, english is used by default so
is safe to remove. Instead of inline translation, moment.js can be
used (daterangepicker is anyway using it by default) but the only issue is that
the complete moment.js is huge (336Kb - 2 times larger than entire Smarty js core).
You an anytime enable full moment.js (or just a specific lang file) from gulp.config.__vendors.js
Attention is required to data-quick-locale, each comma is important, including
the quotes. Javascript will not throw any error, will simply ignore it if is not
valid, will be detected as string instead of object.
If data-quick-locale is used, you can remove ranges you don't need
(lang_today, lang_yday, lang_7days, etc).
data-id="1" is not required but might be an id from the database.
You can instead to add to data-ajax-params ["id","1"]
Read about data-ajax-params if you are not yet familiarized.
Ajax required:
data-disable-auto-update-input="true"
-->
<div class="input-group-over position-realtive z-index-1 bg-white">
<input autocomplete="off" type="text" name="my_daterange" class="form-control bg-transparent rangepicker"
data-layout-rounded="false"
data-disable-auto-update-input="true"
data-timepicker="true"
data-timepicker-24h="true"
data-timepicker-show-seconds="false"
data-date-start="01/16/2019"
data-date-end="01/28/2019"
data-date-format="MM/DD/YYYY"
data-single-datepicker="false"
data-interval-years='[1982,2020]'
data-ranges="true"
data-quick-locale='{
"lang_apply" : "Apply",
"lang_cancel" : "Cancel",
"lang_crange" : "Custom Range",
"lang_months" : ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
"lang_weekdays" : ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
"lang_today" : "Today",
"lang_yday" : "Yesterday",
"lang_7days" : "Last 7 Days",
"lang_30days" : "Last 30 Days",
"lang_tmonth" : "This Month",
"lang_lmonth" : "Last Month"
}'
data-id="1"
data-ajax-url="../../html_frontend/demo.files/php/demo.ajax_request.php"
data-ajax-params="['action','date_change']['section','customer_invoice']"
data-ajax-method="POST"
data-toast-success="Sucessfully Updated!"
data-toast-position="top-center"
>
<span class="fi fi-calendar fs--20 ml-4 mr-4 z-index-n1"></span>
</div>