tabler/shared/includes/ui/datepicker.html

{% assign value = include.value | default: '2020-06-20' %}
{% assign placeholder = include.placeholder | default: 'Select a date' %}

{% if include.id %}

{% capture input %}
<input class="form-control{% if include.class %} {{ include.class }}{% endif %}"{% if placeholder %} placeholder="{{ placeholder }}"{% endif %} id="datepicker-{{ include.id }}" value="{{ value }}"/>
{%- endcapture %}


{% if include.inline %}
	<div class="datepicker-inline" id="datepicker-{{ include.id }}"></div>
{% elsif include.layout == 'icon' %}
	<div class="input-icon{% if include.class %} {{ include.class }}{% endif %}">
		{{ input | replace: include.class, '' }}
		<span class="input-icon-addon">{% include "ui/icon.html" icon="calendar" %}</span>
	</div>
{% elsif include.layout == 'icon-prepend' %}
	<div class="input-icon{% if include.class %} {{ include.class }}{% endif %}">
		<span class="input-icon-addon">{% include "ui/icon.html" icon="calendar" %}</span>
		{{ input | replace: include.class, ''  }}
	</div>
{% else %}
	{{ input }}
{% endif %}

{% capture script %}
<script>
	document.addEventListener("DOMContentLoaded", function () {
		{% if environment == 'development' %}
		window.tabler_datepicker = window.tabler_datepicker || {};
		{% endif %}

		window.Litepicker && ({% if environment == 'development' %}window.tabler_datepicker["datepicker-{{ include.id }}"] = {% endif %}new Litepicker({
			element: document.getElementById('datepicker-{{ include.id }}'),
			buttonText: {
				previousMonth: `{% capture icon %}{% include "ui/icon.html" icon="chevron-left" %}{%- endcapture %}{{ icon | strip }}`,
				nextMonth: `{% capture icon %}{% include "ui/icon.html" icon="chevron-right" %}{%- endcapture %}{{ icon | strip }}`,
			},
			{% if include.inline %}inlineMode: true,{% endif %}
		}));
	});
</script>
{%- endcapture %}

{% if include.show-scripts %}
{{ script }}
{% else %}
{% capture_script %}
{{ script }}
{% endcapture_script %}
{% endif %}

{% endif %}