Vendor Plugin

Vendor : Datepicker

A datepicker for twitter bootstrap 


/* 
	:: Vendor Path
	node_modules/bootstrap-datepicker/

	:: Installed
	npm install bootstrap-datepicker

	:: SOW Controller Init
*/	$.SOW.vendor.datepicker.init('.datepicker');
									
<!--
Note:

	disable past dates
		data-date-start="today"

	disable past/future dates (used as interval)
		data-date-start="01/16/2019" 
		data-date-end="01/28/2019" 

	-ONLY- if locales is specified in gulp.config.__vendors.js
		data-lang="de"
	* data-quick-locale="..." should be removed if loaded by config
-->
Simple
<!--
Optional, for quick inline translation. Default: english
data-quick-locale="..."

Rounded - add class:
.form-control-pill
-->
<input type="text" name="" class="form-control datepicker" 
	data-today-highlight="true" 
	data-layout-rounded="false" 
	data-title="Smarty Datepicker" 
	data-show-weeks="true" 
	data-today-highlight="true" 
	data-today-btn="true" 
	data-clear-btn="false" 
	data-autoclose="true" 
	data-date-start="today" 
	data-format="MM/DD/YYYY"
	data-quick-locale='{
		"days": ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
		"daysShort": ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
		"daysMin": ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
		"months": ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
		"monthsShort": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
		"today": "Today",
		"clear": "Clear",
		"titleFormat": "MM yyyy"}'>
With Icon
<!--
Optional, for quick inline translation. Default: english
data-quick-locale="..."

Rounded - add class:
.form-control-pill
-->
<div class="input-group-over position-realtive z-index-1 bg-white">

	<input type="text" name="" class="form-control bg-transparent datepicker" 
		data-today-highlight="true" 
		data-layout-rounded="true" 
		data-title="Smarty Datepicker" 
		data-show-weeks="true" 
		data-today-highlight="true" 
		data-today-btn="true" 
		data-autoclose="true" 
		data-format="MM/DD/YYYY"
		data-quick-locale='{
			"days": ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
			"daysShort": ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
			"daysMin": ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
			"months": ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
			"monthsShort": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
			"today": "Today",
			"clear": "Clear",
			"titleFormat": "MM yyyy"}'>

	<span class="fi fi-calendar fs--20 ml-4 mr-4 z-index-n1 text-muted"></span>
</div>
Ajax
<!--
Optional, for quick inline translation. Default: english
data-quick-locale="..."

Rounded - add class:
.form-control-pill

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.
-->
<div class="input-group-over position-realtive z-index-1 bg-white">

	<input type="text" name="" class="form-control bg-transparent datepicker" 
			data-layout-rounded="true" 
			data-today-highlight="true" 
			data-title="Smarty Datepicker" 
			data-show-weeks="true" 
			data-today-highlight="true" 
			data-today-btn="true" 
			data-autoclose="true" 
			data-format="MM/DD/YYYY" 
			data-quick-locale='{
				"days": ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
				"daysShort": ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
				"daysMin": ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
				"months": ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
				"monthsShort": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
				"today": "Today",
				"clear": "Clear",
				"titleFormat": "MM yyyy"
			}'

			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 text-muted"></span>
</div>
Ajax : As Link
01/16/2019 
<!--
Optional, for quick inline translation. Default: english
data-quick-locale="..."

Rounded - add class:
.form-control-pill

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.
-->
<a href="#" class="datepicker link-muted"
		data-layout-rounded="false" 
		data-title="Smarty Datepicker" 
		data-show-weeks="true" 
		data-today-highlight="true" 
		data-today-btn="true" 
		data-autoclose="true" 
		data-date-start="today" 
		data-format="MM/DD/YYYY"
		data-quick-locale='{
			"days": ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
			"daysShort": ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
			"daysMin": ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
			"months": ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
			"monthsShort": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
			"today": "Today",
			"clear": "Clear",
			"titleFormat": "MM yyyy"
		}'
		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">
	01/16/2019
</a>
Jump To