Date picker
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
Replies (7)
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 --saveBut I'm seeing errors
Cross-site Scripting in quill - https://github.com/advisories/GHSA-4943-9vgg-gr5r
No fix available
node_modules/quillThe flatpickr plugin is already included in Laravel. No need for you to reinstall flatpickr via npm.
package.json file:
"flatpickr": "^4.6.9",The integration is added here:
/starterkit/resources/mix/plugins.js
/starterkit/resources/mix/plugins.scssBy right, the bundle assets should have the flatpickr:
/starterkit/public/assets/plugins/global/plugins.bundle.js
/starterkit/public/assets/plugins/global/plugins.bundle.cssThanks
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" />when I put "id" it doe not show so I put "idd"
I dont know if I'm calling the JS and CSS in the right place.
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>Thanks
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>This is the code I try to run:
<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>Not working. What am I doing wrong?
Please help me with this.
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>This should make the flatpickr work as expected.
Let me know if this helps, or if you have any further questions or issues.
Thank you.
React Dev Vacancy
