Flatpickr
مثال ها
<label class="form-label">Select date</label>
<input type="text" class="form-control flatpickr" placeholder="Select date" data-date-format="d M Y">

شما باید تگ <link> زیر را بین تگ <head> بعد از فایل های css خود paste کنید.

			
<link rel="stylesheet" type="text/css" href="assets/vendor/flatpickr/css/flatpickr.min.css">

همچنین بین تگ <script> پلاگین flatpickr در پوشه ی Vendors را باید paste کنید.

			
<script src="assets/vendor/flatpickr/js/flatpickr.min.js"></script>

نحوه استفاده:


<!-- Single -->
<input type="text" class="form-control flatpickr" placeholder="Select date">

<!-- Multiple -->
<input type="text" class="form-control flatpickr" data-mode="multiple" placeholder="Select date">

<!-- Range -->
<input type="text" class="form-control flatpickr" data-mode="range" placeholder="Select date">

<!-- Enable Time with no calendar -->
<input type="text" class="form-control flatpickr" data-enableTime="true" data-noCalendar="true" placeholder="Select time">

<!-- Inline -->
<input type="text" class="form-control flatpickr" data-inline="true" placeholder="Select date">

<!-- Date formate -->
<input type="text" class="form-control flatpickr" data-date-format="d/M/Y" placeholder="Select date">

ویژگی های دیگر این قابلیت به همراه توضیحات آن در جدول زیر ارائه شده است:

نام Attributes توضیحات سایر ویژگی ها
data-enableTime="true" فعال یا غیرفعال کردن تقویم Boolean (true or false)
data-noCalendar="true" فعال یا غیرفعال کردن تقویم Boolean (true or false)
data-mode="mode" تنظیم حالت تاریخ "range" | "single"
data-inline="true" Boolean (true or false)
data-date-format="d M" تعیین فرمت تاریخ و زمان "d M" | "d M Y" | "h:i K"

کسب اطلاعات بیشتر در flatpickr