Vendor Plugin

Vendor : Date Rangepicker

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>
									
Predefined Ranges
Range
With Time Picker
Datepicker
Datepicker - disable past dates
All Enabled
Rounded + Icon
Clean + Icon
Rounded Buttons
Clear Button
Clear Button
Open Up / Positioning
view code
<!--
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"]
	}'>
										
Ajax : Submit on Apply
<!--
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>