mdDateTime - a date time picker

mlb6 commented 9 years ago

Hi,

It would be very nice to have a date and a time picker. This could be inspired by this project : http://amsul.ca/pickadate.js Here are my suggestions (based on use case I already had in some e-commerce projects):

Ability to select 1 or multiple dates (To select a technical appointment with your cable company)
Ability to select a period (To select dates of departure and return in a travel website)
Ability to enable or disable dates based on a model of availability.
Ability to display 1 or multiple calendars.

Thanks

sunny9240 commented 9 years ago

+1

jimmywarting commented 9 years ago

-1 I hate everything that tries to be better then blinks native input date & time controller You are never really going to get the same functionality as the native. It will be bloated with more code dosen't work as good with validation/keyboard shortcuts/styling (overflow: hidden; inline position absolute/fixed) etc. mark my words: There will be bugs to fill. I could give you a hole page with flaws i have seen over the year with all of the picker i have came across. No one have ever been as good as the native.

Have you looked at datetime-local in the newest Android or IOS? its amazing! Responsive & localized with both timezone and language.

One thing you will never be able to fix is letting the picker (date, time, datalist & select) to flow outside of the document/iframe that is smaller then 100x30px

kpgarrod commented 9 years ago

@jimmy that's an interesting perspective. Do you prefer IE's implementation of over pickadate?

On 14 November 2014 11:24, Jimmy Karl Roland Wärting < notifications@github.com> wrote:

-1 I hate everything that tries to be better then blinks native input date & time controller You are never really going to get the same functionality as the native. It will be bloated with more code dosen't work as good with validation/keyboard shortcuts/styling overflow: hidden; inline position absolute/fixed etc. I could give you a hole page with flaws i have seen over the year with all of the picker i have came across. No one have ever been as good as the native.

Have you looked at datetime-local in android or ios? its amazing! Responsive & localized with both timezone and language.

One thing you will never be able to fix is letting the picker (date, time, datalist & select) to flow outside of the document/iframe that is smaller then 100x30px

— Reply to this email directly or view it on GitHub https://github.com/angular/material/issues/648#issuecomment-63029507.

Keith Garrod

Tel: +27-83-3000-988 Fax: +27-86-5757781

jimmywarting commented 9 years ago

no... yes... I'm not sure.

They would eventually catch up and make crapy date picker eventually some day. And then my website would be ready to support it when it lands. It's all about progressive enhancement. Why should modern user suffer because of IE? It will still work but not as good. It's not like something will break. They will still be able to enter a date and time.

I would perhaps want a fallback solution. Tell them how to enter a correct date with ngMessage. Perhaps use a mask:ed input with the support of parser/formaters

jimmywarting commented 9 years ago

Btw, datalist and datetime-local makes a grate combo especially in android at least! demo That is one thing that no picker has... as far as i have seen

blink is continues going to improve the picker even further then it is today and i get all the updates for free!

ThomasBurleson commented 9 years ago

This component is planned for Q1, 2015 availability.

marcysutton commented 9 years ago

The advantage of a Material date-picker versus native ones is a cohesive look & feel and interactive experience across all platforms. Every native date-picker looks different.

kpgarrod commented 9 years ago

+1 On 15 Nov 2014 02:54, "Marcy Sutton" notifications@github.com wrote:

The advantage of a Material date-picker versus native ones is a cohesive look & feel and interactive experience across all platforms. Every native date-picker looks different.

— Reply to this email directly or view it on GitHub https://github.com/angular/material/issues/648#issuecomment-63152076.

jimmywarting commented 9 years ago

Then i want it to be very accessibility. Everything you can do with the native should be possible with the material

marcysutton commented 9 years ago

Yes, all components must be accessible! The date picker will be a challenging one to get right, just as tabs were.

jimmywarting commented 9 years ago

I want to have that tab-able functionality that change focus on yyyy-MM-dd --:-- When I have focus on the month and enter number 2 on my keyboard it should choose 02 and go to next focusable part (dd) since there is no other month that begins with number 2. but if i enter 1 i should stay on the month until i go to the next one or with tab or my arrow key or enter 10, 11 or 12 then go to the next one.

And on my android device i want something totally different? You are definitely up for a real challenging if you are going to win over the native input field. Even that <datalist> or something equal counts to convince me to use a custom picker instead

mlb6 commented 9 years ago

@jimmywarting thanks for sharing with us your wishes regarding this functionality. Till now, the material design team did an amazing job. So, let them decide what should be the best user experience for this functionality. I'm pretty sure you won't be disappointed about the result.

kpgarrod commented 9 years ago

@martin +1 On 17 Nov 2014 00:03, "Martin Le Bas" notifications@github.com wrote:

@jimmywarting https://github.com/jimmywarting thanks for sharing with us your wishes regarding this functionality. Till now, the material design team did an amazing job. So, let them decide what should be the best user experience for this functionality. I'm pretty sure you won't be disappointed about the result.

— Reply to this email directly or view it on GitHub https://github.com/angular/material/issues/648#issuecomment-63241762.

trentdavida commented 9 years ago

+1

SimeonC commented 9 years ago

Hey, just thought I'd weight in - I've been doing some work on building my own date/time picker based off the spec here: http://www.google.com/design/spec/components/pickers.html. (I'm melding the spec together a bit...)

It's a work in progress but you can see what I've done so far here http://codepen.io/SimeonC/pen/XJdWPy.

Some bits I haven't done yet - like the vertical mode, lastly I am using bootstrap as a bit of a helper with the classes (It's for one of my projects which is in bootstrap, but I'm using as little as possible - just the buttons and the positioning for the demo, easily replaced).

You guys are doing a great job of building the material spec here so I thought I'd check in and see if I can help before I go and make my own repo.

kpgarrod commented 9 years ago

@simeon The codepen link doesn't work.

On 10 December 2014 at 23:15, Simeon Cheeseman notifications@github.com wrote:

Hey, just thought I'd weight in - I've been doing some work on building my own date/time picker based off the spec here: http://www.google.com/design/spec/components/pickers.html. (I'm melding the spec together a bit...)

It's a work in progress but you can see what I've done so far here http://codepen.io/SimeonC/pen/OPMdqJ/. It's got some issues I'm working on;

selecting month/year (menu spec needed!)

Attributes for settings

And some bits I haven't done yet - like the vertical mode and that little line in the clock, lastly I am using bootstrap as a bit of a helper with the classes (It's for one of my projects which is in bootstrap, but I'm using as little as possible).

You guys are doing a great job of building the material spec here so I thought I'd check in and see if I can help before I go and make my own repo.

— Reply to this email directly or view it on GitHub https://github.com/angular/material/issues/648#issuecomment-66525269.

Keith Garrod

Tel: +27-83-3000-988 Fax: +27-86-5757781

SimeonC commented 9 years ago

@kpgarrod It should work now, I think I got it wrong at first then fixed it. http://codepen.io/SimeonC/full/XJdWPy/ is the correct one.

lyschoening commented 9 years ago

Someone posted a similar, more polished, date-picker on https://github.com/Polymer/paper-elements/issues/20 a while back. Similar to this one except the month view was scrollable and the left pane acted as a switch between selection modes. Unfortunately the demo link is dead right now.

kpgarrod commented 9 years ago

@simeon Thanks. It looks really nice.

My two cents:

AM/PM selection was not immediately obvious to me.
Digital time would be a nice option .
Switching between date/time edit was not immediately obvious to me.

On 11 December 2014 at 11:40, Lars Schöning notifications@github.com wrote:

Someone posted a similar, more polished, date-picker on Polymer/paper-elements#20 https://github.com/Polymer/paper-elements/issues/20 a while back. Similar to this one except the month view was scrollable and the left pane acted as a switch between selection modes. Unfortunately the demo link is dead right now.

— Reply to this email directly or view it on GitHub https://github.com/angular/material/issues/648#issuecomment-66594273.

Keith Garrod

Tel: +27-83-3000-988 Fax: +27-86-5757781

SimeonC commented 9 years ago

@lyschoening Yea I wanted to do scrolling dates, but I haven't figured out how to do it yet! (I started two days ago) I like that idea of using the left pane as a switch.

@kpgarrod Thanks for the thoughts, I'm not sure how to do 1 any different - that's how the spec pictures show it. I agree with 2, as someone else pointed out analogue clocks are a bit old fashioned now. As for 3, any suggestions on making it more obvious?

I'm going to be actively using this in a "tame" production environment soon so I'll get some feedback from them as well.

fabiusss commented 9 years ago

+1

kschwidder commented 9 years ago

Hi SimeonC, is there any chance that you can share your date/timepicker ? I am using angular material so far but I am missing the date/timepicker directive ! The ui bootstrap implementation is not what I need and ngstrap is functional ok but not from the UI .... I am willing to contribute too.

Thx for your feedback

SimeonC commented 9 years ago

@kschwidder for now it's just on codepen - feel free to grab it off there (the little eye gives you the compiled js/css/html). I'm waiting for a response from the owners of this repo before I go create a seperate repo for it.

ThomasBurleson commented 9 years ago

Love the conversation and ideas here on the DatePicker. :+1:

kpgarrod commented 9 years ago

@simeon It seems that the spec envisages separate pickers for date and time. I guess that may be the simplest implementation. The spec examples don't show a minute selector - I think it is the positioning of the minute selector in-between AM and PM buttons in your codepen that put me off.

There also doesn't appear to be provision for 24hr clock, or for time zone selection in the spec. I think a general-purpose picker would need both of those features.

My personal preference would be for digital time selection with a switch for am/pm in the 12-hour clock format.

On 11 December 2014 at 12:40, Simeon Cheeseman notifications@github.com wrote:

@lyschoening https://github.com/lyschoening Yea I wanted to do scrolling dates, but I haven't figured out how to do it yet! (I started two days ago) I like that idea of using the left pane as a switch.

@kpgarrod https://github.com/kpgarrod Thanks for the thoughts, I'm not sure how to do 1 any different - that's how the spec pictures show it. I agree with 2, as someone else pointed out analogue clocks are a bit old fashioned now. As for 3, any suggestions on making it more obvious?

I'm going to be actively using this in a "tame" production environment soon so I'll get some feedback from them as well.

— Reply to this email directly or view it on GitHub https://github.com/angular/material/issues/648#issuecomment-66601132.

Keith Garrod

Tel: +27-83-3000-988 Fax: +27-86-5757781

SimeonC commented 9 years ago

@kpgarrod OK, that's a good point, I actually liked the clock face for picking out hours as it moved away from that horribly large dropdown style time picker. I know that the original spec called for separate, but I've found that I need a date and time picker far more frequently than I've needed a time or date only picker. From my point of view it just makes sense to have a nice unified interface.

The minutes I guessed at as the original spec doesn't place anything for minutes. AFAIK if we figured some way of integrating timezones in a good way that would be a first!

I'll fork my codpen later this week and have a go at modifying the spec a bit to try some different ideas I have from your suggestions.

SimeonC commented 9 years ago

@kpgarrod I took some of your suggestions and made some improvements to it, have a look here: http://codepen.io/SimeonC/pen/EayWdY

I added a full view, 24 hour option and a minutes title over the clock input. I'd like all of it to be scrollable but I haven't had time to look into how to catch scroll wheel events yet.

marcysutton commented 9 years ago

I realize these are just demos, but accessibility must be considered for all components: labels, semantics/ARIA, keyboard operability, focus management, etc.

SimeonC commented 9 years ago

@marcysutton That's a good point, AFAIK traditionally these kind of pickers aren't very accessible due to their point and click design. Sure adding ARIA and labels might help, but the actual interaction if you can't use a mouse/touch device kinda doesn't work. I'd almost say the best way to do this would be to have an Input which is a natural language date parser (like the one here: http://sugarjs.com/dates). That way we can use that as the accessible input which has the label and semantics/ARIA and still allow for good UX.

Initially my thoughts are that this could be in the place of the bar at the top of the picker (the dark green bar) or conditionally use one or the other if that's also possible. That input would be the tab target and the rest of the picker ignored.

I'm not too familiar with the concerns around accessibility, I've never really considered it before. Am I on the right track or completely off?

marcysutton commented 9 years ago

Hi @SimeonC! You're right that screen reader UX for a date/time picker will require some thought. We will definitely want to think that through, and I'm available to lead/facilitate this discussion.

However, all interactive controls should be operable from the keyboard as well as mouse/touch. So if you tab through the date picker, it shouldn't break the UI or skip over controls. Every item you can click on should also work from the keyboard. Focus management can be used to send focus to the right place when panels are opened/closed.

My main goal in bringing this up is to get the conversation going around accessible UIs, whether contributed by the community or the Material core team. This is what sets the Angular Material project apart from other implementations--we have been tasked with making the components as accessible as possible.

SimeonC commented 9 years ago

I think I'll leave screen reader UX/design to people who know more about that than me!

In terms of Keyboard interaction, just from my interpretation of the spec I can see a few challenges/notes:

The clock face, albeit a nice analogy, is really nasty in terms of showing focus, moving to the AM/PM switch and minutes kinda makes it all go awry. A simpler 2 input implementation would be best as that naturally handles tabbing and keyboard interaction, this could still be AM/PM with some sort of switch or 24 hour.
The time picker spec had those two buttons 'AM' and 'PM', but I think this would be better and possibly clearer as a switch like these: https://material.angularjs.org/#/demo/material.components.switch - Maybe an extra large switch with AM/PM inside the circle.
Calendar; From my interpretation I used a dropdown on the month and an number input on the year to allow them to be selected. The actual days should be arrow key and numerically accessible like a pseudo input field. The problem comes in terms of tab focus here, would it be best to go as displayed: month <-> year <-> day, or granularity year <-> month <-> day. The former is visually oriented and the latter logically.
Focus should initially be on the 'day' selection or the 'hour' input as these are what is most likely to be changed I think.

marcysutton commented 9 years ago

This actually isn't too far off! Nice work. One major thing I'm noticing, however: the visually-hidden side of the picker should be really hidden with display: none so that the interface is more of a 1-1 experience if you're using a keyboard or a screen reader. Controls to flip between date and time pickers must be labeled and operable from the keyboard:

<div ng-click="modeSwitch()" class="button switch-control">
<i class="fa fa-clock-o"></i>
<i class="fa fa-calendar"></i>
</div>

ngAria would help some of this (tabIndex="0" and now keypress bound along with ng-click), but it still needs a text alternative inside of it. A better implementation of this type of control would look like this:

<button ng-click="modeSwitch()" class="button switch-control">
<span class="fa fa-clock-o"><span class="visuallyhidden">Clock</span></span>
<span class="fa fa-calendar"><span class="visuallyhidden">Calendar</span></span>
</button>

And then there is the issue of focus on the alternative month <select>s. Those need some kind of focus style so you know you can operate them from the keyboard. I do think your simplification to use inputs like these is a better experience than making every day on the calendar or time unit on the clock interactive. So I would recommend continuing with that approach.

kschwidder commented 9 years ago

@SimeonC I had a look at your work and it looks really promising. I agree with the mentioned discussion about accessibility. Despite this discussion I would appreciate that the date/time picker options can be set similar to the AngularStrap date picker which is really good. In addition date parsing and formatting based on the locale should be applicable too. I would suggest that the keyboard interaction should be handled via an input control. Attached to the input control could be dialogue you have been done so far to interact in other ways. BTW: Is the codepen link gone ?

SimeonC commented 9 years ago

@kschwidder Do you mean AngularStrap's use of prefixing every attribute with "data-" (which AFAIK is just angularjs and works anyway)? You make a good point about the locale, the formatting side anyway, there's no real parsing in my implementation as you use a Date object as the model.

EDIT: I had a look at i18n with the picker and the only parts that didn't work are the buttons, dates get localised nicely with the use of the i18n angular modules and 90% of the display uses the date filter!

@marcysutton Thanks for the pointers, when I properly make this with angular-material not the weird hybrid I'm prototyping it in I intend on using the select/menu as put out in the spec (#78). The hidden select was a quick and dirty emulation of that functionality.

I'll see when I can make some more improvements from your suggestions but I might not get much done till next year as christmas family holiday will have me away from computers for a while.

EDIT: Updated a new example that removes all bootstrap, this one is angular-material only. http://codepen.io/SimeonC/pen/dPXvEO

kpgarrod commented 9 years ago

@SimeonC it took me a while to get to look at your updates and now the codepen link is not working. I would love to see the latest version if you could share a new link.

On 18 December 2014 at 00:51, Simeon Cheeseman notifications@github.com wrote:

@kschwidder https://github.com/kschwidder Do you mean AngularStrap's use of prefixing every attribute with "data-" (which AFAIK is just angularjs and works anyway)? You make a good point about the locale, the formatting side anyway, there's no real parsing in my implementation as you use a Date object as the model.

@marcysutton https://github.com/marcysutton Thanks for the pointers, when I properly make this with angular-material not the weird hybrid I'm prototyping it in I intend on using the select/menu as put out in the spec (

78 https://github.com/angular/material/issues/78). The hidden select

was a quick and dirty emulation of that functionality.

I'll see when I can make some more improvements from your suggestions but I might not get much done till next year as christmas family holiday will have me away from computers for a while.

— Reply to this email directly or view it on GitHub https://github.com/angular/material/issues/648#issuecomment-67411757.

Keith Garrod

Tel: +27-83-3000-988 Fax: +27-86-5757781

SimeonC commented 9 years ago

Oops, my apologies, must have deleted the wrong one. Tried to remove a fork I didn't need and apparently I got the wrong one. (I'll go back and edit the other posts to fix the links)

For if the links break again you can find them here: http://codepen.io/SimeonC/public/ The most recent version which is Angular-material only and I fixed up the rem sizing is here: http://codepen.io/SimeonC/pen/dPXvEO

kpgarrod commented 9 years ago

@SimeonC Looks good to me! Great work. I can't wait to use it.

On 18 December 2014 at 08:34, Simeon Cheeseman notifications@github.com wrote:

Oops, my apologies, must have deleted the wrong one. Tried to remove a fork I didn't need and apparently I got the wrong one. (I'll go back and edit the other posts to fix the links)

For if the links break again you can find them here: http://codepen.io/SimeonC/public/ The most recent version which is Angular-material only and I fixed up the rem sizing is here: http://codepen.io/SimeonC/pen/dPXvEO

— Reply to this email directly or view it on GitHub https://github.com/angular/material/issues/648#issuecomment-67446623.

Keith Garrod

Tel: +27-83-3000-988 Fax: +27-86-5757781

kschwidder commented 9 years ago

I meant the support for min-date, max-date, date-format, date -> ng-model as ISO, number etc. Opening the dialogue on focus or manually etc. Each implementation so far has good elements but in real world apps they lack those functions.

David-Mulder commented 9 years ago

Hey, I was the author of the more polished date picker mentioned before. I have put it up again for the moment and will probably be releasing it on github as well as soon as I build in HTML5 internationalization API support. Was really hoping to have finished that ages ago, but when Polymer didn't show any official interest in adopting the component I kind of forgot about it.

The link is https://polymerdev-greats-1.c9.io/bower_components/paper-date-picker/demo.html and docs can be found here https://polymerdev-greats-1.c9.io/bower_components/paper-date-picker/

Additionally we have strictly limited ourselves to the official Material Design spec, because building our own mixed up component may be fun, however will result in an inconsistent behaviour on the user end (so no hacked in time selection).

i-heart-php commented 9 years ago

@GreatS nice work but the modal view of the date picker in the demo seems to be a weekday off...

lyschoening commented 9 years ago

@i-heart-php @GreatS the joys of daylight saving time

David-Mulder commented 9 years ago

@i-heart-php @lyschoening Yeah, working on internationalization this very second which is the disadvantage and advantage of showing of the dev version of a project (which is also the reason the link went offline). So yeah, those things can be kinda rough around the edges till I finish this stuff, will be ready in about 2 or 3 hours with this at most I think.

David-Mulder commented 9 years ago

@i-heart-php Could you check whether it works for you now correctly? (I wasn't able to reproduce the issue on my computer, but I think it got fixed along with some other internationalization changes).

kschwidder commented 9 years ago

Could you please publish it to github such that it is available for syncing and faster test feedbacks. Thx a lot

i-heart-php commented 9 years ago

@GreatS sorry for the slow response, one of those days... it's still a weekday ahead on my end

David-Mulder commented 9 years ago

@kschwidder Fair enough. Cloud9 IDE has made me lazy. It's up now, as is my paper color picker. Have been postponing putting it up now for about... a month already? :stuck_out_tongue_closed_eyes:

@i-heart-php No problem, thanks for getting back, but just great... Honestly, I have now worked with dates for a couple of international projects and I still don't get them. Will take another look at it~ Oh, one other thing that just occured to me, c9.io and at least my chrome have some pesky caching issues/configurations, do you see the rest of the international stuff (US and thai/chinese date pickers) at the bottom of the page?

ajoslin commented 9 years ago

I like the google flights datepicker: http://flights.google.com

SimeonC commented 9 years ago

@GreatS I just tried the demo in Safari, chrome and FF and only FF loaded. Safari gave this error: "ReferenceError: Can't find variable: Intl", Chrome gave this error: "" and Firefox gave an Unresponsive script warning before loading with a warning about mutating Objects. On the other hand it shows up as the correct date for me. Albeit looking really weird.

Additionally we have strictly limited ourselves to the official Material Design spec, because building our own mixed up component may be fun, however will result in an inconsistent behaviour on the user end (so no hacked in time selection).

I'm also curious on hearing more about your thoughts as quoted above, how is the mixed up component inconsistent behaviour for the user?

David-Mulder commented 9 years ago

@SimeonC

The fact it didn't work in Safari sounds right, due to their lack of support for modern API's I have always assumed that Polymer doesn't officially support them (although very technically speaking they are an evergreen browser). Regarding Firefox, that's odd, works perfectly here, could you please copy the error and/or look in the dev tools on what it gets stuck? (My guess is that their implementation of the Intl object must be even worse than Chrome's maybe... I am running nightlies, so that might make a difference~ will take a look at an older version as well)

And regarding inconsistent behaviour, in a year or so everybody who uses Android (a significant percentage of any user base) is used to the date and time picker dialog to working in a certain way (open the calendar app on Android 5 to see how). On top of that there will be systems implementing the material design spec which clearly dictates the way a date picker should look. Not deviating from that without very good reason seems like a solid plan (though if there is good reason to deviate from it then it always has my blessing :P ).

SimeonC commented 9 years ago

@GreatS The FF Dialog states:

A script on this page may be busy, or it may have stopped responding. You can stop the script now, open the script in the debugger, or let the script continue.

Script: https://polymerdev-greats-1.c9.io/bower_components/webcomponentsjs/webcomponents.js:1922

RE: inconsistent behaviour: I think that's a rather narrow view to say one platform should define all others, not saying mine isn't as I'm an Apple person - I don't have an android of any sort to see what you're looking at, I think the apple calendar does something similar except it "snaps" to the month.

This does highlight what @marcysutton said earlier in this thread:

The advantage of a Material date-picker versus native ones is a cohesive look & feel and interactive experience across all platforms. Every native date-picker looks different.

In terms of UX for your picker, I'll point out that if I wanted to set a date to 15th July 2030, I'd have to do an excess amount of scrolling in your implementation.

In the combined implementation I'm hacking away at, yes I modified the spec a little, but if you use it in Date-Only or Time-Only it is as close as possible to the material spec, except that the clock face proved to be too difficult in terms of accessibility so I changed it to two number inputs.

angular / material

mdDateTime - a date time picker #648

78 https://github.com/angular/material/issues/78). The hidden select