By mzachariadis on

Hello everyone,

I want to use jQuery Datepicker, so I tried to add it as a dependency in my theme's library.
I used something like that: 

site-styling:
  version: 1.x
  css:
    theme:
      css/site.css: {}
      css/media.css: {}
      css/print.css: { media: print }

  js:
    js/site.js: {}
  dependencies:
    - core/jquery
    - core/jquery.ui.datepicker

After creating the html code that needed for date picking through an input field, I added Inside the site.js file this:
$('input#checkin').datepicker({ dateFormat: 'dd/mm/yyyy' });

But nothing happened while I'm clicking inside the input text field. I don't get any js error in my browser's development console. If I remove the datepicker dependency from my library then I get an error of undefined function, which means that the datepicker defined correctly.

Any help on this? Thanks !!

⋅ Categories: Drupal 8.x

Comments

Jeff Burnz’s picture

Jeff Burnz commented

I haven't got much time to test etc, but I do notice that drupal.date library calls a longer stack of dependencies:

drupal.date:
  version: VERSION
  js:
    misc/date.js: {}
  dependencies:
    - core/drupal
    - core/modernizr
    - core/jquery.once
    - core/jquery.ui.datepicker

Maybe take a look at date.js for some inspiration?

BTW - is there a reason to not use a date field?

Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.
mzachariadis’s picture

mzachariadis commented

Hi Jeff,

I tried this library with no luck.
I don't use date field to avoid any issues with browsers' compatibility. Also, you can't style this field.
If I could not add the jQuery datepicker then yes I will replace it with a date field or I'll manually add the jQuery ui datepicker plugin.

mzachariadis’s picture

mzachariadis commented

Ok I found the solution. The problem was caused by the class "hasDatepicker" that I used for my input field. I removed it and then the calendar popped up.
Both the drupal.date library or just adding the dependency - core/jquery.ui.datepicker are fine. I used the dependency in my own library, because date.js uses modernizr to define if the date input field is supported by the browser. And only if the date field is not supported then the jQuery datepicker is attached.

Thanks for your help Jeff.