انتخابگر تاریخ
سبک وزن و قدرتمند جاوا اسکریپت تعیین کننده تاریخ بدون وابستگی.
اسناد Flatpickrبدلیل تداخل و پیچیدگی در استفاده از انتخاب گر تاریخ و تقویم و تداخل در شمسی سازی ما یک انتخاب گر تاریخ جایگزین استفاده کردیم
اسناد JalaliDatePickerفایل css
<link href="vendors/flatpickr/flatpickr.min.css" rel="stylesheet" />جاوا اسکریپت
<script src="assets/js/flatpickr.full.js"></script>
<script src="assets/js/flatpickr.local-fa.js"></script>انتخابگر تاریخ
<label class="form-label" for="datepicker">Start Date</label>
<input class="form-control datetimepicker" id="datepicker" type="text" placeholder="y/m/d" data-options='{"disableMobile":true}' />انتخاب کننده زمان
<label class="form-label" for="timepicker1">Start Time</label>
<input class="form-control datetimepicker" id="timepicker1" type="text" placeholder="H:i" data-options='{"enableTime":true,"noCalendar":true,"dateFormat":"H:i","disableMobile":true,"locale":"fa"}' />انتخابگر تاریخ و زمان
<label class="form-label" for="datetimepicker">Start Date</label>
<input class="form-control datetimepicker" id="datetimepicker" type="text" placeholder="y/m/d H:i" data-options='{"enableTime":true,"dateFormat":"y/m/d H:i","disableMobile":true,"locale":"fa"}' />دامنه
<label class="form-label" for="timepicker2">Select Time Range</label>
<input class="form-control datetimepicker" id="timepicker2" type="text" placeholder="y/m/d تا y/m/d" data-options='{"mode":"range","dateFormat":"y/m/d","disableMobile":true,"locale":"fa"}' />اعتبار سنجی
ویژگی allowInput:true را به data-options برای اعمال اعتبار فرم اضافه کنید
<form class="needs-validation" novalidate="novalidate">
<div class="mb-3"><label class="form-label" for="datepickerVal"> Date</label><input class="form-control datetimepicker" id="datepickerVal" type="text" placeholder="d/m/y" required="required" data-options='{"disableMobile":true,"allowInput":true}' />
<div class="invalid-feedback">This field is required</div>
</div>
<div class="mb-3"><label class="form-label" for="dateTimepickerVal">Date & Time</label><input class="form-control datetimepicker" id="dateTimepickerVal" type="text" required="required" placeholder="d/m/y H:i" data-options='{"enableTime":true,"dateFormat":"d/m/y H:i","disableMobile":true,"allowInput":true}' />
<div class="invalid-feedback">This field is required</div>
</div><button class="btn btn-primary" type="submit">Submit form</button>
</form>بومی سازی
Flatpickr را می توان در هر نمونه یا در سطح جهانی محلی کرد. برای بومی سازی اسکریپت زبان import flatpickr در src/js/flatpickr.full.js.به عنوان مثال، می توانید با وارد کردن اسکریپت زیر از زبان پارسی استفاده کنید.
import "flatpickr/dist/l10n/fa.js"برای جزئیات بیشتر به اسناد محلی سازی Flatpickr مراجعه کنید .
مثال
<div class="mb-3">
<label class="form-label" for="timepicker3">Select Time Range</label>
<input class="form-control datetimepicker" id="timepicker3" type="text" placeholder="y/m/d تا y/m/d" data-options='{"mode":"range","dateFormat":"y/m/d","disableMobile":true,"locale":"fa"}' />
</div>
