- Forms
- Date and Range Picker
Date and Time Picker
Basic
Code
<!-- basic -->
<div x-data="form">
<input id="basic" x-model="date1" class="form-input" />
</div>
<!-- script -->
<script>
document.addEventListener("alpine:init", () => {
Alpine.data("form", () => ({
date1: '2022-07-05',
init() {
flatpickr(document.getElementById('basic'), {
dateFormat: 'Y-m-d',
defaultDate: this.date1,
})
}
}));
});
</script>
Date Time
CodeUse
{enableTime: true, dateFormat: 'Y-m-d H:i'} option to enable time support
<!-- date & time -->
<div x-data="form">
<input id="dateTime" x-model="date2" class="form-input" />
</div>
<!-- script -->
<script>
document.addEventListener("alpine:init", () => {
Alpine.data("form", () => ({
date2: '2022-07-05 12:00',
init() {
flatpickr(document.getElementById('dateTime'), {
defaultDate: this.date2,
enableTime: true,
dateFormat: 'Y-m-d H:i'
})
}
}));
});
</script>
Range Calendar
CodeUse
{mode: 'range'} select the date with range.
<!-- range calendar -->
<div x-data="form">
<input id="range-calendar" x-model="date3" class="form-input" />
</div>
<!-- script -->
<script>
document.addEventListener("alpine:init", () => {
Alpine.data("form", () => ({
date3: '2022-07-05 to 2022-07-10',
init() {
flatpickr(document.getElementById('range-calendar'), {
defaultDate: this.date3,
dateFormat: 'Y-m-d',
mode: 'range'
})
}
}));
});
</script>
Preloading Time
CodeUse
{noCalendar: true, enableTime: true, dateFormat: 'H:i'} with Date Time options to disable calendar and show time picker only.
<!-- preloading time -->
<div x-data="form">
<input id="preloading-time" x-model="date4" class="form-input" />
</div>
<!-- script -->
<script>
document.addEventListener("alpine:init", () => {
Alpine.data("form", () => ({
date4: '13:45',
init() {
flatpickr(document.getElementById('preloading-time'), {
defaultDate: this.date4,
noCalendar: true,
enableTime: true,
dateFormat: 'H:i'
})
}
}));
});
</script>
Javascript Range Slider
Postion : Top-Left
Code %
<!-- top left -->
<div x-data="form">
<div class="font-bold"> <span x-text="slider1" class="inline-block py-1 px-2 rounded text-primary border border-white-light dark:border-dark"></span> <span>%</span></div>
<input type="range" class="w-full py-2.5" min="0" max="100" x-model="slider1" />
</div>
<!-- script -->
<script>
document.addEventListener("alpine:init", () => {
Alpine.data("form", () => ({
slider1: '0',
}));
});
</script>
Postion : Top-right
Code %
<!-- top right -->
<div x-data="form">
<div class="font-bold ltr:text-right rtl:text-left"> <span x-text="slider2" class="inline-block py-1 px-2 rounded text-primary border border-white-light dark:border-dark"></span> <span>%</span></div>
<input type="range" class="w-full py-2.5" min="0" max="100" x-model="slider2" />
</div>
<!-- script -->
<script>
document.addEventListener("alpine:init", () => {
Alpine.data("form", () => ({
slider2: '0',
}));
});
</script>
Postion : Bottom-Left
Code %
<!-- bottom left -->
<div x-data="form">
<input type="range" class="w-full py-2.5" min="0" max="100" x-model="slider3" />
<div class="font-bold"> <span x-text="slider3" class="inline-block py-1 px-2 rounded text-primary border border-white-light dark:border-dark"></span> <span>%</span></div>
</div>
<!-- script -->
<script>
document.addEventListener("alpine:init", () => {
Alpine.data("form", () => ({
slider3: '0',
}));
});
</script>
Postion : Bottom-right
Code %
<!-- bottom right -->
<div x-data="form">
<input type="range" class="w-full py-2.5" min="0" max="100" x-model="slider4" />
<div class="font-bold ltr:text-right rtl:text-left"> <span x-text="slider4" class="inline-block py-1 px-2 rounded text-primary border border-white-light dark:border-dark"></span> <span>%</span></div>
</div>
<!-- script -->
<script>
document.addEventListener("alpine:init", () => {
Alpine.data("form", () => ({
slider4: '0',
}));
});
</script>
noUI Slider
Using HTML5 input elements
Code
<!-- using HTML5 input elements -->
<div x-data="form">
<div class="mt-5" id="nouiSlider1"></div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 my-4">
<div class="mb-3">
<select x-model="nouiMin1" class="form-select w-full" id="select" @change="selectUpdateValue()">
<template x-for="(i, index) in 61" x-model="nouiMin1">
<option :key="i" x-text="index"></option>
</template>
</select>
</div>
<div>
<input type="number" id="input" x-model="nouiMax1" class="form-input" :min="-20" :max="100" step="1" @change="selectUpdateValue()" />
</div>
</div>
</div>
<!-- script -->
<script>
document.addEventListener("alpine:init", () => {
Alpine.data("form", () => ({
nouiMin1: 20,
nouiMax1: 40,
init() {
noUiSlider1 = noUiSlider.create(document.getElementById('noui_slider1'), {
start: [this.nouiMin1, this.nouiMax1],
connect: true,
tooltips: true,
range: {
'min': 0,
'max': 100
},
})
this.$nextTick(() => {
document.getElementById('select').value = this.nouiMin1;
})
noUiSlider1.on('update', function(values, handle) {
document.getElementById('select').value = Math.round(noUiSlider1.get()[0]);
document.getElementById('input').value = Math.round(noUiSlider1.get()[1]);
});
}
selectUpdateValue() {
noUiSlider1.set([this.nouiMin1, this.nouiMax1]);
},
}));
});
</script>
Non linear slider
Code
<!-- non linear slider -->
<div x-data="form">
<div class="mt-5" id="nouiSlider2"></div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 my-5 font-bold">
<div>
<span class="text-primary mr-2" id="nouiMin2" x-text="nouiMin2"></span><span class="border border-white-light dark:border-dark py-1 px-2 text-dark dark:text-white-dark rounded" id="nouiMin2Perc" x-text="nouiMin2Perc"></span>
</div>
<div class="ltr:text-right rtl:text-left">
<span class="text-primary mr-2" id="nouiMax2" x-text="nouiMax2"></span><span class="border border-white-light dark:border-dark py-1 px-2 text-dark dark:text-white-dark rounded" id="nouiMax2Perc" x-text="nouiMax2Perc"></span>
</div>
</div>
</div>
<!-- script -->
<script>
document.addEventListener("alpine:init", () => {
Alpine.data("form", () => ({
nouiMin2: 500,
nouiMax2: 4000,
nouiMin2Perc: 0,
nouiMax2Perc: 0,
init() {
noUiSlider2 = noUiSlider.create(document.getElementById('noui_slider2'), {
start: [this.nouiMin2, this.nouiMax2],
connect: true,
tooltips: true,
range: {
'min': 0,
'max': 10000,
'10%': [500, 500],
'50%': [4000, 1000],
},
})
noUiSlider2.on('update', function(values, handle, unencoded, isTap, positions) {
document.getElementById('nouiMin2').innerHTML = parseInt(values[0]).toFixed(2);
document.getElementById('nouiMax2').innerHTML = parseInt(values[1]).toFixed(2);
document.getElementById('nouiMin2Perc').innerHTML = parseInt(positions[0]).toFixed(2) + '%';
document.getElementById('nouiMax2Perc').innerHTML = parseInt(positions[1]).toFixed(2) + '%';
});
}
}));
});
</script>
Locking sliders together
Code
<!-- locking sliders together -->
<div x-data="form">
<div class="my-5" id="lockingSlider1"></div>
<div class="text-primary font-bold mb-10" id="locking_slider1_value"></div>
<div class="my-5" id="lockingSlider2"></div>
<div class="text-primary font-bold mb-10" id="locking_slider2_value"></div>
<div class="ltr:text-right rtl:text-left">
<button type="button" class="btn btn-primary" id="lockbutton" @click="lockedState = !lockedState" x-text="lockedState ? 'Unlock':'Lock'"> Lock </button>
</div>
</div>
<!-- script -->
<script>
document.addEventListener("alpine:init", () => {
Alpine.data("form", () => ({
lockedState: false,
init() {
lockingSlider2 = noUiSlider.create(document.getElementById('locking_slider2'), {
start: 80,
animate: false,
range: {
min: 0,
max: 100
}
});
lockingSlider1.on('update', function(values, handle) {
locking_slider1_value.innerHTML = values[handle];
});
lockingSlider2.on('update', function(values, handle) {
locking_slider2_value.innerHTML = values[handle];
});
this.$nextTick(() => {
let lockedState = this.lockedState
this.$watch('lockedState', value => {
lockedState = value
})
lockingSlider1.on('slide', function(values, handle) {
if (!lockedState) return;
lockingSlider2.set(values[handle] - (Number(lockingSlider2.get()) - Number(lockingSlider1.get())));
});
lockingSlider2.on('slide', function(values, handle) {
if (!lockedState) return;
lockingSlider1.set(values[handle] - (Number(lockingSlider2.get()) - Number(lockingSlider1.get())));
});
})
}
}));
});
</script>
© . Vristo All rights reserved.