md-datepicker
jelbourn opened this issue · comments
Status:
- There is no public Material Design spec that works for both desktop and mobile (the current spec is mobile-only). The design team is working on this.
- We have some contributors exploring an implementation.
Hello @jelbourn , do you know when this md-datepicker's feature (md-calendar) will be available?
Where I can find the current contributor's work for this ?
Thanks
@jelbourn something worth investigating: code.promactinfo.com/md2/datepicker - squeeze in a md-select for the year part and you got one steamy md-datepicker 😀
Along with md-datepicker, would be nice to have a md-timepicker, like this. This feature will be available?
Hello @jelbourn, Just the md-datepicker is not so useful in a lot of the cases in my point of view because is necessary the time to be used in filter forms. Would be good to have a md-datetimepicker where you configure the format date, time or datetime. This way we don't need to mix datepicker and timepicker to create the Date object that is going to be used in the system. A good example is https://eonasdan.github.io/bootstrap-datetimepicker/. I use it with jQuery to create a component but would be nice to have a pure component using just angular2.
Would be nice If it has multi date select option and an option to exclude dates.
@arnaudforaison in the meantime you could try to use this one.. it's not the best implementation ever a it lacks a dialog view but i think it could be a good start
https://material2-extra.firebaseapp.com/
https://github.com/gnucoop/material2-extra
Hello guys (thanks for your awesome work)
I just would like to ask news about this element, any ETA? Is someone working on it? Can we contribute?
Date picker is not working with angular 2
.Not showing anything days,month or year.
@VisualtThreat You might be seeing the issue I filed. Does it work for you in Chrome?
#1333
No, only some design displays.No data displayed.
On Oct 12, 2016 7:28 PM, "Ross Nordstrom" notifications@github.com wrote:
@VisualtThreat https://github.com/VisualtThreat You might be seeing the
issue I filed. Does it work for you in Chrome?
#1333 #1333—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#675 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AR2ryxz89T9X1dblBrpBkk3bZoW7x0kHks5qzOeXgaJpZM4I0cvd
.
Hi, thanks for your great work. I have 2 questions about the md-datepicker:
- Will it support german (or any other) dates? e. g. dd.mm.YYYY?
- Will there be a option to use the picker for time only or datetime-combination? (ref angular 1 material angular/material#4745)
Hi,
Yes ,we will get get these two supports .But the material date picker is
not yet released from officially .
You can refer this https://github.com/angular/material2 .I have used some
other solution that is not working in my case.
On Fri, Oct 21, 2016 at 2:01 PM, Niedermann IT-Dienstleistungen <
notifications@github.com> wrote:
Hi, thanks for your great work. I have 2 questions about the md-datepicker:
- Will it support german (or any other) dates? e. g. dd.mm.YYYY?
- Will there be a option to use the picker for time only or
datetime-combination?—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#675 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AR2ry_HvsBZZOXWN97zqZ5knDYqJvwZQks5q2HhsgaJpZM4I0cvd
.
Thanks & Regards,
Manjunath S S
J11240
I have you will develop:
- datepicker
- timepicker
- datetimepicker
all of them supporting:
- ISO format as data input or output
- custom disply / locale format
A daterange picker would be awesome too!
Hi, I've started to develop a md-datepicker !
It respect many requirements quoted in #1746, like:
- Support for accessibility
- Support for i18n (RTL)
- Support for theming
- Following our coding standards
- Using existing infrastructure (such as the Overlay service) // I use a dialog, but whatever.
- + Implementation on MomentJS.
But I have many issues with the dialog and the input:
- input: events, it auto focus when dialog close..
- dialog: padding of the container.
@jelbourn said:
In particular, with the datepicker, we're not quite ready to go into implementation because a revision for the Material Design spec is in the works.
So ? I have to wait ?
Thanks !
@bastienlemaitre we are indeed waiting on a revised spec for the date-picker.
I'd encourage you to release your datepicker as a standalone package and we can revisit the component in @angular/material after our beta release.
Looking forward to this!
It would be awesome if it can also show the week number (at least as an option).
Just as @a5hik @marcoskubis @andvasp @hkusulja mentioned, this 3 components shipped in material2 would be killing features (+md-table):
. datepicker
. timepicker
. datetimepicker
something I noticed is commonly forgotten: make it possible to type the date, maybe with some mask? Most datepickers i was for ng2 are click only! Oh... and a way to clear the field as well...? thanks!! excellent work!
Just a datePicker is not going to solve the problem, a year ago implementing dateTimePicker got removed from backlog promising for version 2.
Do you think is it worth bringing datePicker from material and then a time picker from somewhere else, which has date and time in the same package?
Version 2 would be nice to be able to use date/time picker from a Dialog window. As there is currently not a clear way of doing it currently. I don't care if it hides the origin dialog window, from as long as it restores the origin window and state.
@alobban
You can add this attribute to your show dialogs:
skipHide : true
And they won't close on opening new ones!
Hi, I've developed md-datepicker and I want to refactor it with:
- Support for accessibility
- Support for i18n (RTL)
- Support for theming
- Support for type(i.e. date, time and datetime picker)
- Following our coding standards
- Use Overlay service and dialog.
This is one of the most important component needed for most application development. Really hope to see it prioritizes into the development.
@dharmeshpipariya your date picker looks great! Looks like your md2 library be used alongside Angular Material 2 at the same time - I'm using it just for the date picker component until it's ready in Angular Material 2.
Will the datepicker component use the native implementation in mobile devices?
@dharmeshpipariya how about selecting only a whole month\weeks?
because our company needs to select those allot for reports (i am sure there are other use cases as well)
How do i install md2 correct? can't find the system.config.js file in my project
Any ETA? With my team we are about to pick a framework for new version of our product and it uses datepicker in quite few places, was hoping it might be finished sooner in A2 :(.
Any approx. start date for this?
Is it just me (or) the year selection is completely unintuitive in angular 2 datepicker demo?
The year at the top of the dialog does not feel like it user can click/tap on it to change
I checked the datepicker on https://material2-demoapp.firebaseapp.com/date-picker
If the user switches to different months the height differs from month to month. This is because the days in each month are not equal and that the first day is not always monday.
The ux for the next (or previous) button it not that good because it doesn't stay in the same place.
Its better to have the previous and next buttons always in the same place.
If you have any questions please ask.
Page not found.
I see that, thats weird. Just go to https://material2-demoapp.firebaseapp.com/ and then select datepicker then it works.
@gvlekke is there anything relating to the time range?
@rajeshvaya No If you just use the basic datepicker
The behaviour that I experience is as follow:
- go to June
- 5 rows are displayed in the calendar view
- click on the next month button and go to July
- Notice that the next month button moves upwards. This is because there are now 6 rows and the modal is bigger. Because its centered the modal is going to readjust itself and the next month button is moving to the top of the screen.
From a user experience point of view you want that the buttons stay in the same place.
Do you understand what I mean, or do i need to add a example with a better explanation?
I think it had better to use JavaScript Intl DateTimeFormat API, because it also supports many languages and calendar types(hijri, jalali etc.)
@a8775 thx for the example.
https://material2-demoapp.firebaseapp.com/
What is this ? Is it official ? A side project ? How can I use the date picker presented in it ? It looks like it's exactly what I need.
@Robouste I researched a little bit on that its a side project from someone who have a PR to the material2 library. It won't be merged (yet) because we need to discuss what we want and what problems we need to face.
check this pr #1903
Its good that people already made something like this. So we can detect some problems in the early stage. As example the switching of the months and the next and previous buttons shift in height.
beside shifting buttons I really like the design of the datepicker @Frly made.
Hi, eagerly awaiting datepicker. I am new to following a project that is still rolling out like this. @mmalerba, any date on when the 'Next Milestone' will be available with datepicker. I could not find an estimated date on this. Thank you for your work. John
Please make this datepicker accepting and returning European dates too (dd-mm-yyyy).
@riankol I think there need to be a option where you can set how you want to get it back. Or just set it to a country code. And for a bonus you can just set it to a country code and it returns the value formatted out of the box.
Consider the option of choice of time with the help of sliders:
http://t1m0n.name/air-datepicker/docs/#timepicker
I think it maybe looks nice but in usability it's a real disadvantage. When you know it is 13:16 you don't want to scroll to the right pixel that I'd 13:16. When the scrollbar is to fast and goes to 17 and then back to 15 it is frustrating to the user.
Some other people have a opinion about this?
@gvlekke Add ability to enter value by input, scroll or other
Oké you can do that but why you want to show the scrollbar and don't use it.. Only because it looks cool? Why do you want to use a scrollbar?
+1 gvlekke, by experience the slider is never used.
I discovered this component, it looks pretty cool and more convenient
http://code.promactinfo.com/md2/#/datepicker
But, big problem on it : there is not input (for date or time).
Many thanks for your awesome work.
I agree with nlgi - the datepicker here http://code.promactinfo.com/md2/#/datepicker looks nice and works well. The 'select time' interface is familiar to android users and also works well.
It does need an option for manually entering a date however, which makes it much quicker for dates far away - for example date of birth.
Also, it's not totally obvious that to change the year, you have to click on the year over in the left pane. Would be more familiar to click on the month/year just above the calendar to select months/years.
Appreciate all the work on the components so far!
It should also use native android datetime input on phones (would be much faster and nicer).
Yes it's for example, angular material team will do better !
;)
Here is s nice inspiration from react toolbox datepicker https://twitter.com/javivelasco/status/831570140265340929
Basically you can select the date range by just hovering over the double datepicker, seams to be like a nice feature.
the date range can be a problem when you have long ranges. List out 'from' and 'to' on the datepicker component itelf, with the visual clues like above? Yeah, that would work.
https://demo.vaadin.com ; the datepicker doesn't have to be two seperate calendars . Vaadin has some really nice features though. The ease of picking years is designed very nice.
@automatedenergy I think the scrollable part is cool for the years (but a little bit to fast). Scrolling for months is cool to see, but when you scroll to the next month the first day of the month is never on top. Don't know how other users experience this.
Status update for people who haven't seen the PRs:
Development is ongoing on the datepicker branch: https://github.com/angular/material2/tree/datepicker
It's based on a new spec that's still in-progress (not publicly available) that aims to address some of the issues with the last iteration (what the AngularJS version was based on).
What about the timepicker. Actually, I need datetime picker in my project.
Not perfect, but you have a dateTimePicker here : https://github.com/DSI-HUG/dejajs-components/tree/dev/src/component/date-picker
It's may help !
@paramsingh88 though I want to add timepicker as well it won't be available in the first version
@fxck It is still in progress, but feel free to open an issue with your concerns and assign to me
I'll just wait until it's at least in master.
Thanks @mmalerba . It sounds like the md-datepicker for Material 2 is close to rolling out.
The timepicker can be added later. No big deal. For now, we can create our own hr and minute select combo boxes and tie them to the datepicker . We just need an official datepicker for Material 2 that works with Angular 2 and beyond.
I probably don't have to tell you that it needs to have a similar look and feel of the familiar Material 1 datepicker, but also takes into account the comments from the above collaborators and stakeholders. It looks like representing the date range and scrolling through years easily will be a major design consideration for you and the Material 2 team.
I still think that the date range can be a single calendar with visual clues that there is a range between two picked dates. Also, for long ranges, putting a 'from' and 'to' associated with the date range would be a good way to let the user know when the date range begins and ends. Maybe we eventually give users the option to go with a single date range calendar or two separate calendars that still has the look and feel of Material 1. I know you are probably dealing with a lot of compatibility considerations as well to make it work with Angular 2 and beyond. My comments here are just user interface design. : )
@mmalerba couple of things that's been bothering me UX/design wise:
- when in touch ui mode and clicking thru months, dialog height keeps changing causing the arrow button to jump
- months changing button is too small for both touch and click
- the "down" arrow button has confusing behaviour, it seems to me like it would drop down a select of months/years, rather than switch mode from days to months
- I don't understand the duplicity of this
- month label is too close to the border
- days do not make sense in "months" mode
also while I understand that there probably were reasons why abandon the scrolling-type calendar from m1 (or this), it was sooooooooooo much user friendlier than having to click thru months..
another thing is, that it would be nice to outline what features are you planning to implement, I know about datetimepicker, how about range as this guy pointed out? As nice as m1 calendar was, it left a lot to be desired... date/time components are always the biggest pain in the ass, is so damn hard to find a good, feature complete one and I would love m2 datetimepicker to be such component
@fxck the infinite scrolling will be added. However, the number one piece of feedback we had from the v1 datepicker was, overwhelmingly, that the virtual scrolling was unintuitive.
Yeah I'm not surprised, but it's one of those things you use once, it's confusing, but you ultimately realize it makes your life easier. But then again, it could look the same as it does right now, only the buttons would trigger scroll down / up.
@fxck thanks, duly noted. I love the infinite scrolling as well, but we'll need to make sure we do it in a way that doesn't hurt performance. the mocks are also still evolving and the latest ones already address some of these issues.
Cool. M1 virtual scroll felt pretty performant, I would have guessed that in angular2 it would be even faster by default, just because it's.. well angular2
I've already seen some experiments https://github.com/rintoj/angular2-virtual-scroll
I think the scrolling in the angular2-virtual-scroll is nice, but the vaadin design is really slick.
I don't think I ever included the exact link to vaadin's datepicker. It is using a jquery wrapper to run in an Angular app https://vaadin.com/elements/-/element/vaadin-date-picker#demos . The scrolling on this is super fancy. I have never used polymer.
I do like the inertia of the scrollbar on angular2-virtual-scroll a lot. perfect scrollbar is nice , but might need some visual clues that an area is scrollable for some users (it disappears when cursor not above area that can scroll). malihu has the nice inertia feature when using the scrollbar to scroll through. inertia is very nice feature to give the users.
@jelbourn have a look at https://github.com/IckleChris/ic-datepicker
Hi there, is there an official date for you guys to include this feature in the master ??
@mijaelx64 from the Project status section on https://github.com/angular/material2:
High level items planned for next few months:
Initial version of datepicker
...
So sounds like exact date - unknown
@mmalerba is there going to be a mode, where you'll be able to select a month only, so you could pick say March, 2017, without having to pick a day? it would be handy
@fxck and Month + Year as well.
don't think year would even be possible with the current design.. also if you wanted to select just a year, simple select would be sufficient
Agree! What if we want user to select Month and Year?
One more thing would the datepicker return javascript date or something more powerful like moment object?
@fxck Yes I want to add that, probably not in the first version due to challenges with parsing & formatting i18n
any updates on when this will be released..
I've been using https://www.npmjs.com/package/angular2-material-datepicker. Very minimal and some quirks in my locale. Feels sorta wrong. Must absolutely have a way to enable/disable selection of dates. A simple callback might be enough.
Date range selection: it not useful for me and I don't recall many cases in which it's used.
Please don't let perfect be the enemy of good; I'm so far very satisfied with ng material 2, good work.
it's not even on master
Any chance an update could be pushed to master or a rebase performed off master? I looked at the branch, and I'd like to try it out even if it isn't feature complete, but the date picker branch its quite a few commits behind master at the moment.
Can't wait to see this in the master branch, it's one of those things that are really important in this kind of frameworks, great job (y)
I bet you just didn't PICK a DATE to release this ;)
For those looking for something to use now, ng2-date-picker works along side the @angular/material mdInput directive and is very configurable.
couple of things:
- it is impossible to open datepicker with input focus (technically you can, but since it's using overlay, it will lose focus and clicking to try and focus again will close the overlay).. from my own experience with users, they won't ever find out that clicking the calendar icon opens a calendar, so doing it with focus would be a bit more user friendly
- month/day mode still looks like a dropdown / select, still confusing
- there's no "focus" style on days, so you can't see what you are selecting with arrows
- days and months should have pointer icon
also it would be nice to see a datetimepicker design, is it not public yet, or is it not existing at all and you'll be designing it?
Damn, it's not really written with extensibility in mind at the moment, is it.. it's gonna be quite a lot of pain and rewriting to add a timepicker.
@xtianus79 soon enough #4296 (comment) but seeing the code and design, I'm a bit concerned with long it's gonna take to reach feature completness, datepicker, range picker etc
@fxck As stated before timepicker will not be part of the first version, but will be added later. Please create separate issues for your other concerns so they can be addressed individually
Yeah, I wasn't talking about the first version, I was talking about how long it's probably gonna take to implement all the other features after the first version is released. I'll create issues for all the other features as soon as the first version is in master.
Excited to see this feature! Is the date picker configurable to make it inline rather than a popup? Is it part of the specs?
Will this include the time selection?
@xg-wang it is stated clearly some comments above
the initaliale version don't work correctly in the "fr-fr" localization "dd-mm-yyyy" format
@badre429 it only works properly for the mm-dd-yyyy format #4358 (comment)