Components: md-datepicker

[jelbourn]

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.

[arnaudforaison]

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

[denim2x]

@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_ :grinning:

[marcoskubis]

Along with md-datepicker, would be nice to have a md-timepicker, like this. This feature will be available?

[andvasp]

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.

[a5hik]

Would be nice If it has multi date select option and an option to exclude dates.

[trik]

@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

[AlBlanc]

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?

[VisualtThreat]

Date picker is not working with angular 2
.Not showing anything days,month or year.

[ross-nordstrom]

@VisualtThreat You might be seeing the issue I filed. Does it work for you in Chrome?
https://github.com/angular/material2/issues/1333

[VisualtThreat]

No, only some design displays.No data displayed.

On Oct 12, 2016 7:28 PM, "Ross Nordstrom" [email protected] wrote:

@VisualtThreat https://github.com/VisualtThreat You might be seeing the
issue I filed. Does it work for you in Chrome?

1333 https://github.com/angular/material2/issues/1333

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/angular/material2/issues/675#issuecomment-253220951,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AR2ryxz89T9X1dblBrpBkk3bZoW7x0kHks5qzOeXgaJpZM4I0cvd
.

[stefan-niedermann]

Hi, thanks for your great work. I have 2 questions about the md-datepicker:

1. Will it support german (or any other) dates? e. g. dd.mm.YYYY?
2. Will there be a option to use the picker for time only or datetime-combination? (ref angular 1 material https://github.com/angular/material/issues/4745)

[VisualtThreat]

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 <
[email protected]> wrote:

Hi, thanks for your great work. I have 2 questions about the md-datepicker:

1. Will it support german (or any other) dates? e. g. dd.mm.YYYY?
2. 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
https://github.com/angular/material2/issues/675#issuecomment-255324644,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AR2ry_HvsBZZOXWN97zqZ5knDYqJvwZQks5q2HhsgaJpZM4I0cvd
.

Thanks & Regards,
Manjunath S S
J11240

[hkusulja]

I have you will develop:

• datepicker
• timepicker
• datetimepicker

all of them supporting:

• ISO format as data input or output
• custom disply / locale format

[bergben]

A daterange picker would be awesome too!

[bastienlemaitre]

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 !

[jelbourn]

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

[Frly]

Here a preview of the date selector

https://github.com/angular/material2/pull/1903

Demo
https://material2-demoapp.firebaseapp.com/date-picker

[anders-hard]

Looking forward to this!
It would be awesome if it can also show the week number (at least as an option).

[damianobarbati]

Just as @a5hik @marcoskubis @andvasp @hkusulja mentioned, this 3 components shipped in material2 would be killing features (+md-table):
. datepicker
. timepicker
. datetimepicker

[m--c]

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!

[geniusbabak]

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?

[alobban]

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.

[geniusbabak]

@alobban
You can add this attribute to your show dialogs:
skipHide : true
And they won't close on opening new ones!

[dharmeshpipariya-zz]

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.

[NgYueHong]

This is one of the most important component needed for most application development. Really hope to see it prioritizes into the development.

[BurningDog]

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

[ChristianWeyer]

Will the datepicker component use the native implementation in mobile devices?

[KLuuKer]

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

[SjorsHartwijk]

How do i install md2 correct? can't find the system.config.js file in my project

[Draccoz]

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 :(.

[rajeshvaya]

Any approx. start date for this?

[thekalinga]

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

[gvlekke]

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.

[avilao]

Page not found.

[gvlekke]

I see that, thats weird. Just go to https://material2-demoapp.firebaseapp.com/ and then select datepicker then it works.

[rajeshvaya]

@gvlekke is there anything relating to the time range?

[gvlekke]

@rajeshvaya No If you just use the basic datepicker

The behaviour that I experience is as follow:

1. go to June
2. 5 rows are displayed in the calendar view
3. click on the next month button and go to July
4. 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?

[ardatan]

I think it had better to use JavaScript Intl DateTimeFormat API, because it also supports many languages and calendar types(hijri, jalali etc.)

[a8775]

@gvlekke @rajeshvaya

[gvlekke]

@a8775 thx for the example.

[Robouste]

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.

[gvlekke]

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

[automatedenergy]

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

[riankol]

Please make this datepicker accepting and returning European dates too (dd-mm-yyyy).

[gvlekke]

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

[riankol]

@gvlekke indeed, that's kind of what I meant

[Knoxvillekm]

Consider the option of choice of time with the help of sliders:
http://t1m0n.name/air-datepicker/docs/#timepicker

[gvlekke]

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?

[Knoxvillekm]

@gvlekke Add ability to enter value by input, scroll or other

[gvlekke]

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?

[nlgi]

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

[zigfry]

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!

[Draccoz]

It should also use native android datetime input on phones (would be much faster and nicer).

[matte00]

@zigfry @nlgi Yeah, it's a great component but it doesn't work on safari < 9. There is some issues in hour/minute picker (touch don't work on safari).

[nlgi]

Yes it's for example, angular material team will do better !

;)

[kuncevic]

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.

[automatedenergy]

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.

[automatedenergy]

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.

[gvlekke]

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

[jelbourn]

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

[paramsingh88]

What about the timepicker. Actually, I need datetime picker in my project.

[Maxouhell]

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 !

[fxck]

Too bad that spec is not available @jelbourn I have some UX concerns with what @mmalerba is working on, but given it's not yet finished those might yet be addressed.

[mmalerba]

@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

[fxck]

I'll just wait until it's at least in master.

[automatedenergy]

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. : )

[fxck]

@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

[jelbourn]

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

[fxck]

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.

[mmalerba]

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

[fxck]

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

[automatedenergy]

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.

[automatedenergy]

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.

[naveedahmed1]

@jelbourn have a look at https://github.com/IckleChris/ic-datepicker

[mijaelx64]

Hi there, is there an official date for you guys to include this feature in the master ??

[kuncevic]

@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

[fxck]

@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

[naveedahmed1]

@fxck and Month + Year as well.

[fxck]

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

[naveedahmed1]

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?

[mmalerba]

@fxck Yes I want to add that, probably not in the first version due to challenges with parsing & formatting i18n

[rahulpsd18]

any updates on when this will be released..

[MaxDZ8]

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.

[xtianus79]

@jelbourn is this now in beta.3

[fxck]

it's not even on master

[mtpultz]

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.

[markdrake]

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)

[yonatandt]

I bet you just didn't PICK a DATE to release this ;)

[isaacplmann]

For those looking for something to use now, ng2-date-picker works along side the @angular/material mdInput directive and is very configurable.

[fxck]

@mmalerba

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?

[fxck]

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]

@jelbourn any update on when this would be added to master?

[fxck]

@xtianus79 soon enough https://github.com/angular/material2/pull/4296#issuecomment-298183090 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

[mmalerba]

@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

[fxck]

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.

[svaman]

Excited to see this feature! Is the date picker configurable to make it inline rather than a popup? Is it part of the specs?

[xg-wang]

Will this include the time selection?

[kuncevic]

@xg-wang it is stated clearly some comments above

[badre429]

the initaliale version don't work correctly in the "fr-fr" localization "dd-mm-yyyy" format

[fxck]

@badre429 it only works properly for the mm-dd-yyyy format https://github.com/angular/material2/issues/4358#issuecomment-299661961

[Lior-G]

Will this feature in the future also have the ability to have the date picker be on screen? as in, not within a popup or dialog.

[arlowhite]

@jelbourn @bastienlemaitre I've written a Moment.js DateAdapter, do you want the code?

[mmalerba]

@arlowhite we do want to include a Moment.js adapter in Material, but we're currently tweaking our packaging structure and holding off until that's done. We want to make sure we don't make Moment.js a dependency for apps that aren't using the adapter. If you want to create an issue for it I can let you know when we're ready.

[kuncevic]

@mmalerba Moment.js currently is not modular and not quite treeshakable https://github.com/moment/moment/issues/2373 the way you are import moment.js is like import * as moment from 'moment'; doing this way you ending up having the whole moment.js in your bundle + all moment.j locales http://stackoverflow.com/questions/25384360/how-to-prevent-moment-js-from-loading-locales-with-webpack/43728394#43728394.

In case of using angular-cli you just have to -eject the webpack config to handle that.
Because of moment.js as above, many people just moving away from moment.js to https://github.com/date-fns/date-fns

Currently in my project as a quick fix I just using moment-mini as I do not want to -eject webpack config, but I might be considering date-fns in the long run.

[jelbourn]

To clarify: md-datepicker can use _any_ date format; it just needs an appropriate adapter for i18n. We plan on making a moment adapter available since it's relatively popular, but ultimately people can use whatever i18n solution works for them.

(inside Google everyone generally uses goog.Date from the Closure Library)

[arlowhite]

@mmalerba what if the user imports moment and passes in the moment library in as a constructor arg? new MomentDateAdapter(moment);

If the adapter were to only import { isMoment, Moment } from 'moment'; would that be ok?

Here's my MomentDateAdapter

Issues:

• Moment has no _narrow_ format, so I just chop of the first character in those cases.
• Have not tested setLocale but I think it should work.
• I don't like how parsed dates without a year (e.g. "May 17") default to 2001, so in parse() I default to the current year and default to dates in the past. So people will want to review that logic.

Let me know if you need a CLA or explicit license in order to use this. How do I just declare it public domain?

import { DateAdapter, MdDateFormats } from '@angular/material';
import { isMoment, Moment } from 'moment';
import * as moment from 'moment';

export const MOMENT_DATE_FORMATS: MdDateFormats = {
  parse: {
    dateInput: 'll'
  },
  display: {
    dateInput: 'll',
    monthYearLabel: 'MMMM Y',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM Y'
  }
};

const dateNames: string[] = [];
for (let date = 1; date <= 31; date ++) {
  dateNames.push(String(date));
}

export class MomentDateAdapter extends DateAdapter<Moment> {

  private localeData = moment.localeData();

  getYear(date: Moment): number {
    return date.year();
  }

  getMonth(date: Moment): number {
    return date.month();
  }

  getDate(date: Moment): number {
    return date.date();
  }

  getDayOfWeek(date: Moment): number {
    return date.day();
  }

  getMonthNames(style: 'long' | 'short' | 'narrow'): string[] {
    switch (style) {
      case 'long':
        return this.localeData.months();
      case 'short':
        return this.localeData.monthsShort();
      case 'narrow':
        return this.localeData.monthsShort().map(month => month[0]);
    }
  }

  getDateNames(): string[] {
    return dateNames;
  }

  getDayOfWeekNames(style: 'long' | 'short' | 'narrow'): string[] {
    switch (style) {
      case 'long':
        return this.localeData.weekdays();
      case 'short':
        return this.localeData.weekdaysShort();
      case 'narrow':
        // Moment does not accept format even though @types/moment suggests it does
        return this.localeData.weekdaysShort();
    }
  }

  getYearName(date: Moment): string {
    return String(date.year());
  }

  getFirstDayOfWeek(): number {
    return this.localeData.firstDayOfWeek();
  }

  getNumDaysInMonth(date: Moment): number {
    return date.daysInMonth();
  }

  clone(date: Moment): Moment {
    return date.clone();
  }

  createDate(year: number, month: number, date: number): Moment {
    return moment([year, month, date]);
  }

  today(): Moment {
    return moment();
  }

  parse(value: any, parseFormat: any): Moment {
    let m = moment(value, parseFormat, true);
    if (!m.isValid()) {
      // try again, forgiving. will get warning if not ISO8601 or RFC2822
      m = moment(value);
      console.log(`Moment could not parse '${value}', trying non-strict`, m);
    }
    if (m.isValid()) {
      // if user omits year, it defaults to 2001, so check for that issue.
      if (m.year() === 2001 && value.indexOf('2001') === -1) {
        // if 2001 not actually in the value string, change to current year
        const currentYear = new Date().getFullYear();
        m.set('year', currentYear);
        // if date is in the future, set previous year
        if (m.isAfter(moment())) {
          m.set('year', currentYear - 1);
        }
      }
      return m;
    }
    else {
      return null;
    }
  }

  format(date: Moment, displayFormat: any): string {
    if (date) {
      return date.format(displayFormat);
    }
    else {
      return '';
    }
  }

  addCalendarYears(date: Moment, years: number): Moment {
    return date.clone().add(years, 'y');
  }

  addCalendarMonths(date: Moment, months: number): Moment {
    return date.clone().add(months, 'M');
  }

  addCalendarDays(date: Moment, days: number): Moment {
    return date.clone().add(days, 'd');
  }

  getISODateString(date: Moment): string {
    return date.toISOString();
  }

  setLocale(locale: any): void {
    console.info('setLocale', locale);
    this.localeData = moment.localeData(locale);
  }

  compareDate(first: Moment, second: Moment): number {
    return first.diff(second, 'seconds', true);
  }

  sameDate(first: any | Moment, second: any | Moment): boolean {
    if (first == null) {
      // same if both null
      return second == null;
    }
    else if (isMoment(first)) {
      return first.isSame(second);
    }
    else {
      const isSame = super.sameDate(first, second);
      console.warn('first not a Moment. fallback to super.sameDate()', first, second, isSame);
      return isSame;
    }
  }

  clampDate(date: Moment, min?: any | Moment, max?: any | Moment): Moment {
    if (min && date.isBefore(min)) {
      return min;
    }
    else if (max && date.isAfter(max)) {
      return max;
    }
    else {
      return date;
    }
  }
}

[fxck]

@kuncevic date-fns does not support parsing from given format yet. https://github.com/date-fns/date-fns/pull/375

[LilSebastian5000]

Is it possible to simply grab the date string displayed in the input like for any other component? Using an [(ngModel]) on the input element prints a long string instead of what is displayed. For example:

1. Input displays "5/17/2017"
2. [(ngModel)] string set on the input is "Wed May 17 2017 00:00:00 GMT-0400 (Eastern Daylight Time)"

[mmalerba]

@ryanpm40 The ngModel value is not a string, but a date object, you can format it however you want

[LilSebastian5000]

@mmalerba Silly me- got it, thanks!

[levitatejay]

Can we have the DatePicker popup when selecting the input (not a button) without having to DI the datepicker and write a function for (click)?

I'm thinking something like [mdDatepickerToggle]="myDatepicker" being an available attribute on inputs as well as on buttons

[fxck]

What are the next steps, now that the initial version is out?

[arlowhite]

@levitatejay You can hook (focus)="myDatepicker.open()", but it currently steals focus and prevents typing input.

[ghost]

Hi @arlowhite, i was trying to incorporate the MomentDateAdapter that you shown in your earlier comment. However, i am getting an error for MdDateFormats import stating that @angular/material has no exported member 'MdDateFormats'. I have tried importing the same directly from the anguarl/core/typings/datetime/date-formats.d.ts but failed.

I am currently using Material 2.0.0 beta 5 and angular-core 4.2.0 rc.0.

Thanks for your help :)

[Yeradon]

@n4navin9 This is because MdDateFormats wasn't exported in beta 5 (#4534). That is fixed, but not released. You can either use a not released version or wait for a new release. You also could modify the files directly on your own, but those changes would be gone after reinstalling.

[arlowhite]

@n4navin9 I'm using material2-builds

You probably need commit https://github.com/angular/material2/commit/58c252f36e2c471cce8805b4948f3c27771f351d

package.json
"@angular/material": "git+https://github.com/angular/material2-builds.git#15b91f6fa8cb99f1d46ac4cb075e4620ad4db486"
(I like to specify the commit so that I know everyone on our team is using the exact same version of material2)

[mestremuten]

I'm using beta.6, and I wanted to use mdDatepickerToggle directive at the input itself, but I found that only buttons are meant as right targets for it:

selector: 'button[mdDatepickerToggle], button[matDatepickerToggle]',

Why not make it general attribute selector, without constraining the kind of element? Imho, we should be able to use it on (almost?) everything: divs, anchors, buttons, inputs, ...

[ss-bb]

Hi @jelbourn
First of all, thanks for everyone who did the work !
As always, I still have some issue about timing. Do you have any idea about the moment*, or any link to a roadmap, about the release date of all the functionalities of the datepicker list in the datepicker doc ?

[playground0076]

in this context, how to check if the user has entered an Invalid String into the input field.? I want to have a check to see if the date is valid or not. this might be a simple one but couldnt manage to make it work. thanks

[arlowhite]

@angular2fan This is determined by DateAdapter.parse() According to the function doc: @returns The parsed date, or null if date could not be parsed.

[imadhy]

I don't know if that can help, but I managed to format the date input value using momentjs like this :

this.form.valueChanges.subscribe(data => { this.changeFormat(data.badge_endOfValidity); });

I had to do a subscribe like this because as weird as it is when you pick a date from the date picker the (change) event is not triggered I don't know why. Not sure if it's a bug or it comes from my code.

And in changeFormat method I do :
changeFormat = (date) => { this.form.value.badge_endOfValidity = moment(date).format('DD/MM/YYYY'); }

Not sure if there is an easier way. If so I would gladly take it but I couldn't manage to understand how DateAdapter work from the tiny doc on it.

[arlowhite]

@imadhy @angular2fan Try upgrading to the latest version of material2 2.0.0-beta.7 and test your valueChanges code again. I also noticed that change events were not triggered by MdDatepicker in the past, but I think the latest version triggers valueChanges correctly now.

[rbj325]

@arlowhite Using (focus)="myDatepicker.open()", I am able to type into the input by clicking a second time on the input after the datepicker dialog pops up.

[bendg25]

Is there any date on when time picker will be available? Could someone recommend the best alternative util this is ready?

[marxxxx]

@bendg25 i would go with md2 for now

[jelbourn]

Closing this issue since the initial version is out; additional features should be tracked via their own issues.

[david-oyeku]

so no timepicker?

[mmalerba]

@david-oyeku still planned, just will be tracked in a separate issue: https://github.com/angular/material2/issues/5648

[ankitraonka]

Shouldn't there be an yearPicker?

it becomes difficult to select you date of birth. Too many clicks for reaching a data which is 20 years old.

Found this issue:
https://github.com/angular/material2/issues/5845

[SteveDunlap13]

For those looking for a angular5/material2 / latest flex time picker, I banged one out last night for a personal project. Feel free to rip it to your needs. https://github.com/SteveDunlap13/MaterialTimeControl

[orhemi]

SteveDunlap13 Thanks for trying to help but it does not work

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}