Components: DatePicker doesn't open when i click on input field

[turab007]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

When the input field in datePicker is clicked then it should open the datePicker.
Currently it only opens if i click on the datePicker icon.

What is the current behavior?

When i click on the input field, the datePicker doesnt open and instead it expects me to write the date.

What are the steps to reproduce?

Providing a Plunker (or similar) is the best way to get the team to see your issue.
Plunker template: https://goo.gl/DlHd6U

What is the use-case or motivation for changing an existing behavior?

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

i am using Angular2, TypeScript 2.3.4 and Material 2.0.0-beta.6

Is there anything else we should know?

[julianobrasil]

You can make it work by using the onFocus and onClick events together (at the input tag): (focus)="myPicker.open()" and (click)="myPicker.open()" (mark it as readonly if you don't want the final users to type in dates).

The onFocus takes care of the situation where the component is reached by navigating using the Tab key.

The onClick is necessary because the focus remains in the input after the user choose a date. If he wants to open the datepicker again without actually leaving the input it will be not possible: he will have to blur the input and focus it again to fire the onFocus event. So the onClick avoids this problem.

[jelbourn]

As @julianobrasil describes, this behavior can be added via focus handler on the input. We don't implement this behavior by default because it is not an optimal workflow for screen-reader users.

[turab007]

I have configured it as @julianobrasil said but shouldn't this be the default behavior? As this is a datePicker so when clicking on the input field it should ask you to pick the date. It's a date-PICKER. The name tells what it should do.

[agiratech-vigneshm]

@jelbourn why don't we just let the developer decides the accessibility level he needs for the website and make the datepicker work as a datepicker? I think we can make up for the screen readers using the ARIA attributes. Closing the issue without letting a discussion happen here is not so good IMHO.

[jpike88]

We don't implement this behavior by default because it is not an optimal workflow for screen-reader users

What...?! That is such a weird line of reasoning.

Why sacrifice developer ease of implementation for a use case almost zero of us care about to begin with? Shouldn't screen-reader comparability be an opt-in feature? That's like blowing the font up by default on the off-chance someone with poor vision will be reading the page.

[jpike88]

@jelbourn I think this issue should be reopened or rediscussed

[emilio-martinez]

@jpike88 accessibility compliance is a major goal of this project. See "The goal of Angular Material" in the Readme.

[jpike88]

At the expense of usability for the 99.9999% (or 100%) of people who will ever use 99.9999% of sites built with this framework. The end result is that you create all these workarounds that sit on old issues that people have to stumble across because it didn't behave the way they'd expect it to. At the very least make it a flag like [openPickerOnClick].

[AlexMihov96]

You can make it work by using the onFocus and onClick events together (at the input tag): (focus)="myPicker.open()" and (click)="myPicker.open()" (mark it as readonly if you don't want the final users to type in dates).

The onFocus takes care of the situation where the component is reached by navigating using the Tab key.

The onClick is necessary because the focus remains in the input after the user choose a date. If he wants to open the datepicker again without actually leaving the input it will be not possible: he will have to blur the input and focus it again to fire the onFocus event. So the onClick avoids this problem.

@julianobrasil Hello, how do I reset the value of the datepicker ( input field ) when using picker.open()

[julianobrasil]

@AlexMihov96, you can set it via the associated <input>. You can set it when the calendar opens subscribing a function to the opened output (take a look at the API on the docs site).

[AlexMihov96]

@AlexMihov96, you can set it via the associated <input>. You can rl set it when the calendar opens subscribing a function to the opened output (take a look at the API on the docs site).

@julianobrasil Alright, my next question is how to put a button next to the calender toggle button

[julianobrasil]

Like a clear button?

[AlexMihov96]

Yes exactly

[julianobrasil]

In that case, do not use the provided toggle. Instead of using it provide your own mat-icon-button's. Something like (just an idea, you'll have to test it a little bit):

<mat-form-field>
  <input  [formControl]="inputControl" 
          [matDatepicker]="picker" 
          matInput 
          placeholder="Choose a date">

  <section class="row-buttons" 
           matSuffix>
    <button (click)="picker.open()" 
            mat-icon-button 
            type="button">
      <mat-icon>calendar_today</mat-icon>
    </button>

    <button (click)="inputControl.setValue(null)" 
            [disabled]="inputControl.value" 
            mat-icon-button
            type="button">
      <mat-icon>clear</mat-icon>
    </button>
  </section>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

.row-buttons {
  display: flex;
}

[AlexMihov96]

In that case, do not use the provided toggle. Instead of using it provide your own mat-icon-button's. Something like (just an idea, you'll have to test it a little bit):

<mat-form-field>
  <input  [formControl]="inputControl" 
          [matDatepicker]="picker" 
          matInput 
          placeholder="Choose a date">

  <section class="row-buttons" 
           matSuffix>
    <button (click)="picker.open()" 
            mat-icon-button 
            type="button">
      <mat-icon>calendar_today</mat-icon>
    </button>

    <button (click)="inputControl.setValue(null)" 
            [disabled]="inputControl.value" 
            mat-icon-button
            type="button">
      <mat-icon>clear</mat-icon>
    </button>
  </section>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

.row-buttons {
  display: flex;
}

Thank you very much, I've managed to do it this way, but these 2 icons ( clear and toggle ) are far right, i've tried to move them closer to the placeholder word but without result.

[julianobrasil]

You can control mat-form-field width:

<mat-form-field class="m-width">
...
</<mat-form-field>

.m-width {
  width: 150px;
}

[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._}