mdDateTime - a date time picker

[mlb6]

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]

+1

[jimmywarting]

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

@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
#648 (comment).

Keith Garrod

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

[jimmywarting]

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]

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]

This component is planned for Q1, 2015 availability.

[marcysutton]

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]

+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
#648 (comment).

[jimmywarting]

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

[marcysutton]

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

[jimmywarting]

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]

@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]

@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
#648 (comment).

[trentdavida]

+1

[SimeonC]

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]

@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
#648 (comment).

Keith Garrod

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

[SimeonC]

@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]

Someone posted a similar, more polished, date-picker on googlearchive/paper-elements#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]

@simeon Thanks. It looks really nice.

My two cents:

1. AM/PM selection was not immediately obvious to me.
2. Digital time would be a nice option .
3. 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
googlearchive/paper-elements#20
googlearchive/paper-elements#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
#648 (comment).

Keith Garrod

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

[SimeonC]

@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]

+1

[kschwidder]

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]

@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]

Love the conversation and ideas here on the DatePicker. 👍

[kpgarrod]

@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
#648 (comment).

Keith Garrod

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

[SimeonC]

@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]

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

[tflori]

+1

[benbr-personal]

+1

I desperately need this!

[ivanhtp]

@SimeonC solution looks pretty descent for now. I'll be really sad to implement it right now and the team release one or two days ahead 😋

[nextor2k]

+1

[janosgy]

+1

[ask007learning]

+1

[malammar]

+1

[benbr-personal]

@SimeonC solution doesnt seem to work for me, trying to figure out whats causing the conflict, some kind of style conflict it seems.

[chinnichaitanya]

Yes even I'm facing the same issue as above but there are no errors though.

[jozsi]

That's a known bug: SimeonC/md-date-time#16

[SergeyBukhman]

+1

[edinella]

+1

[jojoyuji]

+1

[MacgyverMartins]

+1

[ThomasBurleson]

We are actively working on this component.
Locking the conversation for now...

[jelbourn]

md-datepicker has landed in master. Please file specific bugs and features requests going forward.