amsul/pickadate.js

v5 feedback

DanielRuf opened this issue · 5 comments

DanielRuf commented

We want to hear your feedback regarding the upcoming v5 release.

v5 brings the following changes:

  • native JavaScript (ES5, transpiled from FlowType)
  • no jQuery dependency anymore
  • reworked pickers
  • fresh clean design
  • many improvements from the ideas for v4

https://github.com/amsul/pickadate.js/tree/future

Docs: https://amsul.ca/pickadate.js/v5/

callaginn commented

Overall Feedback

I'm a HUGE fan of the new super-clean design and the removal of jQuery as a dependency. I've also found it's a lot less glitchy than v3, which I used on this site:
http://elysrestaurant.com/reservations

However, I did run across a few issues when setting v5 up:

Can't Hide Timepicker

Couldn't figure out how to hide the timepicker GUI via JS options -- so ended up hiding it via css and formatting the string with the optional template argument:

.pickadate--footer {display: none !important;}

var picker = pickadate.create({
    template: 'MMMM D, YYYY'
});
	
picker.setMinimum({
    value: new Date(),
});

pickadate.render(document.getElementById('input-date'), picker);

Rendering Issues with IE11

I also had multiple issues with IE11, which I documented fixes for in issue #1155. Most of them involve easy polyfills -- but one of them required an edit to the plugin code:

Pickadate v5: In the Wild

I've had v5.0.0-alpha.2 running on one of our sites for a few months without any further issues:
https://gennabennas.com/private-dining

Note: I'm currently using Codekit to compile it to ES5, but will eventually upgrade that site to ES6 with ES5 fallbacks. I'm a newb to ES6 though, so taking my time.

  • 👍2
amsul commented

@callaginn thanks for the feedback!

The IE bugs should be fixed before we can progress v5 into "beta".

Regarding the time picker hiding, did you try setting the mode state to date? That should hide the time picker. It doesn't seem to be documented yet.

Are you installing v5.0.0-alpha.2 with npm? It should already be compiled to ES5 in the bundle.

chrissvo commented

Cool stuff, was trying this out in a new app, seems to work pretty good!

2 questions:

  • Is there some hidden support for 24 hour time-picking yet?
  • alpha-3 seems to remove the time-picking footer altogether?

As a suggestion: If you are time-picking in the same box you might need a close button

Zuushi commented

Hello,

I really enjoy the project even if I had hard moments to do simple things (which I could not find any help in documentation).

I am currently using it on a small project. I was asked to allow users to select time from 9:00 to 18:00 (French time). I have done something quick and dirty to hide AM : PM Meridian and to display time from 00:00 to 23:00.

Feel free to ask.

Best regards

Shaker96 commented

Hi,

Implementing this version now since I'm getting rid of jQuery!

Are the buttons for today, clear, close going to be included? as well as the options selectMonths and selectYears