Material: md-datepicker should support md-input-container and floating label

[kuhnroyal]

Currently the datepicker doesn't align well with other input fields. It would be nice if we can do something like

<md-input-container>
    <label>Date</label>
    <md-datepicker ng-model="myDate"></md-datepicker>
</md-input-container>

and have everything well aligned with other form fields.
Also the icon should be optional.

[jelbourn]

Possibly dupe of #3234 for the issue with md-input for the alignment.

[dterbeest]

+1
When used in md-input-container it seems that the class md-input-has-value is not added which causes text color to be transparent

[no-more]

+1

All input should have the same behavior, and with the current version if we don't define an external label and the field is already set there's no way to know what the date is for (place holder not visible anymore)

Thanks.

[jelbourn]

This is going to be addressed along with #3234 for 0.12 as the two issues are interrelated.

[arlowhite]

In case this helps, this is my SASS hack to line-up md-datepicker with other inputs that have icons. Also, as people mentioned don't put it inside a md-input-container.

form {
  md-datepicker {
    position: relative;
    left: -16px;

    .md-datepicker-input-container{
      margin-left: 0;
    }
    .md-datepicker-button.md-icon-button {
      margin-right: 0;
    }
  }
}

[bluebirdtech]

+1

@arlowhite Thanks for sharing. I got something similar. This one handles the height difference too, though not without consequences as noted:

// Match styling of md-datepicker with other inputs using md-no-float and icons: https://github.com/angular/material/issues/4233
// TODO: The popup does not open from the correct location anymore
// TODO: The popup 'input mask' element is transparent on the left and other input elements (including the icon) are visible in the background.
md-datepicker {
    padding-top: 3px;
    > button.md-datepicker-button.md-icon-button.md-button {
        margin-left: 0px;
        margin-right: 0px;
        width: 30px;
        height: 30px;
        line-height: 30px;
        min-height: 30px;
    }
    > div.md-datepicker-input-container {
        margin-left: 8px;
        padding-bottom: 4px;
    }
    &.md-datepicker-open > div.md-datepicker-input-container > input.md-datepicker-input { // Stop the jumping on open
        height: inherit;
        margin-left: 20px;
        // tabindex needs to be -1: https://github.com/angular/material/issues/4755
    }
}

[guilhermecvm]

+1

[Judis]

+1

[kpgarrod]

It is not clear to me from following the various threads related to md-datepicker whether or not it should be coded as described in the original post of this issue. It certainly looks like the right way to go, but doesn't work correctly in rc3. Is it going to be fixed in rc4? I would like to be able to use this syntax and know that it will work in the future.

[kuhnroyal]

@kpgarrod the syntax in the description doesn't work at the moment, this issue is about getting this syntax in

[jelbourn]

@kpgarrod The documentation always gives the canonical usage of the component.

[kpgarrod]

@kuhnroyal @jelborn Thanks. I understand that. My point is that I would like to know if there is an imminent plan for the implementation of this change, if indeed the change has been accepted. The datepicker doesn't work for me as is, so I was looking at alternative datepickers. If this change and the one enabling the selection of years were implemented, I would be able to use this datepicker which is obviously preferable. It is just not clear to me whether that is going to happen in rc4 or not.

[ghost]

+1

[cleever]

There's no way to know what the date is for (place holder not visible anymore).

[isyun]

+1

[michaelkrog]

+1

[vladimir-novoseltsev]

+1

[snowping]

+1

[rbosneag]

+1

[rudzikdawid]

+1

[sunny9240]

+1

[adammartak]

+1

[LeoLozes]

+1

[salcio]

+1

[adam-snyder]

+1

[alessandro-vincelli]

+1

[stunaz]

+1

[jelbourn]

Please stop adding +1s. It just creates noise for the team on issues we already plan on addressing.

[jrabbe]

Now that Angular Material 1.0 is available, what will happen with this issue? Obviously 1.0-rc8 never happened, so when will it be fixed?

[LeoLozes]

I think the datepicker being used in the captures of the 1.0 release blog post must be some kind of insider joke :)

[carlosvicient]

+1

[matcobat]

+1

[vadim82]

+1

[Visionstar]

+1

[ThomsCass]

+1

[BMartinos]

+1. Is there any progress on this issue? Its becoming quite annoying not having a label for the datepicker and causing some confusion on my forms. Especially when I have multiple datepickers on a form and i don't know which input is which after selecting dates. E.g Start Date and End Date. Progress on this will be much appreciated. Thanks

[raffaele-abramini]

+1

[brunsgaard]

+1

[karsunke]

+1

[mgalante]

+1

[dhruvdutt]

+1

[oveach]

+1

[lisophorm]

+1

[nitin7dc]

+1

[george-i]

+1

[Robin-Hoodie]

+1

[dm723]

+1

[mramanauskas]

+1

[wendelnascimento]

+1

[Xianoni]

Yes, +1, there's 944 persons watching this repo, I don't think 944 '+1' will help in anything. I too am looking forward to the day this problem will be solved, but each time I receive an e-mail regarding this issue it's for a '+1', and really, it's annoying...

[NenadP]

plus one ;) , unti then forced to use workarounds as

<div layout="column" flex>
    <label class="md-caption">To Date</label>
    <md-datepicker name="toDate" ng-model="data.toDate" required md-placeholder="To Date"></md-datepicker>
</div>

[volmerf]

+1

[devalecs]

+1

[catindev]

+1

[raza2022]

+1

[jaimeguaman]

+1

[jrc4]

+1

[a2ron]

+1

[pitama]

+1

[michaeljoelphillips]

+1

[stefan-leye]

+1

[rolandmaio]

+1

[DomenicD]

+1

[tenosiswono]

+1

[samcfc]

+1 for img with labelWrapper

[no-more]

Hi,

I know this issue is related to material spec, but is it possible to have some kind of due date or maybe a temporary solution instead of waiting for the final specification version ?

Really the current design is unusable without floating label when you have several date fields on screen. Would it take so much time to implement the floating label instead of leaving this thread open ?

Thanks.

[subeebot]

+1

[askucher]

+1

[diosney]

+1

[zbrukas]

+1

[AntonFend]

+1

[francittadini]

+1

[jonaszuberbuehler]

+1

[wpanas]

+1

[angryfatkid]

+50

@jelbourn - How is this an edge case? We are building forms and following the floating label pattern. this datepicker and the chips controls do not support this. If there was a work around for displaying a fixed label I could get by, but my devs have not found a reasonable way to do this.

[jelbourn]

Sorry, wrong label was applied. The team definitely knows this is an issue, it's just been hard to schedule it WRT other bugs/regressions.

[axsaucedo]

+1

[tom94zoe]

+1

[jaydubu]

+1

[KalpanaAr]

+1

[viktarkorshun]

+1

[supastif]

This is definitely a problem...

[alois-wever]

+1

[kevinlbatchelor]

+1

[mys]

+1

[EricWVGG]

+1

If you guys are about to bust out a major point release, now’s the time to get this over with.

[jojogeyer]

+1

[johnyricalde]

+1

[michelem09]

+1

[jjlangley]

+1

[stevenxzhou]

+1

[netoramalho]

+1

[CodyMorris]

+1

[ask007learning]

+1

[dongorous]

+1

[no-more]

Hello,

I don't understand why this is planned only for 1.2.0 ? this seems to be one of the most requested feature, and I might be wrong but I don't think this would be so hard to implement (for guys like you - I'm not an expert I don't think I could do it myself sorry).

Personally I've been waiting for this feature(date picker) for almost a full year, and since it released I still can't use it because of this design 'flaw'.

Thanks a lot to take this in consideration.

[baj84]

+1

[datenwort]

+1

[dimitrisfasoulas]

+1

[smfiorillo]

+1

[SunnyTam]

+1

[avtorfox]

+1

[rexhxiao]

+1

[wallzero]

+1

[danieloprado]

+1

[farodriguez]

+1

[frederikmartin]

+1

[scriptsure]

+1

[CarlosRoig]

+1

[wildgarden]

+1

[qorsmond]

+1

[Ciebiada]

+1

[tarlepp]

+1

[EricWVGG]

thank you, thank you, thank you

[rowanv]

+1