New Metronic Docs!Added Integration Docs with Starter Kits Apps for Laravel, Laravel Livewire, Angular, Vue, Symfony, Blazor Server, Django & Flask & more
Browse Docs
Light
Dark
System
Ask  Question

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


user
alx naxis 2 years ago
Metronic Laravel
7 Answers
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (7)

user
Faizal Author2 years ago

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.


user
Faizal Author2 years ago

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


user
alx naxis 2 years ago

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.


user
Faizal Author2 years ago

The 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.scss


By right, the bundle assets should have the flatpickr:

/starterkit/public/assets/plugins/global/plugins.bundle.js
/starterkit/public/assets/plugins/global/plugins.bundle.css



Thanks


user
alx naxis 2 years ago

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.


user
Faizal Author2 years ago

Hi alx naxis

The sample page shows JS and HTML code. You can implement it on your page by referring to the example.

Thanks


user
alx naxis 2 years ago

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

But I'm seeing errors

Cross-site Scripting in quill - https://github.com/advisories/GHSA-4943-9vgg-gr5r
No fix available
node_modules/quill


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(