Question

我在主页上有两个数据采集器，在学生页面中有一个，在我的学生页面中，我设置了组件以获取Fri 28 Jul 2017之类的日期，因为默认情况下为14/07/2017，但这很明显我在主页上需要它

我很好，让我们为学生创建一个新模块，并添加设置以显示学生页面的配置，然后导入MdDatepickerModule在主页，这将解决问题，但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 { }

结构：

├── 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

如何配置在我的主页中显示组件的默认数据，但是在我的学生页面中保留设置？

像我这样调用的数据贴纸组件

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

你是如何定义MY_NATIVE_DATE_FORMATS的？我无法找到相关文档。

Answer 2

我使用 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'}
      }

    };

和我的 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);
   }

}

如何在两个不同配置的页面中使用角度2材质设计Datapicker？

2 个答案: