How to use angular 2 material design Datapicker in two pages with different configuration? -
i have 2 datapickers 1 on home page , other in student page, in student page setup component date fri 28 jul 2017
because default 14/07/2017
that's exacly how need on home page
i thoght let's create new module student , add settings show configuration student page , import mddatepickermodule
in home , solve problem noup
student.module
import { ngmodule } '@angular/core'; import { mdnativedatemodule, dateadapter, md_date_formats } '@angular/material'; import { my_native_date_formats } '../../assets/date-format/mydataformat'; import { mydateadapter } '../../assets/date-format/mydateadapter'; /** * class represents whip holder. */ @ngmodule({ imports: [mdnativedatemodule], providers: [ {provide: dateadapter, useclass: mydateadapter}, {provide: md_date_formats, usevalue: my_native_date_formats} ] }) export class studentmodule {}
home.module
import { ngmodule } '@angular/core'; import { homeroutingmodule } './home-routing.module'; import { browsermodule } '@angular/platform-browser'; import { commonmodule } '@angular/common'; //material import { mddatepickermodule // dateadapter, // md_date_formats } '@angular/material'; //customize datapicker // import { my_native_date_formats } '../../assets/date-format/mydataformat'; // import { mydateadapter } '../../assets/date-format/mydateadapter'; import { studentmodule } './student/student.module'; @ngmodule({ imports: [mddatepickermodule] }) export class homemodule { }
structure:
├── src │ └── client │ ├── app │ │ ├── app.component.e2e-spec.ts │ │ ├── app.component.html │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ ├── app.routes.ts │ │ ├── home <-- datapicker │ │ │ ├── student <--- datapicker │ │ │ | ├── student.component.scss │ │ │ │ ├── student.component.html │ │ │ | ├── student.component.ts │ │ │ | ├── student.module.ts │ │ │ ├── home-routing.component.ts │ │ │ ├── home.component.html │ │ │ ├── home.component.scss │ │ │ ├── home.component.ts │ │ │ ├── home.module.ts │ │ ├── assets │ │ │ ├── date-format │ │ │ │ ├── mydataformat.ts │ │ │ │ ├── mydataadapter.ts
how can configure show default data component in homepage keeping setup in student page?
the datapicker component called this
student.component.html
<button [mddatepickertoggle]="date"></button> <input [mddatepicker]="date" /> <md-datepicker #date></md-datepicker>
home.component.html
<button [mddatepickertoggle]="datehome"></button> <input [mddatepicker]="datehome" /> <md-datepicker #datehome></md-datepicker>
how did define my_native_date_formats? can't find documentation on it.
Comments
Post a Comment