Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Can't bind to 'mdDatepickerToggle' since it isn't a known property of 'button'. #6186

Closed
fabulias opened this issue Aug 1, 2017 · 10 comments

Comments

@fabulias
Copy link

fabulias commented Aug 1, 2017

Bug, feature request, or proposal:

[X] Bug

What is the expected behavior?

I am update with npm install --save angular/material2-builds angular/cdk-builds and my DatePicker not work, my browser terminal return error with mdDatepickerToggle

Can't bind to 'mdDatepickerToggle' since it isn't a known property of 'button'
<button mdSuffix [ERROR ->][mdDatepickerToggle]="pickerInit"></button>

This is my code

<md-input-container>
                  <input
                    mdInput
                    [mdDatepicker]="pickerInit"
                    placeholder="Fecha inicial"
                    [min]="minDate"
                    [max]="maxDate"
                    [value]="10-2-2017"
                    name="init"
                    #init="ngModel"
                    ngModel
                    required>
                  <button mdSuffix [mdDatepickerToggle]="pickerInit"></button>
                </md-input-container>
                <md-datepicker #pickerInit></md-datepicker>

5 minutes ago I worked well, I do not know what happened

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 4.0.0
Material github:angular/material2-builds (this show in package.json)
OS Mac

@CaerusKaru
Copy link
Member

CaerusKaru commented Aug 1, 2017

As of #5317, [mdDatepickerToggle] attribute has been changed to md-datepicker-toggle element

@ashishsharma123
Copy link

use can use md-datepicker-toggle like this:
<md-datepicker-toggle mdSuffix [for]="picker"></md-datepicker-toggle>

Hope this will help you :)

@BenRacicot
Copy link

@CaerusKaru I think there is a lot of example code out there with the former type <button mdSuffix [mdDatepickerToggle]="pickerInit"></button>

https://material.angular.io/components/datepicker/overview being one.

@CaerusKaru
Copy link
Member

@BenRacicot Yes, because the current release (2.0.0-beta.8) still officially supports the old type. This is a breaking change before beta 9, and the documentation will be updated accordingly.

@BenRacicot
Copy link

BenRacicot commented Aug 22, 2017

@thank you for clarifying @CaerusKaru! Much clearer now.

Looks like beta.9 just dropped.
<md-datepicker-toggle mdSuffix [for]="picker"></md-datepicker-toggle> is not picking up... Waiting on docs to catch up.

mrg3kko added a commit to Vastra-Gotalandsregionen/oppna-program-arbetsplatskoder-data that referenced this issue Aug 30, 2017
…ted <button mdSuffix [mdDatepickerToggle]="fromDatepicker" type="button"></button>. Now (GA9+) this should be implemented <md-datepicker-toggle mdSuffix [for]="fromDatepicker"></md-datepicker-toggle>. Also see angular/components#6186.
AJIex1s added a commit to AJIex1s/form-to-search-hotel that referenced this issue Sep 5, 2017
@ronit123321
Copy link

Guys any update regarding the usage of date-picker, on using <md-datepicker-toggle mdSuffix [for]="picker"> ; i get this error

ERROR TypeError: Cannot read property 'disabled' of undefined
at MdDatepickerToggle.get [as disabled] (material.es5.js:20168)
at Object.View_MdDatepickerToggle_0._co [as updateDirectives] (MdDatepickerToggle.html:1)
at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:13075)
at checkAndUpdateView (core.es5.js:12255)
at callViewAction (core.es5.js:12620)
at execComponentViewsAction (core.es5.js:12552)
at checkAndUpdateView (core.es5.js:12261)
at callViewAction (core.es5.js:12620)
at execEmbeddedViewsAction (core.es5.js:12578)
at checkAndUpdateView (core.es5.js:12256)

@CaerusKaru
Copy link
Member

@ronit123321 Using the example here, adding the disabled property to md-datepicker-toggle works properly. If you're having this issue and can recreate it in a plunkr, please file a separate issue.

@elwinarens
Copy link

Returning to an Angular + Material project after a month 😂 🔫

@BenRacicot
Copy link

I know your pain @elwinarens ! Look out for this too: #7346

@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 7, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

7 participants