Material Design Date/Time Picker

Now with more Repo/bower!! https://github.com/SimeonC/md-date-time

I haven’t been able to get around to updating this for the last while as I’ve been working on some internal projects, hopefully they’ll see the light sometime in the next year or two!!

As I was working along I came across this Material Design Spec by google, more specifically their excellent spec for date and time pickers that just looks like it works [Link]

Of course for my situation this wasn’t quite perfect for a spec, but no-one has built it so I did what I usually do when faced with this kind of problem, build it myself!! You can see the results below, it’s fairly simple as it stands and I’ve yet to build in the vertical orientation from the spec, but it works and I’m happy with how it turned out.

Let me know what you think in the comments.

P.S. I will have this in some repo somewhere, I commented on an issue in the angular-material repo before I go off on my own.

About Simeon Cheeseman

I enjoy a wide variety of computer and board games, have a BSc in Computer Science and have played percussion for 18 years.

Posted on December 11, 2014, in Uncategorized. Bookmark the permalink. 3 Comments.

  1. Great Work! I was looking for this Picker the whole day!

    Is it possible to add a function which allows you to select the year? And if you could also change the minutes by the clockstyle picker it would be perfect!

    I really like this Plugin, thanks 🙂

    • Thanks! There is a feature to select the year, albeit not a very good one at the moment – the year value is actually a number input, but there’s a bug with the select for months overlapping it (Issue Here). If you jump over to the repo: https://github.com/SimeonC/md-date-time/ we actually ended up removing the clock style as it caused too much usability issues – It looked really neat but the original spec only allowed for hour selection and getting minutes on it ended up being really messy, also the feedback I got was that the clock style picker was OK but digital representations were better and easier to edit.

  2. Great work Simeon , really liked it n m gonna use it for in my project
    +1 respect

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: