129 comments

[ 4.4 ms ] story [ 191 ms ] thread
From the demos it appears that this doesn't have keyboard support. That seems like a major drawback from an accessibility standpoint.

It does look nice and easy otherwise, though.

Yeah, I agree. There doesn't seem to be an easy way to choose a year. Intuition tells me "this is a text box, I should be able to just edit that text" but it won't let me.
Keyboard support for entering a date manually would be great. The GUI is great. Would like to see what the author could come up with for a pick a time.
I thought that when I use it as a textbox it would automatically auto complete and hint a month, or dynamically show calendar selecting date while I'm typing, it did neither of those things.

Also I haven't looked at the API that hard, but from the examples it looks like it only supports american way of setting the date i.e. DD/Month/YYYY

Update: another big omission, I can select year only by scrolling through it month by month. i.e. try selecting February 12, 2016

Isn't the American way Month/Date/Year?
There is some strange bug in which I cant navigate more than one month before or after. It happens after I fill the initial date box. And then as I play around with the other dropdowns, I suddenly won't be able to move more than one month back or forward in any of the dropdown pickers.
I do so wish this came out about a week ago. I had to resort to jQuery UI's datepicker for a thing at work.
Looks great. I like that it is big with plenty of spacing. Most date pickers seem to squish together the numbers without any apparent reason.

It'd be so helpful if makers of these js elements put screenshots of what the element looks like on top 3 mobile devices. Of course, this raises the question that they would need access to these devices. Which raises the question, for people who do mobile-heavy web dev, how do you test things rapidly beside having an iPhone next to you to constantly hit refresh?

iOS Simulator with desktop Safari's inspector if needed. If it is a more simple page then a separate browser window resized to mobile size.
Thanks! Also just found browserstack.com
How does this differ from the jquery UI datepicker?
Weighs 6.66kb (2.8kb gzipped) whereas jQuery UI datepicker is 42kb minified (or 30kb (11kb gzipped) via the Closure Compiler).
How much of that code on UI is for accessibility or backwards compatibility
Nice. It needs a way to "click off" the picker to close it, without choosing a new date. E.g. the date is pre-selected, I open it, and then I want to close it again without changing the date. I intuitively expected that if I click the original field it will toggle off again, or I clicked elsewhere on the page it would close, like a lightbox overlay.

(tested on iPhone iOS 5.1)

You should add it to http://microjs.com/
I thought the idea behind microjs was libraries/frameworks that didn't require monoliths (like jQuery).
Doi, didn't read thought it was a stand alone date picker.
> whereas jQuery UI datepicker is 42kb minified

For anyone who cares, the Closure Compiler gets jQuery UI Datepicker down to 30kb (11kb gzipped).

Not quite as drastic as he claims but still significantly larger compared to his 6.7kb (2.8kb gzipped).

What functionality is sacrificed for size?
Does December work? :3
That was my first question too! So I tested it and it comes with December. Actually, it has all of the 12 months - no sacrifices there. Amazing stuff.
Phew, thanks for this. Now I can sleep at night again.
I found the copy on the demo page to be very clever in anchoring different emotional cues to specific days of the year.
https://github.com/amsul/pickadate.js/blob/gh-pages/pickadat... the code is a giant var statement. I don't know why, but somehow that bothers me.
The lack of semicolons and the use of jshint bothers me.
The fact that the code is very neat and is well documented bothers me.

Also the fact that javascript is a lot more readable when you put a blank line between every two lines bothers me (a lot!).

And that it works perfectly and looks great, man that bothers me.

    // If datePassed is true
    else if ( datePassed === true ) {
Yes, very well documented. >.>
Indeed. In fact, I'd posture that the comments, after the first, are wrong; the lines' intents are to _set_!

    // Set the element as readonly
    element.readOnly = true

    // Get the date today
    DATE_TODAY = P.getDateToday()

    // Get the date to select
    DATE_SELECTED = P.getDateSelected()

    // Get the month to focus
    MONTH_FOCUSED = P.getMonthFocused()

    // Get the date ranges
    DATE_MIN = P.getDateRange( SETTINGS.date_min )
    DATE_MAX = P.getDateRange( SETTINGS.date_max, 1 )

  // Return the calendarObject
  return calendarObject
It's like this all the way through the code!
It doesn't lack semicolons, it's only using them where necessary.
(comment deleted)
looks like a single var pattern inside an immediately invoked function expression to me. works well and great for readability
Thank you for not calling it a "self-executing anonymous function".
I'm a proponent of simply calling them 'immediate functions'.
Yea, I'm not a fan of this pattern, it's a pain to step through with a debugger.
Sometimes I feel like the JS community is more concerned with "style" than practicality. I always do one variable per var, so much more readable and much easier to debug.
Could really use a paired time picker. Good script though.
Some missing features: - Week starting on mondays - Week numbers
Would be great if you make an option to be able to pick two dates (intervals) just like in Google Analytics.
Can it default to the native date selector on mobile?
I like this, but as others have mentioned keyboard input/editing of dates would be nice.

While we're on the subject of date pickers, is there a favorite among HN users? What have you all used for your web apps?

Arrows should be added around the year for quicker traversal through years.
Some more missing stuff: does not allow to block specific days or weekdays (e.g. sundays) that should not be picked. Also time ranges (hover over a days and the next x days get highlighted) would be nice.
A javascript date picker? Is HN being very expertly trolled?
No. DatePickers, along with Forms, are the bane of my existence. More choices that are brought to light, the better.
There you go - this will make your life easier then:

http://dojotoolkit.org/reference-guide/1.8/dijit/form.html#d...

Too bulky in my opinion. I don't need 90 percent of the things in that sdk.
so dont require them, you only use/build what you want. Its AMD and everything is nicely separated
I should add, I also feel like these big frameworks have all the components and dont do a good job of each component. I rather use something that is by itself but the author is passionate about the widget and it is the best it can be.
It should not be a matter of "feeling", but testing things out. Usually frameworks like Jquery UI, YUI, dojo toolkit do a very good job, jquery doesn't provide any widget infrastructure, but still it does a good job afaik.
I don't really like Dojo, but their system is so modular, you don't have to include 90% of stuff. Kinda like jQuery-ui, you can choose not to include all the other cruft.

Now with Dojo AMD (1.7+) it's even better and cleaner. You only require what you need and then build.

Please, never use the Dojo Toolkit. I was forced to use it on a project and working with it was reinventing the wheel while pulling out hair. It was overly complicated for something that needed to be straightforward and simple.
Amen to that. The doc for it sucks too (not that there's enough there, but most doc for it found by google et al is obsolete/deprecated. And last but not least... the plugin ecosystem for dojo sucks even worse, and whatever widgets/dijits actually exist for it, usually look like @ss. The only one who seems to be committed to dojo is...IBM.
ESRI the top worldwide provider of GIS software is also sold on Dojo and Dijits. I agree that their digits are uglier than Android Cupcake. I have had to use Dojo on several projects now and I also agree on how abysmal their docs are. They provide tiny little code snippets but aren't even clear of the context. "Ok, fine... where do I PUT this snip... isn't this a TUTORIAL???!!??" I've been much happier with the look and feel of ExtJS but its documentation is even worse.
Out of curiosity - what did you had to reinvent? The whole point is so that you could use existing components provided to you.
Agreed! I had no idea how many bad ones there were until I needed one for a project.
And yet you keep us in suspense...
Wish it allowed me to type in the box..the interaction is a bit confusing..
This was actually the first thing I tried, half expecting it to smart match the text.
Looks great! And with a few (minor) modifications I was able to get it to work with a non-jQuery framework! Thanks for that. I'm getting fed up with all of these ".js" projects that rely heavily on jQuery when they don't need to. I'm going to keep this library in mind for a project I'm working on.
+1 on years - for selecting your birthdate, it'd take quite a while. Besides that, nice job!