Show HN: Made my own date picker for AngularJS | Hacker News Reader

Show HN: Made my own date picker for AngularJS

github.com

44 pointsmobinni43 comments

One month ago I tried to find a nice datepicker directive for angular. "tried". Couldn't find one that wasn't broken somewhere. Ended up using the angular-ui one, and spent hours and hours patching the brokeness (options not being taken into account, dates needed to be formatted for the initialisation, etc).

That's where I realised that even an active ecosystem as the angular one is not enough to produce quality libraries/modules for basic stuff as a datepicker..

It's a bit weird, really. Almost all systems have some dependency on modifying dates and times, yet many big frameworks and languages have completely broken support for it.

Both Java and Javascript, which is the languages I know best, have had big issues in the past. One had to use other libraries (Joda and Moment comes to mind), but that again is a problem when other libraries again doesn't use the same libraries for handling dates. Java 8 fixes some of this, and browser support has fixed some of the major ones in JS, but it will take a long time until one can be completely free of the hassle.

At my work, even in production we still have to use Joda Time to support proper datetime stamps. Momentjs is pretty much the same for JS at this point. I think my datepicker works pretty well, I just added a demo if you visit the github page at http://mobinni.github.io/material-date-picker/ you can test it.

AngularStrap has one which works rather well - https://mgcrea.github.io/angular-strap/#/datepickers

I used the angularstrap one, it's pretty good!

To second this with my own experience: Very many issues in angular-ui can be resolved by using angular-strap instead.

Dates are far more complex to manage than most people think. Even though a datepicker is something basic needed on most websites, it seems it needs a lot of effort to create a good one which works everywhere.

Indeed, I did my best to keep the dependencies minimal in this one. Although it's angular reliant it only has one dependency to momentJS

> Even though a datepicker is something basic needed on most websites

This is why I don't understand the incredibly bad support for the HTML date/time inputs (http://caniuse.com/#feat=input-datetime)

In theory they allow using the platform convention (i.e. on iOS the native datepicker is usually much nicer than whatever you can do in HTML).

Luckily Spartan (new Internet Explorer) will support it. Unfortunately given the recent track record of Safari development, I don't think we'll see support across all browsers anytime soon.

Technically you are right, but I find that as a developer when management decides on a certain path of technology you have to work around it's flaws and try to make something that has the look and feel of something made with quality, even if the code will turn out ugly 99% of the time

I'm actually relieved to find out it isn't just me and that others have been frustrated by this too.

My boss thinks I'm an idiot because I struggled with ui-datepicker in angular (being used in a search field). I had to over-explain that it is broken and still noone believes me when I tell them that the Jenkins build gives a different result from the same build but on localhost.

The second time around went better as I was forewarned, but then I had to have 2 datepickers (from and to dates) and that broke it scope-wise.

Oh yes, I had to use it as a range as well, and of course it's not supported, so you need to do everything by hand on the controller..

It should be mentioned, the UI Bootstrap one has a lot of fixes in master currently that addresses the issues - we are close to the 0.13.0 release (after work by a new core team that was assembled a month and a half ago), which should address the problems with Angular 1.3 present in 0.12. Angular 1.4 compatibility should be quick from there, along with massive performance improvements in 0.13.1.

It's not a particularly great wrapper (I've had to handle a couple minor issues in a further wrapper directive), but for the two-pickers situation where you want a range, I've recently used https://github.com/fragaria/angular-daterangepicker

Which is itself just a directive wrapper around Dan Grossman's DateRange Picker for Bootstrap https://github.com/dangrossman/bootstrap-daterangepicker

Of course, those have a lot of dependencies, so if the app isn't using bootstrap/moment/etc. it isn't as useful.

Same experience here. Caught me by surprise, thought I'd just inject one of many solid ones... Ended up building something custom myself (which is a bit of a pain as dates in JS isn't the most straightforward thing in the world).

We use angular-ui-date https://github.com/angular-ui/ui-date, which works pretty well for us.

It's actually shame that we're already in 2015 and html date inputs are not standardized. http://caniuse.com/#feat=input-datetime

Exactly what I thought, and even the browsers that can use it, it's not ideal to customize

We built one recently for my company using Ractive.js and moment.js. Suprisingly, it was relatively easy to do (as far as working with date/time/timezone goes).

Missing a link to a demo somewhere on the github page :)

will add :) right now it was a local demo

Make it into a gh-pages demo :)

Was planning to :D looking it up now

http://mobinni.github.io/material-date-picker/example added!

I'm getting the system default font on the dates in the selector in Firefox on the example. Other than that, it looks really nice!

I really wish you can also add in a time picker on here. I don't understand how most datepickers choose not to include a time picker as well.

Sorry, let me knot discredit the nice date picker. I just wish you can add the time picker as well :). I'd definitely use it!

It's a shame that in 2015 we still need to implement datepickers from scratch. Kudo's on your effort :)

It really is, thanks!

I agree, this sort of stuff (especially dialogues in Angular+Bootstrap) is still way too painful.

Really hope Angular 2.0 fixes some of this madness.

When you say dialogues are you referring to modals? If so, I'm glad I'm not the only person who has struggled with this. It took me a lot longer than expected just to get a modal working correctly in Angular. I felt stupid...like I was missing something.

> I felt stupid...like I was missing something.

Angular does that to people. :)

I started writing a library for dialogues (modal window, prompt, alert & confirmation), but stopped as it felt like re-inventing the wheel.

Maybe such a library is needed after all..

Unfortunately this is completely inaccessible - try using the picker using tab, space, enter and arrow keys.

Looks good! Have you considered doing a datetime picker too?

I have not been able to find one using MD.

I have thought about it, but I just haven't had the time to implement it, I'll put it on the features list.

Its a shame something like a date picker needs to be framework specific.

Well it was a project specific feature I worked on that I was allowed to open source, that's why it's framework specific. I would like to port it to vanillaJS, but even then it wouldn't fit the requirements of many MV* cultures

It looks nice enough, but it's not Material Design.

http://www.google.com/design/spec/components/pickers.html

Why should it be?

I think what he means it doesn't comply with the Android implementation. At first I wanted to make it like that, but it didn't seem like it would comply with UX of websites.

True, it's a poorly chosen name. Once I make a range of components I will rename it.

Which AngularJS of two?

PS: looks nice!

Right now it works on 1.2.28 and up. Thanks! Much appreciated.

Reply on news.ycombinator.com