Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular 2 Material Datepicker Value

I want to use Angular Material Datepicker to get a date into my page. I use this code, but cannot figure out how to access the selected value correctly.

<md-input-container>
  <input mdInput [mdDatepicker]="myDatepicker">
  <button mdSuffix [mdDatepickerToggle]="myDatepicker"></button>
</md-input-container>
<md-datepicker #myDatepicker></md-datepicker>

I tried the [value] field in input but how can I get the date to send it to my backend? Thanks.

like image 338
hawxs Avatar asked Jun 04 '17 16:06

hawxs


People also ask

How can I get mat datepicker value?

To use Datepicker in our application, we need to import MatDatepickerModule in application module. On this page we will create Datepicker and fetch selected value using NgModel , FormControl and FormGroup .

How do I customize my mat datepicker?

mat-datepicker exampleAdd a template reference variable mat-datepicker element. Connect mat-datepicker to input element via [matDatepicker] property. Finally add date picker toggle button to display or hide calender popup by using mat-datepicker-toggle element.

What is Mat-datepicker-toggle?

A datepicker is composed of a text input and a calendar pop-up, connected via the matDatepicker property on the text input. There is also an optional datepicker toggle button that gives the user an easy way to open the datepicker pop-up.


1 Answers

You can access the datepicker value by using ngModel. The ngModel needs to be in the input tag. See the Plunker demo.

like image 90
Nehal Avatar answered Oct 16 '22 15:10

Nehal