Angular Material, Md-datepicker - open date-picker on input click

Related searches

I want to open calendar where user chooses date from date-picker not only when user clicks on calendar icon, but also when clicks on input field. Material DatePicker. So I create directive for this, attaching it to <md-datepicker> and also watching for (click) event on input:

Html:

  <md-form-field class="field-half-width">
    <input mdInput [mdDatepicker]="picker2" placeholder="Galioja iki"
            formControlName="dateUntil" (click)="clickInp()">
    <md-datepicker-toggle  id="calendar" mdSuffix [for]="picker2" ></md-datepicker-toggle>
    <md-datepicker #picker2 manualClickRenderer></md-datepicker>
  </md-form-field> 

form-component:

import {ManualClickRerender} from '../shared/directives/manual-click.directive';

@Component({
  selector: 'form',
  providers: [ManualClickRerender]
})

export class FormComponent implements OnInit, OnChanges {
 ...
  clickInp() {
    this.manualClickRerender.botClick();
  }

Directive:

import { Directive, Renderer, ElementRef } from '@angular/core';
@Directive({
  selector: '[manualClickRenderer]'
})
export class ManualClickRerender {

  private nativeElement : Node;

  constructor( private renderer : Renderer, private element : ElementRef ) {
    this.nativeElement = element.nativeElement;
  }

  botClick() {    
    console.log(this.nativeElement); // logs the whole form, not the <md-datepicker>. I guess problem is here
    this.renderer.invokeElementMethod(this.nativeElement, 'click', []);
  }
}

This is my first custom directive ever, so not completaly sure how to import / provide it, etc. I imported it in main module and added to declarations, but after I imported it in my form component (I did that because need to pass click event to it) got error that there are no providers to ManualClickRerender. So added it as provider as well in form-component. So, yes, I imported it twice..

Also as you see, I use Rerender, not Rerender2, because it doesn't have invokeElementMethod method... But I bet there is a workaround, just dont know it..

Thanks in advance for any info.

There is no need for providers

<md-input-container>
     <input mdInput [mdDatepicker]="start" (click)="start.open()" [(ngModel)]="_start" [ngModelOptions]="{standalone: true}" placeholder="choisir date" (keydown)="false">
     <button mdSuffix [mdDatepickerToggle]="start"></button>
</md-input-container>
<md-datepicker #start></md-datepicker>

angular material 2 date picker auto open on focus, mdDatepicker provides method open() in order to open it manually doe developers. You can invoke it at md-input 's focus event. As per @angular/material2 v7.0.1 I've been able to handle the input focus correctly by adding (focus)="picker.open()" on matInput input element to trigger the datepicker opening on focus

You dont need a directive for that. Just add (click)="picker2.open()" in the input field:

  <md-form-field class="field-half-width">
    <input mdInput [mdDatepicker]="picker2" placeholder="Galioja iki"
            formControlName="dateUntil" (click)="picker2.open()">
    <md-datepicker-toggle  id="calendar" mdSuffix [for]="picker2" ></md-datepicker-toggle>
    <md-datepicker #picker2></md-datepicker>
  </md-form-field> 

Here is a link to working demo.

DatePicker doesn't open when i click on input field · Issue #5725 , When the input field in datePicker is clicked then it should open the Which versions of Angular, Material, OS, TypeScript, browsers are affected? so when clicking on the input field it should ask you to pick the date. openCalendar(datePicker: MatDatepicker<Date>) { datePicker.open(); } Also could someone help with selection, choosing the date should have that date as the option selected in the mat-select control. angular angular-material

You can use CSS to make it work.

<mat-form-field>
  <input matInput [matDatepicker]="dp" placeholder="Moment.js datepicker" [formControl]="date">
  <mat-datepicker-toggle[for]="dp"></mat-datepicker-toggle>
  <mat-datepicker #dp></mat-datepicker>
</mat-form-field>

mat-datepicker-toggle.mat-datepicker-toggle {
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
opacity: 0;

button {
  width: 100%;
  height: 100%;
}

}

Datepicker, import {MatDatepickerModule} from '@angular/material/datepicker'; @Input(). startAt: D | null. The date to open the calendar to initially. @Input() because the event may have been triggered by the user clicking on the calendar popup. The datepicker should open its calendar pane as soon as it is focused by default, with an attribute option to go back to the explicit opening behavior. Focus will remain in the text input. jelbourn added the priority: low label on Sep 15, 2015. jelbourn self-assigned this on Sep 15, 2015.

Just one little problem - if I click on edge of the input, placeholder goes up, but calendar doesn't show up. I need to click more in the middle on the input. However, this solution is nice and clean

Answer to this question is just call open function above your input parent like this

                <mat-form-field (click)="picker.open()">
                  <input matInput [matDatepicker]="picker">
                  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
                  <mat-datepicker #picker></mat-datepicker>
                </mat-form-field>

Demos > Datepicker, Opening the calendar when the input is focused. Date-picker that goes straight to the year view Date-picker that only allows for the month to be selected  Install with NPM View Source on Github {{doc | humanizeDoc | directiveBrackets:doc.restrict}} {{doc | humanizeDoc | directiveBrackets}} View Demo View Source on Github

Directives > mdDatepicker, <md-datepicker> is a component used to select a single date. date. debounceInterval : ms to delay input processing (since last debounce reset); default value  Hi Kyle! I see, I need to read up more about digest cycles but I see the picture. Did you make changes in the angular-material file around line 6423 on the CalendarCtrl.prototype.getDateid?

fix(speedDial): non-fab clicks no longer close immediately In the demo application and some user's apps, the `md-open` attribute was bound to an input element, but clicking this element while the FAB Speed Dial was open would open and then immediately close the speed dial since the user clicked outside of the speed dial.

md-datepicker opens on the wrong month when its container has a scroll bar #10209 Closed ppham27 added a commit to ppham27/material that referenced this issue Jan 11, 2017

Comments
  • Ok, open is a function... Great. But your code is not clean. I needed only (click)="start.open()" and (keydown)="false". Just one little problem - if I click on edge of the input, placeholder goes up, but calendar doesn't show up. I need to click more in the middle on the input. However, this solution is nice and clean.
  • Just one more information Angular material is IE10+.
  • @Melchia What a saviour!
  • I didnt realised, that open is a function.. Tried to change it as a property... Yes, stupid, but at least I learned quite a bit about directives :) Thanks