Calendar is not displaying with flatpickr -

Question

I have an issue with the calendar of flatpickr. It doesn't display anymore the calendar and i don't know why... I already test the solution of this other post: Calendar is not displaying correctly using flatpickr, but it doesn't work. I can change manually the date but i don't have anymore a calendar which appear when i click on the button of the date. Thank you for your help !!

my code:

flatpickr.js

import flatpickr from "flatpickr"
import "flatpickr/dist/flatpickr.min.css"

flatpickr(".datepicker", {
  allowInput: true,
  dateFormat: "d.m.Y",
  mode: "single",
  maxDate: "today",
  locale: {
    firstDayOfWeek: 1,
    weekdays: {
      shorthand: ["dim", "lun", "mar", "mer", "jeu", "ven", "sam"],
      longhand: ["dimanche", "lundi", "mardi", "mercredi", "jeudi", "vendredi", "samedi"],
    },
    months: {
      shorthand: ["janv","févr", "mars", "avr", "mai", "juin", "juil", "août", "sept", "oct", "nov", "déc",],
      longhand: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
    },
  },
  disableMobile: "true",
})

application.html.erb

<title>Collecte des avis clients dans le restaurant, solution digital de rétention et fidélisation clients</title>
    <%= csrf_meta_tags %>
    <%= action_cable_meta_tag %>
    <%= stylesheet_link_tag 'application', media: 'all' %>
    <%= stylesheet_pack_tag 'application', media: 'all' %>
    <%= favicon_link_tag asset_path('flavicon.png') %>
    <!-- Uncomment if you import CSS in app/javascript/packs/application.js -->
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js" data-turbolinks-eval=false></script>

  </head>

  <body>
    <%= render "/shared/flashes" %>
    <%= yield %>
    <%= javascript_include_tag 'application' %>
    <%= javascript_pack_tag 'application' %>
    <script>AOS.init();</script>

application.js:

//= require_tree .
//= require jquery

day.html.erb:

<div>
 <%= form_tag day_restaurant_path(@restaurant), method: :get do %>
 <%= text_field_tag :date, params[:search_date], class: "datepicker deco-flatpickr", value: @search_date.strftime("%d-%m-%Y") %>
 <% end %> 
</div>

Is anything displayed at all? Do you have any errors in the console? — OliverRadini, Mar 11 '19 at 16:17
I am having the same issue right now... I only have big arrrows . Will le you know if i can fix it — johan, Mar 11 '19 at 17:33
in the console I have this message: ```Uncaught TypeError: Cannot read property 'prototype' of undefined at Object. (flatpickr.js:8) at n (bootstrap 79f8d225c38a4f262853:19) at bootstrap 79f8d225c38a4f262853:62 at bootstrap 79f8d225c38a4f262853:62``` — Caroline Mazé, Mar 12 '19 at 09:04
@CarolineMazé The configuration you have for the javascript is valid, though there's a comma missing after `allowInput: true`, I have tested it and it works. Are you sure that both the flatpickr js and css are being correctly imported? Is the element `.datepicker` definetely available when the code is executed? — OliverRadini, Mar 12 '19 at 15:35
Yes i put the comma but it still not working... Flatpickr js and css are correctly imported. I don't understand "Is the element .datepicker definetely available when the code is executed? " — Caroline Mazé, Mar 13 '19 at 13:17
Ah, ok - what I mean is, when that code is run, which may be when the page loads, is the element with the class `datepicker' ` present on the page? You could check by running `console.log(!!document.querySelector('.datepicker'))` before the `flatpickr(` call — OliverRadini, Mar 13 '19 at 15:41

score 3 · Accepted Answer · answered Mar 13 '19 at 16:52

3

We finally find why the flatpickr doesn't work anymore: it was beacause we upgrated the webpacker version 3.5.5 to 4.0.1. When we downgrade the version or webpacker it works again ! thank you for your help !!

answered Mar 13 '19 at 16:52

Caroline Mazé

133
2
11

Calendar is not displaying with flatpickr -

1 Answers1