@extends('layouts.app') @section('styles') {{-- Style Here --}} @vite(['resources/scss/light/plugins/flatpickr/custom-flatpickr.scss']) @vite(['resources/scss/dark/plugins/flatpickr/custom-flatpickr.scss']) @endsection @section('content') {{-- Content Here --}}
Basic Date Time Range Calendar Preloading Time

Basic

Date time picker is powered by flatpickr.js that gives the ability to user to select date or time.

var f1 = flatpickr(document.getElementById('basicFlatpickr'));

Date Time

Use enableTime: true and dateFormat: "Y-m-d H:i" option to enable time support

var f2 = flatpickr(document.getElementById('dateTimeFlatpickr'), {
enableTime: true,
dateFormat: "Y-m-d H:i",
});

Range Calendar

Use mode: range select the date with range.

var f3 = flatpickr(document.getElementById('rangeCalendarFlatpickr'), {
mode: "range"
});

Preloading Time

Use noCalendar: true with Date Time options to disable calendar and show time picker only.

var f4 = flatpickr(document.getElementById('timeFlatpickr'), {
enableTime: true,
noCalendar: true,
dateFormat: "H:i",
defaultDate: "13:45"
});
@endsection @section('scripts') {{-- Scripts Here --}} @endsection