Material: Don't want to show md-calendar-month on date picker

[shruti0207]

Is there an any option that user can only select year and month in datepicker, the date views should not shown to user. once the user select the year and month is close the calendar and it show the select date in MM/YYYY format that also in some specific field not in complete application.

Show only year and month view

Hide date view

regrading #9246

I try parseDate and formatDate methods on the $mdDateLocaleProvider but it format the date when date is selected from the calendar, if date enter using keyboard in number format (08052016) it not get formatted as (08/05/2016) and if make the change in mdDatelocalProvider than the date format change every where in application, just need to change the date format in some specific field only

[crisbeto]

It's not possible, but it seems like it could be useful. I'm not sure how it would work with the input field, though.

[jagmindersingh]

+1

[shruti0207]

Date is not getting format if user enter the date using keyboard in mm/dd/yyyy format and it also not get validate. Is there any way if user enter the date through keyboard it get format and same date select on calendar.

[summerisgone]

@crisbeto How'd see this option implemented? My suggestion is add md-select-month option to allow selecting months rather than dates.
I didn't figure out how this option should work with md-current-view.

[artharrison]

+1 on this.

I need to implement this in a current project. It would be great if we could do md-select-month == true and have the year view loaded and close when the month is selected.

[crisbeto]

Sorry, I was away last week. I'll try to get this sorted soon, although it also depends on https://github.com/angular/material/issues/9270 since it needs to be able to do different formatting.

[ryan-kimber]

Thanks for doing tackling this. I've put together a Plunkr and I'm running into a couple of issues when I've tried it out.

1. If I specify initial view of month and 'day' as the mode, I can't click the month to step out to change years.
2. If I specify 'year' as the initial view, I can no longer pick a day, even if the mode is day. This would be useful if you were picking a birthdate, for example.

In the Plunkr the first date picker should let you pick a day, and start with the current month. The second date picker should start with the month/year view, but let you pick the day when you select a month. The third date picker behaves as expected - it should allow you to pick a year/month but not a date.

I hope this is helpful and that I'm not just making some silly mistake.

[ryan-kimber]

Hold on - I may have had files from before you marked this as complete. I'll rebuild tomorrow and provide an update.

[crisbeto]

Perhaps I misunderstood the use case @ryan-kimber, but I though the idea was to be able to limit the user to only selecting a certain type of date (e.g. only the day or only the month). In order for that to work, md-mode has to override md-current-view and disable navigation between views. Here's how each of your examples should be:

1. This shouldn't use md-mode at all since it's just the standard calendar. If you give it md-mode="day", it will limit the user to _only_ selecting a day.
2. This also doesn't need md-mode, it just needs md-current-view="year".
3. This one is as expected.

That being said, it doesn't seem like the mode takes in the falsy values properly at the moment. I'll look into that later.

[ryan-kimber]

Ahh. I see. It would be pretty helpful then (at least for projects like
ours) to have md-mode='default'.

We dynamically create a lot of elements, so being able to do
'md-mode={{::dateConfig.mode || 'default'}} would save us from having to do
an ng-if and having two md-datepickers in our template. Anything we can do
to keep code size and number of watches down, we try to do.

I've updated my plunkr to show two dates for each 'date-config' I'd created
and you are correct, it works as you designed.

Would you consider my request to add an option for 'md-mode="default"'?

Thanks.

On Mon, Oct 3, 2016 at 1:32 AM, Kristiyan Kostadinov <
[email protected]> wrote:

Perhaps I misunderstood the use case @ryan-kimber
https://github.com/ryan-kimber, but I though the idea was to be able to
limit the user to only selecting a certain type of date (e.g. only the day
or only the month). In order for that to work, md-mode has to override
md-current-view and disable navigation between views. Here's how each of
your examples should be:

1. This shouldn't use md-mode at all since it's just the standard
   calendar. If you give it md-mode="day", it will limit the user to
   _only_ selecting a day.
2. Starting off with the year, but still selecting a date - This also
   doesn't need md-mode, it just needs md-current-view="year".
3. This one is as expected.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/angular/material/issues/9260#issuecomment-251029690,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AA-JTZJIB77EfXk5xSUx8Ejo-i-zoxMoks5qwJNwgaJpZM4Jevh1
.

[crisbeto]

Sure, I'll re-check since it was supposed to also work if the md-mode was empty, but it doesn't seem like it is.

[crisbeto]

You should be able to set default (or any other invalid value) now @ryan-kimber. Only the valid ones will prevent navigation.

[ryan-kimber]

Excellent. Thank you.

On Monday, October 3, 2016, Kristiyan Kostadinov [email protected]
wrote:

You should be able to set default (or any other invalid value) now
@ryan-kimber https://github.com/ryan-kimber. Only the valid ones will
prevent navigation.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/angular/material/issues/9260#issuecomment-251188615,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AA-JTTsg5CFgR5n1o3cMntuUGeVG-g6Qks5qwUu8gaJpZM4Jevh1
.

[aaroncalderon]

@ryan-kimber I was checking your Plunker, but did not load? Seems like some links to files (angular css js) at https://static.formhero.io/formhero/ return a 403 error.

[ryan-kimber]

Ahh. Yes. This issue was resolved and there have been updates to support
custom date labels, so I removed the old custom-build angular-material
files.

On Tue, Oct 11, 2016 at 6:00 PM, Aaron [email protected] wrote:

@ryan-kimber https://github.com/ryan-kimber I was checking your
Plunker, but did not load? Seems like some links to files (angular css js)
at _https://static.formhero.io/formhero/
https://static.formhero.io/formhero/_ return a 403 error.

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

[aaroncalderon]

@ryan-kimber mmm I am pretty much trying to acheive the same. Where you let the user selcet a year/month but no date (day) but have not figured out how.

Would you care to share how you configured the component? Is the commit pending approval? (to answer my own question... yes).

[volmerf]

The Plunkr still isn't working yet. Could someone provide a snippet on how to achieve the month/year selector only without the need to select a date? md-current-view="year" will give the preferred view but clicking will still go to the day select view. Would be great to override this with a setting. Thanks!

[crisbeto]

The changes needed haven't been merged yet @volmerf

[ryan-kimber]

I've update the Plunkr so that it works.

As crisbeto noted though, this isn't yet merged into Angular-Material proper. If you want to use this you'll either have to copy the angular-material .js and .css from the plunkr, or clone the angular-material repository, make a branch, manually merge the two pull requests for this issue and the custom label for date fields issue and finally run 'npm install && gulp' to build your own custom distribution.

Working in the Plunkr at https://plnkr.co/edit/nJyHfu?p=preview

[chetan01b]

@ryan-kimber Can we achieve only year select mode in md-datepicker, If yes then How can I achieve this functionality? Actually, this is needed when we select financial year or something like that.

Waiting for response.

[ryan-kimber]

If you only want year, why not use an md-select?

The reason for using a md-datepicker is to handle the multiple interactions
required to pick year/month/date and to have the number of days in each
month looked after.

If you are only selecting year, a select box should work just fine.

On Thu, Dec 22, 2016 at 6:05 AM chetan01b [e-mail] wrote:

@ryan-kimber https://github.com/ryan-kimber Can we achieve only year
select mode in md-datepicker, If yes then How can I achieve this
functionality? Actually, this is needed when we select financial year or
something like that.

Waiting for response.

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

[aaroncalderon]

@ryan-kimber Sometimes the presentation can make the difference between well received application or not.

So, if md-datepicker helps the developer deliver a better user experience, then go for it, right?

[ryan-kimber]

... but there is no view in md-datepicker that is year only.

Let me turn this around. Why do you think that using md-datepicker to
select only the year would be a better experience or presentation than an
md-select?

Would it not be more confusing to show months that cannot be selected?

If you are wanting to resolve the date value to year only, you can easily
do that in your controller.

On Thu, Dec 22, 2016 at 6:15 PM Aaron [e-mail] wrote:

@ryan-kimber https://github.com/ryan-kimber Sometimes the presentation
can make the difference between well received application or not.

So, if md-datepicker helps the developer deliver a better user
experience, then go for it, right?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/angular/material/issues/9260#issuecomment-268902694,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AA-JTU6Wyf7i57u90F_1jdn--clTEiWPks5rKvaGgaJpZM4Jevh1
.

[chetan01b]

@ryan-kimber I want to create a UI same as showing in attached, Could that be possible using md-select?
If yes, Please let me know how? angular-material must have such options.
A library is incomplete till it provides complete customization to users.

[aaroncalderon]

@ryan-kimber You are right. If we do not have a year only view, then, using md-datepicker as @chetan01b suggest is a no go.

Perhaps, this could be a feature request. The mockup that @chetan01b suggest is pretty much it.

[vivek147]

Could you please provide me the snippet for selecting month/year only mode ?

[AshokGurram]

@ryan-kimber

https://static.formhero.io/formhero/js/material/v1.1.1-fh-build/angular-material.min.js

The snippet provided here is working very nice.
But the only thing is:

It is working only if we have used

https://static.formhero.io/formhero/js/material/v1.1.1-fh-build/angular-material.min.js

this in our application.

I am not able to achieve this using
https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.1/angular-material.min.js

If i have changed, i need to recheck whole my application.
Can i get the way to implement this using
https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.1/angular-material.min.js

Here is my plunker:
Plunker

[shijithkm]

We cannot use latest material version if you use below custom code.
https://static.formhero.io/formhero/js/material/v1.1.1-fh-build/angular-material.min.js

Can you please make it separate ?

[ryan-kimber]

Unfortunately, these changes did not make it into Angular Material 1.1.3, and aren't totally trivial port over (you could use the directive decorator and override the md-datepicker and it's child directives, but that's not exactly trivial).

So the options are:

1. Live without this functionality until Angular Material 1.2 (which should have these changes)
2. Clone the Git repository for 1.1.3, then merge the pull request for these changes, build the dist to create your own custom version of 1.1.3.

[lukasborawski]

I've used pointer-events with CSS.

[andreuccia]

@lukasborawski Could you post the code of pointer-events ?

[aigdonia]

is this feature planned to be presented in next release??

[tom94zoe]

I am praying to god it is

[viniciusfont]

Nothing new yet?

[lachis]

Very keen for an update on this one.

[kresimirfijacko]

+1
any updates on this one?

[FRSgit]

+1

[pedrinhok]

+1

[viniciusfont]

+1

[Splaktar]

The PR is being considered for merging atm.

[muthu0101]

When we can expect this option, if you can say any proximate date it'll be great.

[insidewhy]

Hm, updated to @angular/material 5.2.1, added matMode=month and nothing changed. Guess it still hasn't been released.

[Splaktar]

@ohjames Please submit Angular Material questions here and issues here. This repo is for AngularJS Material.

[fsitios]

Hm, updated to @angular/material 5.2.1, added matMode=month and nothing changed. Guess it still hasn't been released.

Any news about this feature? Thanks.

[Splaktar]

@fsitios yes, it's supported in AngularJS Material v1.1.6+. If you have questions about a similar feature in Angular Material, please ask on their forums.