tabler/pages/_includes/ui/form/calendar.html

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

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

{% if include.inline %}
	<div id="calendar-{{ 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 %}

{% append_lib flatpickr %}
{% capture_global scripts %}
<script>
	document.addEventListener("DOMContentLoaded", function () {
		{% if jekyll.environment == 'development' %}
		window.tabler_calendar = window.tabler_calendar || {};
		{% endif %}

		{% if jekyll.environment == 'development' %}window.tabler_calendar["chart-{{ id }}"] = {% endif %}flatpickr(document.getElementById('calendar-{{ id }}'), {
			{% if include.inline %}
			inline: true,
			{% endif %}
		});
	});
</script>
{% endcapture_global %}