- فرم ها
- انتخاب تاریخ و اسلایدر محدوده
انتخاب تاریخ و زمان شمسی
ساده
نمونه کد
<!-- basic -->
<div class="mb-5">
<input id="persian_basic" class="form-input persian-basic" />
</div>
<!-- script -->
<script>
$('.persian-basic').persianDatepicker({
initialValueType: 'persian',
format: 'YYYY/MM/DD',
autoClose: true
});
</script>
تاریخ زمان
نمونه کد
از این
{timePicker: { enabled: true, meridiem: { enabled: true } }} گزینه برای پشتیبانی زمان استفاده کنید
<!-- basic -->
<div class="mb-5">
<input id="persian_dateTime" class="form-input persian-datetime" />
</div>
<!-- script -->
<script>
$('.persian-datetime').persianDatepicker({
initialValueType: 'persian',
format: 'YYYY/MM/DD H:m:s',
autoClose: true,
timePicker: {
enabled: true,
meridiem: {
enabled: true
}
}
});
</script>
تقویم انتخاب محدوده
نمونه کد
<!-- range calendar -->
<div class="grid grid-cols-1 justify-between gap-5 sm:flex mb-5">
<input class="range-from-example" />
<input class="range-to-example" />
</div>
<!-- script -->
<script>
let to, from;
to = $(".range-to-example").persianDatepicker({
initialValueType: 'persian',
altField: '.range-to-example-alt',
altFormat: 'YYYY/MM/DD H:m:s',
format: 'YYYY/MM/DD H:m:s',
initialValue: true,
onSelect: function (unix) {
to.touched = true;
if (from && from.options && from.options.maxDate != unix) {
var cachedValue = from.getState().selected.unixDate;
from.options = {maxDate: unix};
if (from.touched) {
from.setDate(cachedValue);
}
}
}
});
from = $(".range-from-example").persianDatepicker({
initialValueType: 'persian',
altField: '.range-from-example-alt',
altFormat: 'YYYY/MM/DD H:m:s',
format: 'YYYY/MM/DD H:m:s',
initialValue: true,
onSelect: function (unix) {
from.touched = true;
if (to && to.options && to.options.minDate != unix) {
var cachedValue = to.getState().selected.unixDate;
to.options = {minDate: unix};
if (to.touched) {
to.setDate(cachedValue);
}
}
}
});
</script>
فقط زمان
نمونه کد
از این
{onlyTimePicker: true, format: 'H:m'} گزینه برای غیرفعال کردن تقویم و فقط نمایش زمان استفاده کنید
<!-- preloading time -->
<div class="mb-5">
<input class="form-input persian-time" />
</div>
<!-- script -->
<script>
$('.persian-time').persianDatepicker({
onlyTimePicker: true,
format: 'H:m',
timePicker: {
second: {
enabled: false,
step: null
},
}
});
</script>
انتخاب تاریخ و زمان میلادی
ساده
نمونه کد
<!-- 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>
تاریخ زمان
نمونه کد
از این
{enableTime: true, dateFormat: 'Y-m-d H:i'} گزینه برای پشتیبانی زمان استفاده کنید
<!-- 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>
تقویم انتخاب محدوده
نمونه کداز این
{mode: '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>
زمان پیش بارگذاری
نمونه کد
از این
{noCalendar: true, enableTime: true, dateFormat: 'H:i'} گزینه برای غیرفعال کردن تقویم و فقط نمایش زمان استفاده کنید
<!-- 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>
اسلایدر محدوده با جاوا اسکریپت
موقعیت : بالا راست
نمونه کد
%
<!-- 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>
موقعیت : بالا چپ
نمونه کد
%
<!-- 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>
موقعیت : پایین راست
نمونه کد
%
<!-- 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>
موقعیت : پایین چپ
نمونه کد
%
<!-- 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 اسلایدر
استفاده از ورودی های HTML5
نمونه کد
<!-- 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 -->
<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 -->
<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>
© روشاک