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
/*
:: Vendor Path
node_modules/bootstrap-daterangepicker/
:: Installed
npm install bootstrap-daterangepicker
npm install moment (dep.: 53Kb min.)
:: SOW Controller Init
*/ $.SOW.vendor.daterangepicker.init('.rangepicker');
/*
:: Plugin Options|Defaults
*/ $.SOW.vendor.daterangepicker.init('.rangepicker', {/* your config */});
// If you really have to overwrite the Smarty defaults,
// As an alternative, you can create a custom config and pass it via attribute:
// (inline script or in a .js file)
<input type="text" class="form-control rangepicker" data-custom-config="myConfig">
<script>
var myConfig = {/* my config */};
</script>
<!--
Turn to ajax by adding:
data-id="1"
data-ajax-url="../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"
Rounded:
data-layout-rounded="true"
-->
<!-- predefined ranges -->
<input autocomplete="off" type="text" name="my_daterange" class="form-control rangepicker"
data-ranges="true"
data-date-format="MM/DD/YYYY"
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"
}'>
<!-- range -->
<input autocomplete="off" type="text" name="my_daterange" class="form-control rangepicker"
data-placement="left"
data-ranges="false"
data-date-start="01/16/2019"
data-date-end="01/28/2019"
data-date-format="MM/DD/YYYY"
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"]
}'>
<!-- with timepicker -->
<input autocomplete="off" type="text" name="my_daterange" class="form-control rangepicker"
data-single-datepicker="true"
data-timepicker="true"
data-timepicker-24h="true"
data-timepicker-show-seconds="true"
data-date-format="MM/DD/YYYY HH:mm:ss"
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"]
}'>
<!-- Datepicker -->
<input autocomplete="off" type="text" name="my_daterange" class="form-control rangepicker"
data-layout-rounded="false"
data-single-datepicker="true"
data-interval-years='[1982,2020]'
data-date-format="MM/DD/YYYY"
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"]
}'>
<!-- Datepicker - disable past dates -->
<input autocomplete="off" type="text" name="my_daterange" class="form-control rangepicker"
data-layout-rounded="false"
data-single-datepicker="true"
data-disable-past-dates="true"
data-date-start="01/16/2019"
data-date-format="MM/DD/YYYY"
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"]
}'>
<!-- all enabled -->
<input autocomplete="off" type="text" name="my_daterange" class="form-control rangepicker"
data-layout-rounded="true"
data-disable-auto-update-input="true"
data-timepicker="true"
data-timepicker-24h="true"
data-timepicker-show-seconds="false"
data-placement="left"
data-date-start="01/16/2019"
data-date-end="01/28/2019"
data-date-format="MM/DD/YYYY HH:mm"
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"
}'>
<!-- Rounded + Icon -->
<div class="input-group-over position-realtive z-index-1 bg-white form-control-pill">
<input autocomplete="off" type="text" name="my_daterange" class="form-control form-control-pill rangepicker bg-transparent"
data-timepicker="true"
data-single-datepicker="true"
data-date-format="MM/DD/YYYY"
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"]
}'>
<span class="fi fi-calendar fs--20 ml-4 mr-4 z-index-n1"></span>
</div>
<!-- Clean + Icon -->
<div class="input-group-over position-realtive z-index-1 bg-white">
<input autocomplete="off" type="text" name="my_daterange" class="form-control form-control-clean rangepicker bg-transparent"
data-timepicker="true"
data-single-datepicker="true"
data-date-format="MM/DD/YYYY"
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"]
}'>
<span class="fi fi-calendar fs--20 ml-4 mr-4 z-index-n1 text-pink"></span>
</div>
<!-- Rounded Buttons -->
<div class="input-group-over position-realtive z-index-1 bg-white form-control-pill">
<input autocomplete="off" type="text" name="my_daterange" class="form-control rangepicker bg-transparent"
data-layout-rounded="true"
data-placement="left"
data-date-format="MM/DD/YYYY"
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"]
}'>
<span class="fi fi-calendar fs--20 ml-4 mr-4 z-index-n1 text-success"></span>
</div>
<!-- clear button
add .form-control-pill. for rounded
-->
<div class="form-label-group">
<input autocomplete="off" type="text" class="form-control rangepicker"
data-single-datepicker="true"
data-disable-auto-update-input="false"
data-date-format="MM/DD/YYYY HH:mm"
data-quick-locale='{
"lang_apply" : "Apply",
"lang_cancel" : "Cancel",
"lang_months" : ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
"lang_weekdays" : ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]
}' placeholder="Event Date Start" name="start">
<label for="item_name">Event Date Start</label>
<a href="#" class="btn btn-rangepicker-clear position-absolute end-0 top-0 z-index-2 fi fi-close"></a>
</div>
<!-- open up / positioning -->
<input autocomplete="off" type="text" name="my_daterange" class="form-control rangepicker"
data-layout-rounded="false"
data-drops="up"
data-placement="left"
data-single-datepicker="true"
data-disable-past-dates="true"
data-date-start="01/16/2019"
data-date-format="MM/DD/YYYY"
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"]
}'>
<!--
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="../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>