v3.0.0: rewrite + time picker

[amsul]

Hello all!

I'm excited to say that v3.0.0 should be out soon enough! Checkout the readme for more information or demo it by clicking the button in the header: http://amsul.ca/pickadate.js/

This is a complete rewrite that adds along a time picker. However it also introduces some backward-incompatible changes (for the greater good!). So please be careful upgrading from v2 to v3. This changelog has more details as to what specifically has changed.

At this point, I'd love some feedback and/or testing from the people who have used or would like to use the library. Any constructive feedback or comments would really be appreciated.

Cheers! 😄

[TheSisb]

Can't wait to check out your improvements ;)

[amsul]

@TheSisb thanks for the continuous support, buddy!

[halcyonandon]

Will 3.x still support classic theme? How about the timepicker?

[garbas]

+0 on the timepicker, it looks nice for touch devices, but it doesn't feel "natural" when you're holding a mouse. not yet sure how this could be improved, so i'm just complaining until i find some constructive idea.
-1 on sass, yet another thing i need to keep installed (ruby) i would very much prefer if we would stick in javascript world (with less) or just use plain css
+1 that you didn't use coffeescript

i also notices there is no datetimepicker. is this intentional? i would expect in some case that you could select date and time from one "popup".

and i'll give more comments once i start using it.

tnx for the hard work!

[amsul]

@halcyonandon the “classic” and “fixed” themes will be supported – but the “inline-fixed” one will be removed. The only hold up right now is that there’s a few scrolling issues left to tackle for the “classic” theme on the time picker.

@garbas I appreciate the feedback :)

I agree the time picker is kinda huge and intrusive on desktop. I’m still playing around with the design a bit to make it more comfortable with a mouse. If all else fails, it’s always possible to just switch from the “default” to the “classic” theme when the screen gets big enough.

The decision to include Sass wasn’t taken lightly. I have used LESS over Sass for most projects – but I decided to go with Sass in this case because of the programming ability of the language to spit out different stylesheets. Ultimately, I think the extra dependency ends up worth it. I think Chris Coyier sums it up much better than I do.

And yes, there’s intentionally no datetime picker – at least for the initial release. But I will eventually be adding the documentation on how to “extend” the core (used internally for date and time), which can also be used to create custom pickers.

Oh and yeah, CoffeeScript is awesome – but I’d much rather not deal with the debugging overhead.

[amsul]

@garbas I’ve been thinking about the ruby dependency all day. You made a really good point of sticking in the JS-world. I’m starting to consider switching to LESS before moving to stable. The project can definitely do without the fanciness of Sass and Compass.

[garbas]

@amsul sorry to waste your brain cycles :) tnx for considering it ...

[halcyonandon]

@amsul I'm using the new timepicker, great so far, but here are a couple things that could be improved:

• The timepicker should scroll to the highlighted time automatically (or maybe an option passed to do so). I'd be fine with a solution like scrollPageTo() except maybe something like "scrollPickerTo()
• The timepicker scrolling should lock so if reaching the end of the list, the page doesn't scroll (only tried this in classic)
• The classic timepicker begins abruptly, the holder element should have a top border or something (easy css, but should be included by default

+1 for LESS over SASS

[halcyonandon]

Just noticed, demo does not work for pickatime in ie8, doesn't include legacy.js.

Both the date and time pickers in default mode don't play well with mobile (android native browser). The timepicker doesn't allow for scrolling in mobile and the datepicker appears off-screen from the field in the demo (2.x works beautifully). The default timepicker fixes itself to the top of the screen, thought it just wasnt working at first glance.

[amsul]

@halcyonandon lol, I need to read my own docs more carefully. I'll update the demo soon.

Which version of Android are you testing on? There's a few issues with the time picker but nothing in particular with Android that I can see..

The time picker already does scroll to the highlighted time. Can you show a test case of when it doesn't?

Locking the scrolling at the end of the list is pretty straightforward for desktop. Just add overflow-y: hidden; to the body element on open. But that doesn’t work for touch screens – there would need to be further extensions made with touch events – and that’s why it’s not included by default. If some one writes that and would like to share, I would definitely include it in the collection of extensions.

Oh and yeah I'll add the top border to the picker :)

[halcyonandon]

@amsul 2.3.4, 3.x date and time pickers floats to the very top, outside the viewport (wish i could take a screenshot, maybe i can from browserstack). The overlay screen isn't visible either, so it appears as though nothing happens unless you scroll up.

I'm actually using the classic theme timepicker and that theme displays correctly but touch scrolling doesn't work (default theme also has this problem as well)... I tried a couple different jquery scrollbar plugins to see if i could add a simple scroll bar for touch devices in interim, but turns out those plugins don't play well with mobile (go figure).

What do you think about having an option to render the timepicker as a simple select input? I'm thinking it'd be good to have a fallback to the simplest format if/when it appears certain browsers don't support it (like falling back to native calendar, except rendering the element needed or something).

If you'd like to see my implementation of the timepicker, let me know and ill give you a url via direct msg or something

[amsul]

@halcyonandon yeah, that would be because old Android browsers have pretty bad CSS support. In this case the issue arises with position: fixed and that’s why only Android 3.2+ browsers are supported.

As I mentioned in #117, there is an “extend” API to create custom pickers and fallbacks as needed for each case. However, this undocumented at the moment and will only be documented after it is more stable and v3 has already been released.

I’d definitely be interested in seeing your implementation.. Feel free to shoot me an email reach@amsul.ca :)