Materialize: Addition of time picker

[newmanw]

Not sure if this makes sense within existing date picker, or a separate element. However it would be nice to be able to pick a date and time.

[syedsuhail]

It would be great if there was option for both a separate element and along with the existing date picker. Will this be implemented in the near future?

[CoDEmanX]

In Android 5, there's a separate dialog for time picking. It's very well designed, it looks like a clock with two rings of labels (1-12 and 13-24), or, if your locale uses 12h format, one label ring and two buttons for AM and PM:

After picking the hour, there's a transition of the label ring(s) to a label ring for the minutes, in 5 minute steps. You can either tap on one of them, or drag to enter a precise minute. A confirmation is required after picking the minute to close the dialog.

If you click on the hour at the top, it will return to the hour picking mode (also with a nice animation).

[syedsuhail]

This is great for mobile but there is no material design Date time picker for the web.

[serkandurusoy]

The original pickadate.js which materialize's is based on does have a time picker. So perhaps, that could be extended similarly.

[Dogfalo]

Echoing what @syedsuhail said, these time pickers are nice for mobile devices, but they do not work so well on desktop devices. More thought will have to go in to these.

[bimmlerd]

I'd love to see some sort of timepicker as well :+1:

For the moment if would be great to add a little bit of styling to the time input, as it is currently completely unstyled.

[boustanihani]

:+1:

[carlosperate]

@Dogfalo It's been quite a while since this was suggested, are there any plans to implement some kind of time picker?

[larikitty]

@Dogfalo, I'd love to see some kind of time picker, as @carlosperate mentioned earlier.
I need to use these pickers right now and no one is avaliable.

[ABeltramo]

Heavily inspired from http://simeonc.github.io/md-date-time/ I develop this very simple time picker for my project. I'll try to keep it as simple as possible.
Require Materialize and jquery.

http://jsfiddle.net/kakamiokatsu/o3osy173/

Any feedback is welcome!

[boustanihani]

I found this one by chance, looks promising: https://github.com/weareoutman/clockpicker

[philipraets]

@ABeltramo : that one (md-date-time) is awesome and it has a date- and timepicker

[ABeltramo]

I see it but I need somenthing simpler and I don't want to include angular..

[aron-bordin]

:+1:

[san]

:+1:

[boustanihani]

This one also looks nice: https://github.com/mattkrick/lolliclock (its based on clockpicker)

[ricardodovalle]

:+1:

[benjamin79]

+1

[Neotrixsx]

:+1:

[kevohagan]

:+1:

[fabyeah]

:+1: I'm also all for the Android/Lolliclock implementation. Don't care if it's the same on web as on mobile.

[netm]

:+1:

[boustanihani]

this one also looks nice: http://material-ui.com/#/components/time-picker

[schrenkb1]

:+1: This along with date pick would be a great addition

[patrickgordon]

Any appetite for something like this @Dogfalo and co?

[oakmad]

:+1:

[titus88]

:+1:

[ckornaros]

:+1: Datetime picker would be a great improvement !

[thomaslarsson]

I second a combined date and time picker.

[byrnedo]

:+1:

[fcgomes92]

+1 on a datetime and a time picker (:

[crystalpal]

A combined datetimepicker would be very nice

[akshaykmr]

+1

[hueyy]

+1

[blinchi]

+1

[9andresc]

+1

[mohamnag]

so if this makes a change, +1 from me too ;)

[damondicenzo]

+1

[sebastianLapcevic]

+1 We need this

[kingzbauer]

:+1:

[acenario]

+1 Where is the time support?

[zeeshanjan82]

+1

[tutotours]

+1 Time support would be awesome

[NikiShah]

Input type=type is there in css file What is the class and js required?

[tutotours]

Docs for timepicker are here : http://amsul.ca/pickadate.js/time/
Two things missing : datetime picker and timepicker with material

[YoshiYo]

Any solution ?

[chingyawhao]

I made some modification to https://github.com/weareoutman/clockpicker
Now, it can be used as a addition clockpicker to materializecss

https://github.com/chingyawhao/materialize-clockpicker

[boustanihani]

@chingyawhao great work man, could you please make a pull request or maybe publish your work on atmosphere ?

[chingyawhao]

@boustanihani thanks, but I'm not too familiar with git...can you fork a branch..?

[boustanihani]

I'll take a look...

[boustanihani]

Forking is not an issue, but I never used grunt before :( so I guess we have to leave this for the material guys...

[chingyawhao]

I see...thanks for your help anyway

[qsvprogram]

Please add TimePicker and DatetimePicker like "Bootstrap Material DatePicker"
Demo: http://t00rk.github.io/bootstrap-material-datetimepicker/

[WebStar007]

+1

[Tobi042]

+1 for chingyawhao's design. Looks really good! :)

[chingyawhao]

Thanks @Tobi042...

[QuintinAdam]

+1

[SeyZ]

+1

[tapjay]

Would love to know if there are any plans to implement the date/time picker and if so what the timeline is looking like.

[SuperDJ]

+1

[sillysachin]

+1

[BenjaminRosell]

+1

[Zyquivilly]

+1

[THPubs]

+1

[FelipeLimaM]

:+1:

[laverix]

+1 :laughing:

[FuzzyRhombus]

+1

[qrobin]

+1

[yzargari]

+1

[lvalladares]

+1

[cdagli]

+1

[cyberinferno]

+1

[ahmedtabrez]

+1

[muroshi]

This one is nice: http://jonthornton.github.io/jquery-timepicker/

[patricklindsay]

:+1:

[Kukks]

+1

[ahmedtabrez]

:+1:

[patricklindsay]

I ended up using @chingyawhao's materialize-clockpicker

1) Copy the JS and CSS into project
2) Create a text input which includes timepicker class
3) Add the following code to your application.js or wherever you fancy. This initialises the time picker as well as stop error styling being eagerly activated if you are using client side validations.

  $('.timepicker').pickatime({
    twelvehour: true,
    donetext: 'Done',
    beforeShow: function() {
      activeElement = $(document.activeElement)
      activeForm = activeElement.closest('form')[0]

      // Remove existing validation errors
      activeForm.ClientSideValidations.removeError(activeElement)

      // Prevent a validation error occurring when element un-focusses
      activeElement.disableClientSideValidations();
    },
    afterDone: function() {
      activeElement = $(document.activeElement)
      $(activeElement).enableClientSideValidations();
    }
  });

Thanks @chingyawhao !

[RoarG]

:+1:

[jaitaiwan]

It looks like the above code doesn't seem to be working so well... seems to conflict slightly with the pickadate dom for me.

[artfable]

If you want, you can take my solution.
https://github.com/artfable/plugins/tree/master/timepicker

[karray]

+1

[Queatz]

:+1:

[roccomuso]

+1

[dohvis]

:+1:

[rickyhopkins]

:+1:

[stints]

:+1:

[Dark1hp]

:+1:

[seifsay3d]

+1

[clandestine8]

This is one i made a while ago, not to many options. It CSS Powered so its quick, not a lot of JS going on. If you want to fork and fix it up go for it. Theme is set for the project i was working on by everything is editable. Materialize or pickatime is not a dependency, just jQuery. Auto-initializing, just use the right class on a text field.

https://github.com/clandestine8/GMD-SimpleFancy-Timepicker

[hootener]

I ended up using @chingyawhao 's as well. The styling and look are great, but I think if a solution is officially incorporated into materialize it would be served using the pickatime library from Amsul. This would provide a consistent interface between date picking and time picking within materialize, which would be much more straightforward for developers adopting materialize as their front end framework of choice.

If time permits, I'm considering trying to shoehorn @chingyawhao 's picker into materialize using the pickatime library instead of clockpicker. I think @chingyawhao 's picker really nails the look and feel of materialize, but the underlying JS library is a bit cumbersome compared to the simplicity and straightforward nature of pickatime.js. Is this something the materialize devs would be interested in me working into a PR? I hope to be able to do this, but once again, it all comes down to time for me. Hopefully I can make it happen.

[doodirock]

Wondering if this is going to happen at some point. Seems like we really need a time picker

[jaitaiwan]

We resorted to using the timepicker that comes as an add on to the one used in the geeks lab materialise admin them. There's a demo used which you can use to see how it works

On Sun, Sep 4, 2016 at 7:19 PM +1000, "Joel Albert" [email protected] wrote:

Wondering if this is going to happen at some point. Seems like we really need a time picker

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub, or mute the thread.

[ncovercash]

any update ? I really want one for a "X minutes from now" style

[albertogregoriophios]

+1..

Does some of the suggestions include a time-picker not referred to TimeOfDay, but TimePeriod instead?. Where it is possible to introduce something like this:

52:42:51

or

00:00:00.123

[RyanThomasMusser]

+1

[kfill27]

+1

[lunatolun]

+1

[mkoczka]

+1

[FillTheCup]

+1

[ReilySiegel]

+1

[Ganbin]

I'm not the only one who wish to see a timepicker in the materialize framework. 👍

What you other are using for replacement for now?

[samuelzhouhe]

+1

[3367894]

+1

[beshambher]

+1

[ryekerjh]

+1 We need this badly

[ncovercash]

I'm gonna _start_ working on this, but it might take me a while
Wish me luck

[Foonz]

+1

[ncovercash]

Would you guys mind having moment.js added as a requisite? its fairly light, however I'm going to extract the code needed

[jaitaiwan]

I know that pickatime.js is made by the same people that did the date picker so that could also be an option

[ncovercash]

I'm looking at https://github.com/T00rk/bootstrap-material-datetimepicker (ignore the name, doesnt require bootstrap anymore)

[ncovercash]

That is pick a time.js

Heres what im working on

[jaitaiwan]

Yeah, I think in materialize admin they added a skin for pickatime 

[ncovercash]

Alright, I'm preparing a pull request

[yanickrochon]

FWIW I think a time picker does also well on desktops with a mouse and keyboard. Users rather click and drag things than select a dropdown list or even type values.

:+1: for a time picker component.

[ncovercash]

I'm getting a PR ready, but I'm short on time today. Here's a JSFiddle (code's messy, couldn't get jQuery to load right)
https://jsfiddle.net/1yt7241c/

[ncovercash]

Can anyone test the above link and provide some feedback before I implement? Thanks

[jaitaiwan]

I did some tests, its a great first start. Here's my feedback:

• You can't drag the time pieces
• There are no animations or smooth transitions
• Bottom buttons should be centred

Just my 2c. Hope that helps!

[ncovercash]

Thanks, ill work it

[ncovercash]

I can't figure out quite how to make them draggable. Any tips?

[ncovercash]

I changed the buttons, hopefully they are better now.

[jaitaiwan]

I feel like an SVG is the easier way to go… but you’d probably need to do some maths to get that to work and tie in with mouse x+y

[ncovercash]

It's an SVG, I just dont know how to make the mouse interaction work.

[Ganbin]

Hello, Nice work. If I can give my 2 cent. The OK Button is not clear. I expect that the ok button will validate and not let us choose the minutes. Maybe a button which let us change the hours and the minute and then click OK only to validate the choice.

Maybe to click on the hour could allow us to choose the hour and to click in the minute will allow us to choose the minute.

[ncovercash]

Would changing the OK button to "NEXT" on the hour picker work?

[ncovercash]

https://jsfiddle.net/1yt7241c/3/ try this.

[jaitaiwan]

@smileytechguy To get dragging working, you'd need to setup:

1. When the clock is clicked (touchstart, mousedown) events, register an event handler on the window for the touchmove and mousemove events. These events will send the x,y coords of the mouse or finger which we can use to determine the angle around the circle.
2. When we setup our touchmove and mousemove events we'll also need to setup a touchend and mouseup event to cancel the event listeners.
3. To calculate the angle around the circle we need to get the center of the clock (x1, y1) and pass it into Math.atan2. The mouse position is (x2, y2) so we can get the angle of the mouse around the clock (in radians not degrees) by calculating Math.atan2(y2-y1, x2-x1)

From that you should have enough to work with to get the dragging working. The math might need a little tweaking and I'm sure someone more mathy than I will chime out if I've made any mistakes here :)

Hope that helps!

[ncovercash]

Thanks for the tips, but I don't think I can do all that. Maybe in a later PR. For now, unless anyone thinks I need to change anything on https://jsfiddle.net/1yt7241c/3/, I'll make an initial PR.

[Ganbin]

Sorry to be so meticulous, but when clicking the 'next' button, the 'cancel' button should turn to 'back'.

Also when we click 'next' the button change to 'OK' which is good, but if we click cancel to choose go back to hours, the 'OK' button should thenchange to 'next' again and not stay 'OK'.

[philipraets]

I've made a pr a while back: https://github.com/Dogfalo/materialize/pull/2732
Maybe the code can help you.
it's responsive and the timepicker is draggable.

[doodirock]

@philipraets This seems perfect. Why wasn't this merged in? No movement from authors?

[philipraets]

I have no idea why it hasn't been merged yet.
If anyone wants to try, test, bugfix or update it to the latest code of materializecss and merge it, please do. I don't have time to maintain it, and my project hasn't been updated with the latest code from materializecss after I've made this, but the date-and timepicker are used on a daily basis at the company I work for.

[philipraets]

I've created a codepen so you can see it in action: http://codepen.io/anon/pen/woqevN

[jaitaiwan]

I just tested on a few phones, and laptops of varying os and browsers. It's practically flawless!
_____________________________
From: Philip Raets [e-mail]
Sent: Sunday, November 27, 2016 07:07
Subject: Re: [Dogfalo/materialize] Addition of time picker (#473)
To: Dogfalo/materialize [e-mail]
Cc: Comment [e-mail], Daniel Holmes [e-mail]

I've created a codepen so you can see it in action: http://codepen.io/anon/pen/woqevN

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub, or mute the thread.

[ncovercash]

Looks great! Someone needs to get @Dogfalo or another maintainer to approve the PR, probably a lot to merge now.

[kirtangajjar]

cc @acburst

[shigawaka]

Any updates on this guys?

[ncovercash]

@shigawaka not afaik
Personally, I just forked his version and used it

[calitidexvii]

@smileytechguy Did you successfully merge the pickatime code into your fork of v0.97.8? I don't see the code in your master.

[ncovercash]

@calitidexvii no i didnt, that fork is unrelated afaik. havent messed with it in a while

[calitidexvii]

@smileytechguy Thanks.

Has anyone else worked on updating PR 2732 for v0.97.8? I'd be willing to work on it if I could get a commitment from the maintainers to actually merge it, or an explanation of what's missing. It seems to be the most complete implementation and works great on desktop.

[fabyeah]

Like other people, I'm using materialize.clockpicker from @chingyawhao. Why not create a PR based on that? Visually at least it's very nice.

[taorg]

I do agree about it, it's vert nice, but it lacks some functionality
You can't change easly year (current datepicker it's also a bit buggy about)
I would be nice to have a single datetime picker field.
And maybe a range picker.
Anyway this seems much better than current solution.

[ghost]

Has any time picker been implemented yet? Is there a reason some of the examples above can't be?

[philipraets]

I've created a new clean PR #4445 which is compatible with the latest code.

[tomscholz]

Added in https://github.com/Dogfalo/materialize/commit/12003cea3c932232d59c25560f0c2973ab46ec11