Hello,
can you help me implement date picker on my project
Metronic 8 + Demo 7
I'm trying to implement flatpickr
I saw this page but I don't how to proceed
https://preview.keenthemes.com/html/metronic/docs/forms/flatpickr
Thank you
Hi alx naxis
The sample page shows JS and HTML code. You can implement it on your page by referring to the example.
Thanks
Of course I tried.
The part about the Initialization, I do not know if there is something special to do but the code is note working.
I lunched this command
npm i flatpickr --save
Cross-site Scripting in quill - https://github.com/advisories/GHSA-4943-9vgg-gr5r
No fix available
node_modules/quill
The flatpickr plugin is already included in Laravel. No need for you to reinstall flatpickr via npm.
package.json file:
"flatpickr": "^4.6.9",
/starterkit/resources/mix/plugins.js
/starterkit/resources/mix/plugins.scss
/starterkit/public/assets/plugins/global/plugins.bundle.js
/starterkit/public/assets/plugins/global/plugins.bundle.css
Hello please help me with this.
I created a simple form I try to reproduce what we have here but not successful
I created a Controller and I'm trying to make it work on that.
https://preview.keenthemes.com/html/metronic/docs/forms/flatpickr
<script src="{{ url("/plugins/custom/flatpickr/flatpickr.bundle.js")}}"></script>
<link href="{{ url("plugins/custom/flatpickr/flatpickr.bundle.css")}}" rel="stylesheet" type="text/css"/>
<script>
$("#kt_datepicker_2").flatpickr();
</script>
<input class="form-control form-control-solid" name="due_at" placeholder="Pick a date" idd="kt_datepicker_2" />
Hi
Could you please check the console log if there is any error? Please verify if the file flatpickr.bundle.js is properly included. You can use asset() function instead of URL().
<script src="{{ asset("plugins/custom/flatpickr/flatpickr.bundle.js")}}"></script>
Sorry but I tried everything and I really need this to work.
In the documentation it is writing that is globally include
https://preview.keenthemes.com/html/metronic/docs/forms/flatpickr
But I included it in the base.blade.php file again.
<!DOCTYPE html>
{{--
Product Name: {{ theme()->getOption("product", "description") }}
Author: KeenThemes
Purchase: {{ theme()->getOption("product", "purchase") }}
Website: http://www.keenthemes.com/
Contact: support@keenthemes.com
Follow: www.twitter.com/keenthemes
Dribbble: www.dribbble.com/keenthemes
Like: www.facebook.com/keenthemes
License: {{ theme()->getOption("product", "license") }}
--}}
<html lang="{{ str_replace("_", "-", app()->getLocale()) }}"{!! theme()->printHtmlAttributes("html") !!} {{ theme()->printHtmlClasses("html") }}>
{{-- begin::Head --}}
<head>
<meta charset="utf-8"/>
<title>{{ ucfirst(theme()->getOption("meta", "title")) }} | Keenthemes</title>
<meta name="description" content="{{ ucfirst(theme()->getOption("meta", "description")) }}"/>
<meta name="keywords" content="{{ theme()->getOption("meta", "keywords") }}"/>
<link rel="canonical" href="{{ ucfirst(theme()->getOption("meta", "canonical")) }}"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="shortcut icon" href="{{ getAsset(theme()->getOption("assets", "favicon")) }}"/>
<meta name="csrf-token" content="{{ csrf_token() }}">
{{-- begin::Fonts --}}
{{ theme()->includeFonts() }}
{{-- end::Fonts --}}
@if (theme()->hasVendorFiles("css"))
{{-- begin::Page Vendor Stylesheets(used by this page) --}}
@foreach (array_unique(theme()->getVendorFiles("css")) as $file)
@if(util()->isExternalURL($file))
<link rel="stylesheet" href="{{ $file }}"/>
@else
{!! preloadCss(getAsset($file)) !!}
@endif
@endforeach
{{-- end::Page Vendor Stylesheets --}}
@endif
@if (theme()->hasOption("page", "assets/custom/css"))
{{-- begin::Page Custom Stylesheets(used by this page) --}}
@foreach (array_unique(theme()->getOption("page", "assets/custom/css")) as $file)
{!! preloadCss(getAsset($file)) !!}
@endforeach
{{-- end::Page Custom Stylesheets --}}
@endif
@if (theme()->hasOption("assets", "css"))
{{-- begin::Global Stylesheets Bundle(used by all pages) --}}
@foreach (array_unique(theme()->getOption("assets", "css")) as $file)
@if (strpos($file, "plugins") !== false)
{!! preloadCss(getAsset($file)) !!}
@else
<link href="{{ getAsset($file) }}" rel="stylesheet" type="text/css"/>
@endif
@endforeach
{{-- end::Global Stylesheets Bundle --}}
@endif
@if (theme()->getViewMode() === "preview")
{{ theme()->getView("partials/trackers/_ga-general") }}
{{ theme()->getView("partials/trackers/_ga-tag-manager-for-head") }}
@endif
@yield("styles")
<link href="{{ asset("demo7/css/custom.css") }}" rel="stylesheet" type="text/css" />
<link href="{{ asset("demo7/plugins/custom/flatpickr/flatpickr.bundle.css") }}" rel="stylesheet" type="text/css" />
</head>
{{-- end::Head --}}
{{-- begin::Body --}}
<body {!! theme()->printHtmlAttributes("body") !!} {!! theme()->printHtmlClasses("body") !!} {!! theme()->printCssVariables("body") !!} data-kt-name="metronic">
@include("partials/theme-mode/_init")
@yield("content")
{{-- begin::Javascript --}}
@if (theme()->hasOption("assets", "js"))
{{-- begin::Global Javascript Bundle(used by all pages) --}}
@foreach (array_unique(theme()->getOption("assets", "js")) as $file)
<script src="{{ getAsset($file) }}"></script>
@endforeach
{{-- end::Global Javascript Bundle --}}
@endif
@if (theme()->hasVendorFiles("js"))
{{-- begin::Page Vendors Javascript(used by this page) --}}
@foreach (array_unique(theme()->getVendorFiles("js")) as $file)
@if(util()->isExternalURL($file))
<script src="{{ $file }}"></script>
@else
<script src="{{ getAsset($file) }}"></script>
@endif
@endforeach
{{-- end::Page Vendors Javascript --}}
@endif
@if (theme()->hasOption("page", "assets/custom/js"))
{{-- begin::Page Custom Javascript(used by this page) --}}
@foreach (array_unique(theme()->getOption("page", "assets/custom/js")) as $file)
<script src="{{ getAsset($file) }}"></script>
@endforeach
{{-- end::Page Custom Javascript --}}
@endif
{{-- end::Javascript --}}
@if (theme()->getViewMode() === "preview")
{{ theme()->getView("partials/trackers/_ga-tag-manager-for-body") }}
@endif
@yield("scripts")
<script src="{{ asset("demo7/plugins/custom/flatpickr/flatpickr.bundle.js") }}"></script>
</body>
{{-- end::Body --}}
</html>
<x-base-layout>
<script>
$("#kt_datepicker_3").flatpickr({
enableTime: true,
dateFormat: "Y-m-d H:i",
});
</script>
<div class="mb-0">
<label for="" class="form-label">Select date and time</label>
<input class="form-control form-control-solid" placeholder="Pick date & time" />
</div>
</x-base-layout>
Hello alx naxis,
Apologies for the delay. It seems that the flatpickr initialization code is targeting an element with the ID "kt_datepicker_3", but there is no input element with that ID in the HTML code you provided.
To fix this, you should add the ID "kt_datepicker_3" to the input element like this:
<x-base-layout>
<script>
$("#kt_datepicker_3").flatpickr({
enableTime: true,
dateFormat: "Y-m-d H:i",
});
</script>
<div class="mb-0">
<label for="" class="form-label">Select date and time</label>
<input id ="kt_datepicker_3" class="form-control form-control-solid" placeholder="Pick date & time" />
</div>
</x-base-layout>