1
0
mirror of https://github.com/tabler/tabler.git synced 2025-12-26 11:16:12 +04:00

datepicker, selectize fixes

This commit is contained in:
codecalm
2020-01-28 00:14:56 +01:00
parent ee91838e31
commit 8e6b7aa908
12 changed files with 219 additions and 97 deletions

View File

@@ -22,9 +22,9 @@
"@fullcalendar/timegrid/main.min.js",
"@fullcalendar/list/main.min.js"
],
"daterangepicker": [
"daterangepicker/moment.min.js",
"daterangepicker/daterangepicker.js"
"flatpickr": [
"flatpickr/dist/flatpickr.min.js",
"flatpickr/dist/plugins/rangePlugin.js"
],
"countup": "countup.js/dist/countUp.min.js",
"nouislider": "nouislider/distribute/nouislider.min.js"
@@ -38,7 +38,7 @@
"@fullcalendar/timegrid/main.min.css",
"@fullcalendar/list/main.min.css"
],
"daterangepicker": "daterangepicker/daterangepicker.css",
"flatpickr": "flatpickr/dist/flatpickr.min.css",
"nouislider": "nouislider/distribute/nouislider.min.css"
}
}

View File

@@ -1,3 +1,14 @@
<div class="mb-3">
<label class="form-label">Form control rounded</label>
<input type="text" class="form-control form-control-rounded mb-2" name="Form control rounded" placeholder="Text..">
{% include ui/form/input-icon.html input-class="form-control-rounded" %}
</div>
<div class="mb-3">
<label class="form-label">Form control flush</label>
<input type="text" class="form-control form-control-flush" name="Form control flush" placeholder="Text..">
</div>
<div class="mb-3">
<label class="form-label">Input group</label>
{% include ui/form/input-group.html prepend="@" placeholder="username" class="mb-2" %}

View File

@@ -1,13 +1,23 @@
{% include parts/input-datalist.html %}
{% include parts/input-range.html %}
<div class="mb-3">
<label class="form-label">Datepicker</label>
{% include ui/form/calendar.html class="mb-2" %}
{% include ui/form/calendar.html id="time" layout="icon" %}
</div>
<div class="mb-3">
<label class="form-label">Inline datepicker</label>
{% include ui/form/calendar.html id="inline" inline=true %}
</div>
<div class="mb-3">
<label class="form-label">Progress</label>
{% include ui/progress.html class="mb-2" %}
{% include ui/progress.html indeterminate=true color="green" %}
</div>
<div class="mb-3">
<label class="form-label">Form buttons</label>
<div class="btn-list">
@@ -16,17 +26,6 @@
</div>
</div>
<div class="mb-3">
<label class="form-label">Form control rounded</label>
<input type="text" class="form-control form-control-rounded mb-2" name="Form control rounded" placeholder="Text..">
{% include ui/form/input-icon.html input-class="form-control-rounded" %}
</div>
<div class="mb-3">
<label class="form-label">Form control flush</label>
<input type="text" class="form-control form-control-flush" name="Form control flush" placeholder="Text..">
</div>
<div class="mb-3">
<label class="form-label">Tags input</label>
{% include ui/form/selectize.html key="tags" %}

View File

@@ -0,0 +1,40 @@
{% assign type = include.type | default: 'date' %}
{% assign placeholder = include.placeholder | default: 'Select a date' %}
{% assign id = include.id | default: 'simple' %}
{% capture input %}
<input id="calendar-{{ id }}" type="{{ type }}" 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 %}

View File

@@ -3,6 +3,14 @@ menu: a.b.c
---
<div class="row">
<div class="col-xl-4">
<div class="card">
<div class="card-body">
</div>
</div>
</div>
<div class="col-md-6 col-xl-4">
{% assign person = site.data.people[0] %}
<div class="card">