Vendor : Rangepicker
JavaScript Date Range, Date and Time Picker Component.
- License: MIT
- https://github.com/dangrossman/daterangepicker
src/js/vendors/vendor.daterangepicker.js
Rangepicker Examples
<!--
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"
Optional (translation purpose)
data-quick-locale
-->
<!-- 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-bs-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-bs-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-2 mx-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-2 mx-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-bs-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-2 mx-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-bs-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"]
}'>
/*
If you really have to overwrite the Smarty defaults,
you can create your 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>
Rangepicker Ajax
Read about data-ajax-params
<div class="input-group-over position-realtive z-index-1">
<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="botom-center">
<span class="fi fi-calendar fs-5 mx-4 z-index-n1"></span>
</div>