Date and time pickers

[sgomes]

As requested by @geordee:

It would be great to have standard components for date and time fields, in line with material design guidelines.

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

[rafaelrenanpacheco]

In the meantime, here is an alternative: https://github.com/T00rk/bootstrap-material-datetimepicker

[akashnimare]

@samccone Can you tell me something about how to implement it?

[lihan]

+1

[Garbee]

Please do not ask for help or "+1" issues. Help can be asked for on StackOverflow and "+1" and other unconstructive comments do nothing to further the discussion about implementing new components.

If you want to get updates, you can subscribe to issues in the right sidebar as stated in our FAQ. Otherwise, please comment when you have something constructive to add to issues.

[hownowbrowncow]

I put together a timepicker in plain JS with no dependencies for a project I am working on. Eventually I may build a datepicker but currently only have a need for time. It's probably the lesser demanded of the two but FWIW i figured i'd share. It needs some work on some style issues and a few minor JS bugs but most of it is trivial.

Also thanks for MDL!

[ghost]

@hownowbrowncow that looks great, I am in search of a material date picker, if your lib was a date picker I'd have gone with it, Nice work though, it looks pretty good.

[vmateixeira]

@hownowbrowncow great job! It looks really nice. If it had drag and drop it would be a plus.

[dgrubelic]

Hi... What is the status with this one? Anyone started working on date picker?

I started to work on it on my own since there was no mention of date-picker for months. Please keep in mind that this is still early in development so any markup, logic or any other issues are normal (helps me develop the component) and will be removed before Pull Request.

https://github.com/dgrubelic/material-design-lite/commit/60ccb2a98e1f0cc420705d5224070bd36566a5aa

Also, i would be very much thankful to get any feedback possible. I think it's time that we get this thing implemented. :)

[dgrubelic]

Hi, what is the policy regarding attaching two components on the same element? For example, something like this:

<div class="mdl-textfield mdl-js-textfield mdl-datepicker mdl-js-datepicker></div>

So, textfield input would be inside this element but also datepicker widget would be rendered too. I somehow think that this shouldn't be a problem since there is a case with button and ripple components, but i want to be sure before development.

[sgomes]

@dgrubelic There's currently no progress on this on our side. It'll likely be a while before we're able to focus on new components, as we're going to be targeting big infrastructure changes first on the road to 2.0.

Thank you so much for the initial work on this, though! We'll be happy to review what you've got once you get it to a state you're happy with, and then take it from there :) This is what happened with mdl-list in 1.1, for example.

As for using multiple components on the same element, it's not generally a problem, as we're doing it with things like buttons, like you mentioned. However, you may run into problems if you're setting up multiple listeners for the same event, leading to race conditions, so that's one thing to watch out for.

[dgrubelic]

Can anyone from the MDL team help me out with this one? Picker feature isn't really clear from MD guidelines, so i'm asking here...

dgrubelic/material-design-lite#8

[sgomes]

Just answered the question on your repo, @dgrubelic, hope this helps!

[dgrubelic]

Thank you for your response. I'll continue conversation on my repo.

[westy92]

I know https://github.com/T00rk/bootstrap-material-datetimepicker was mentioned before, but it had dependencies on bootstrap and bootstrap-material-design. These dependencies have since been removed and it is only dependent on jQuery and Moment.js. I was able to successfully add it to my MDL site without the previously-present formatting issues.

I'm using this for now but am looking forward to @dgrubelic's contribution!

[dgrubelic]

As i answered to a comment on my repo, i plan to have it in PR by the end of this week. Basically, most of the dev efforts have been done but there are still few more fixes and tweaks left.

Also, you can clone my repo and report any issues and improvements even before i submit PR.

[dgrubelic]

I mentioned issue from my repo, as i understood, question is about combining date and time picker into one component. Since there is no MD guidelines, we would need MDL design team guidance.

Imho, it should be two separate components.

@sgomes Can you please check out this one?

[sgomes]

@dgrubelic I think whether to implement it as one or two components is more of a technical decision; I don't expect the Material Design team to strongly favour one approach over the other.

I agree with you it probably makes more sense to have this as two separate components, particularly when looking ahead to 2.0.

[The4thLaw]

For what it's worth, Google Agenda on Android uses two separate components:

• Tap the date field
• Select the date
• Tap the time field
• Select the time

Both are also described separately in the guidelines (https://www.google.com/design/spec/components/pickers.html).

[dgrubelic]

Ok then, as far as i'm concerned, they will be two different components.

It's just that i still dont know when will i start working on time picker. I want to finish date picker first.

Brw, thx @sgomes and @The4thLaw for replies.

[RanzQ]

In case someone wants moment.js compatibility easily, this is an option: https://github.com/naxeem/Pikaday-Material

The implementation by @dgrubelic is awesome but I had some problems with it, buttons were floating outside the picker element (this might be due to dynamic client-side rendering though) and I guess it's not finished yet? A codepen or other online demo would ne nice to see how it should work. :)

[dgrubelic]

Can you please provide CodePen to show how you tried to implement date picker.

Also, you have demo.html page inside src/pickers folder with lots of examples for every possible usage of date picker. Personally, i haven't found any rendering problem so far. I use date picker in angular app and everything is working as expected.

[RanzQ]

@dgrubelic Sorry, by bad. It was about 2 weeks ago I tested it. Now updated and it works fine. :)

[puranjayjain]

If someone is still looking for both the pickers, you can try https://github.com/PuranjayJain/md-date-time-picker

[sbelyankin]

@Garbee , here is a great idea: how about you provide us with the Date and Time Picker component instead of posting unfriendly comments towards people searching for its implementation? You did the same thing on issue #782 which was opened over 9 months ago, never resolved, closed in favor of this issue which still doesn't appear to be anywhere close to completion. If somebody is saying +1 to this, that should be an indication that it is a feature desired by the masses. Don't you already have Google Groups where you can be useless and not complete any of your customers' requests for features? Why bring that mentality to github?

[sgomes]

@sbelyankin The previous issue was closed because of unhelpful comments and personal attacks that drowned the discussion of the feature itself. Let's not let that happen here.

Folks, please use the "Add your reaction" feature on the top level issue if you want to add your support to this being implemented. And thanks for all the work so far on your PR, @dgrubelic!

[stianflage]

are there any plans of further developing the datepicker @dgrubelic ? Looks very good so far

[traviskaufman]

FYI we will be building date and time pickers Ito our next major version of MDL. It's still a bit far off in the future, but it is on our roadmap. See #4506 and #4507

[ghost]

@traviskaufman does that mean v1 will not get a datepicker?

[sgomes]

@hir3npatel: We're happy to help any developers wanting to contribute new components into v1 (like we did recently with chips and v1.2), but unfortunately we don't have the time and resources to do it ourselves.

If anyone is willing to take the time to polish up one of the existing date picker implementations and PR it against v1, we'll be happy to review it and assist with any necessary changes.

[rwoloszyn]

Guys Is datetimepicker available in MDL, already ?

[dgrubelic]

PR is submitted more than month ago. It took me some time (due to some private stuff) to tackle some UX issues before i could submit PR.

[kisuka]

The Pull Request by @dgrubelic looks pretty good.

[iryan2]

Great, hope it gets accepted soon! That's just the datepicker though right? No timepicker yet?

[dgrubelic]

Yes, this is just datepicker.

[marcolafranca]

Hi, very good component dgrubelic. When is MDL release scheduled with this component? Thank you :-)

[dgrubelic]

I have no idea, PR has been submitted more than 3 months ago. Seems like MDL guys have given up on v1 and focused only on v2. I don't know if this will ever be merged into production.

@sgomes @Garbee any thoughts on this one?

[Thanood]

Just an idea: maybe you could release it as a supplemental package. Like mdl-ext or one of these select wrappers..

[marcolafranca]

Hi, PR has been closed #5072 . @dgrubelic Can you release this as a custom package on NPM to get this distributed to developers? Thank you very much.