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:
@@ -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"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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" %}
|
||||
|
||||
@@ -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" %}
|
||||
|
||||
40
pages/_includes/ui/form/calendar.html
Normal file
40
pages/_includes/ui/form/calendar.html
Normal 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 %}
|
||||
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user