Show HN: Made my own date picker for AngularJS

https://github.com/mobinni/material-date-picker

by mobinni • 11 years ago

44 43 11 years ago

github.com

fougerejo3• 11 years ago

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

mobinni14• 11 years ago

will add :) right now it was a local demo

gberger• 11 years ago

Make it into a gh-pages demo :)

fougerejo3• 11 years ago

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..

maaaats• 11 years ago

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.

mobinni14• 11 years ago

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.

jmkni• 11 years ago

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

mobinni14• 11 years ago

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

skore• 11 years ago

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

louhike• 11 years ago

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.

mobinni14• 11 years ago

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

realityking• 11 years ago

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.

mobinni14• 11 years ago

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

kagamine• 11 years ago

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.

fougerejo3• 11 years ago

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..

Bahamut• 11 years ago

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.

robinson7d• 11 years ago

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.

IkmoIkmo• 11 years ago

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).

timmipetit• 11 years ago

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

flavj• 11 years ago

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

I have not been able to find one using MD.

mobinni14• 11 years ago

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

M8• 11 years ago

Which AngularJS of two?

PS: looks nice!

mobinni14• 11 years ago

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

SchizoDuckie• 11 years ago

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

mobinni14• 11 years ago

It really is, thanks!

velox_io2• 11 years ago

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.

atom-morgan• 11 years ago

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.

buremba• 11 years ago

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

mobinni14• 11 years ago

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

nickik• 11 years ago

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

mobinni14• 11 years ago

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

uptownhr2• 11 years ago

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.

uptownhr2• 11 years ago

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!

lyschoening• 11 years ago

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

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

afandian• 11 years ago

Why should it be?

mobinni14• 11 years ago

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.

mobinni14• 11 years ago

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

arxpoetica• 11 years ago

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).

10dpd• 11 years ago

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

Show HN: Made my own date picker for AngularJS

Related Stories