How to use angular 2 material design Datapicker in two pages with different configuration?

Question

I have two datapickers one on the home page and other in the student page, In my student page I setup the component to get the date like Fri 28 Jul 2017 because by default was 14/07/2017 but that's exacly how I need it on my home page

I thoght well let's create a new module for the student and add the settings to just show the configuration for the student page and just import the MdDatepickerModule in the home and that would solve the problem but noup

STUDENT.MODULE

import { NgModule } from '@angular/core';
import { MdNativeDateModule,
         DateAdapter,
         MD_DATE_FORMATS } from '@angular/material';


import { MY_NATIVE_DATE_FORMATS } from '../../assets/date-format/mydataformat';
import { MyDateAdapter } from '../../assets/date-format/mydateadapter';
/**
 * This class represents the 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 } from '@angular/core';
import { HomeRoutingModule } from './home-routing.module';


import { BrowserModule } from '@angular/platform-browser';  
import { CommonModule } from '@angular/common';


//material
import {

  MdDatepickerModule
  // DateAdapter,
  // MD_DATE_FORMATS
      } from '@angular/material';

//customize datapicker
// import { MY_NATIVE_DATE_FORMATS } from '../../assets/date-format/mydataformat';
// import { MyDateAdapter } from '../../assets/date-format/mydateadapter';



import { StudentModule } from './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 I configure to show the default data for the component in my homepage but keeping the setup for in my student page?

the datapicker component I called like 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>

Answer 1

how did you define MY_NATIVE_DATE_FORMATS? I can't find any documentation on it.

Answer 2

I solved it using a condition in my mydataformat.ts

import { MdDateFormats } from '@angular/material';
import { Location } from '@angular/common';

let inputs = ( window.location.pathname === '/' ? 'input-home' :'input' );

    export const MY_NATIVE_DATE_FORMATS: MdDateFormats = {

      parse: {
         dateInput: {month: 'short', year: 'numeric', day: 'numeric'}
      },

      display: {
        dateInput: inputs,
        monthYearLabel: {year: 'numeric', month: 'long'},
        dateA11yLabel: {year: 'numeric', month: 'long', day: 'numeric'},
        monthYearA11yLabel: {year: 'numeric', month: 'long'}
      }

    };

and my mydateadapter.ts

import { NativeDateAdapter }  from '@angular/material';

export class MyDateAdapter extends NativeDateAdapter {
   format(date: Date, displayFormat: Object): string {

      let day = date.getDate();
      let month = date.getMonth();
      let year = date.getFullYear();

      if (displayFormat == "input") {


          let pickupData = date.toDateString();
          let pickupDataArray = pickupData.split(" ");
          let yearPicked = pickupDataArray[3]; 

          const without = pickupData.substring(0, pickupData.length-4);

          return without + '     '+yearPicked ;

       } else if (displayFormat == "input-home") {
          return this._to2digit(day) + '/' + this._to2digit(month) +'/'+ year;
       }

       else{
        return date.toDateString();
      }
   }

   private _to2digit(n: number) {
       return ('00' + n).slice(-2);
   }

}