javascript - imagen - angular material tutorial

Formato de fecha Angular 2 Material 2 datepicker

Question

Necesito ayuda. No sé cómo cambiar el formato de fecha del selector de fecha material 2. He leído la documentación pero no entiendo lo que realmente necesito hacer. El formato de fecha de salida que datepicker proporciona por defecto es fe: 6/9/2017

Lo que estoy tratando de lograr es cambiar el formato al 9 de junio de 2017 o cualquier otro.

La documentación https://material.angular.io/components/component/datepicker no me ayuda en absoluto. Gracias por adelantado

Answer 1

¿Por qué no usar Angular DatePipe?

import {Component} from ''@angular/core'';
import {DateAdapter, MAT_DATE_FORMATS, NativeDateAdapter} from ''@angular/material'';
import {FormControl} from ''@angular/forms'';
import {DatePipe} from ''@angular/common'';

export const PICK_FORMATS = {
    parse: {dateInput: {month: ''short'', year: ''numeric'', day: ''numeric''}},
    display: {
        dateInput: ''input'',
        monthYearLabel: {year: ''numeric'', month: ''short''},
        dateA11yLabel: {year: ''numeric'', month: ''long'', day: ''numeric''},
        monthYearA11yLabel: {year: ''numeric'', month: ''long''}
    }
};
class PickDateAdapter extends NativeDateAdapter {
    format(date: Date, displayFormat: Object): string {
        if (displayFormat === ''input'') {
            return new DatePipe(''en-US'').transform(date, ''EEE, MMM dd, yyyy'');
        } else {
            return date.toDateString();
        }
    }
}
@Component({
    selector: ''custom-date'',
    template: `<mat-form-field>
                   <input matInput [formControl]="date" />
                   <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
                   <mat-datepicker #picker></mat-datepicker>
               </mat-form-field>`,
    providers: [
        {provide: DateAdapter, useClass: PickDateAdapter},
        {provide: MAT_DATE_FORMATS, useValue: PICK_FORMATS}
    ]
})
export class DateComponent {
    date = new FormControl(new Date());
    constructor() {}
}

Answer 2

Aquí está la única solución que encontré para esta:

Primero, crea const:

const MY_DATE_FORMATS = {
   parse: {
       dateInput: {month: ''short'', year: ''numeric'', day: ''numeric''}
   },
   display: {
       // dateInput: { month: ''short'', year: ''numeric'', day: ''numeric'' },
       dateInput: ''input'',
       monthYearLabel: {year: ''numeric'', month: ''short''},
       dateA11yLabel: {year: ''numeric'', month: ''long'', day: ''numeric''},
       monthYearA11yLabel: {year: ''numeric'', month: ''long''},
   }
};

Luego tienes que extender NativeDateADapter:

export class MyDateAdapter extends NativeDateAdapter {
   format(date: Date, displayFormat: Object): string {
       if (displayFormat == "input") {
           let day = date.getDate();
           let month = date.getMonth() + 1;
           let year = date.getFullYear();
           return this._to2digit(day) + ''/'' + this._to2digit(month) + ''/'' + year;
       } else {
           return date.toDateString();
       }
   }

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

En la función de formato, puede elegir el formato que desee

Y el último paso, debe agregarlo a los proveedores de módulos:

providers: [
    {provide: DateAdapter, useClass: MyDateAdapter},
    {provide: MD_DATE_FORMATS, useValue: MY_DATE_FORMATS},
],

Y eso es. No puedo creer que no haya una forma fácil de cambiar el formato de fecha a través de @Input, pero esperemos que se implemente en alguna versión futura del material 2 (actualmente beta 6 ).

Answer 3

Crea una constante para el formato de fecha.

export const DateFormat = {
parse: {
  dateInput: ''input'',
  },
  display: {
  dateInput: ''DD-MMM-YYYY'',
  monthYearLabel: ''MMMM YYYY'',
  dateA11yLabel: ''MM/DD/YYYY'',
  monthYearA11yLabel: ''MMMM YYYY'',
  }
};

Y use el siguiente código dentro del módulo de la aplicación

 providers: [
  { provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },
  { provide: MAT_DATE_FORMATS, useValue: DateFormat }
]

Answer 4

De la documentación:

Customizing the parse and display formats

The MD_DATE_FORMATS object is just a collection of formats that the datepicker uses when parsing and displaying dates. These formats are passed through to the DateAdapter so you will want to make sure that the format objects you''re using are compatible with the DateAdapter used in your app. This example shows how to use the native Date implementation from material, but with custom formats.

@NgModule({
  imports: [MdDatepickerModule],
  providers: [
    {provide: DateAdapter, useClass: NativeDateAdapter},
    {provide: MD_DATE_FORMATS, useValue: MY_NATIVE_DATE_FORMATS},
  ],
})
export class MyApp {}

1. Agregar requerido a NgModule.
2. Crea tu propio formato - MY_NATIVE_DATE_FORMATS

Answer 5

El trabajo que me funciona es:

my.component.html:

<md-input-container>
  <input mdInput disabled [ngModel]="someDate | date:''d-MMM-y''" >
  <input mdInput [hidden]=''true'' [(ngModel)]="someDate"  
[mdDatepicker]="picker">
  <button mdSuffix [mdDatepickerToggle]="picker"></button>
</md-input-container>
<md-datepicker #picker></md-datepicker> 

my.component.ts :


@Component({...
})
export class MyComponent implements OnInit {
  ....
  public someDate: Date;
  ...

Entonces ahora puede tener el formato (Ej. ''D-MMM-y'') que mejor funcione para usted.

Answer 6

Existe una alta probabilidad de que ya use una biblioteca que le brinde una forma conveniente de manipular (analizar, validar, mostrar, etc.) fechas y horas en JavaScript. Si no lo hace, eche un vistazo a uno de ellos, por ejemplo moment.js .

Implementar su adaptador personalizado usando moment.js se vería así.

Cree CustomDateAdapter.ts e impleméntelo así:

import { NativeDateAdapter } from "@angular/material";
import * as moment from ''moment'';

export class CustomDateAdapter extends NativeDateAdapter {
    format(date: Date, displayFormat: Object): string {
        moment.locale(''ru-RU''); // Choose the locale
        var formatString = (displayFormat === ''input'')? ''DD.MM.YYYY'' : ''LLL'';
        return moment(date).format(formatString);
    }
}

En su app.module.ts :

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

providers: [
    ...
    {
        provide: DateAdapter, useClass: CustomDateAdapter
    },
    ...
]

Eso es. Simple, fácil y sin necesidad de reinventar las bicicletas.

Answer 7

La respuesta de Igor no funcionó para mí, así que pregunté directamente sobre el github de Angular 2 Material y alguien me dio esa respuesta que funcionó para mí:

1. Primero escriba su propio adaptador:

   import { NativeDateAdapter } from "@angular/material";
   
   
   export class AppDateAdapter extends NativeDateAdapter {
   
       format(date: Date, displayFormat: Object): string {
   
           if (displayFormat === ''input'') {
   
               const day = date.getDate();
               const month = date.getMonth() + 1;
               const year = date.getFullYear();
   
               return `${day}-${month}-${year}`;
           }
   
           return date.toDateString();
       }
   }

2. Crea tu formato de fecha:

   export const APP_DATE_FORMATS =
   {
       parse: {
           dateInput: { month: ''short'', year: ''numeric'', day: ''numeric'' },
       },
       display: {
           dateInput: ''input'',
           monthYearLabel: { year: ''numeric'', month: ''numeric'' },
           dateA11yLabel: { year: ''numeric'', month: ''long'', day: ''numeric'' },
           monthYearA11yLabel: { year: ''numeric'', month: ''long'' },
       }
   };

3. Proporcione esos dos a su módulo

   providers: [
           {
               provide: DateAdapter, useClass: AppDateAdapter
           },
           {
               provide: MAT_DATE_FORMATS, useValue: APP_DATE_FORMATS
           }
       ]

Más información aquí

Answer 8

Robouste funcionó perfecto !!

Hice uno sencillo (Angular 4 "@ angular / material": "^ 2.0.0-beta.10") primero hizo datepicker.module.ts

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

    class AppDateAdapter extends NativeDateAdapter {
        format(date: Date, displayFormat: Object): string {
            if (displayFormat === ''input'') {
                const day = date.getDate();
                const month = date.getMonth() + 1;
                const year = date.getFullYear();
                return `${year}-${month}-${day}`;
            } else {
                return date.toDateString();
            }
        }
    }

    const APP_DATE_FORMATS = {
    parse: {
    dateInput: {month: ''short'', year: ''numeric'', day: ''numeric''}
    },
    display: {
    // dateInput: { month: ''short'', year: ''numeric'', day: ''numeric'' },
    dateInput: ''input'',
    monthYearLabel: {year: ''numeric'', month: ''short''},
    dateA11yLabel: {year: ''numeric'', month: ''long'', day: ''numeric''},
    monthYearA11yLabel: {year: ''numeric'', month: ''long''},
    }
    };

    @NgModule({
    declarations:  [ ],
    imports:  [ ],
        exports:  [ MdDatepickerModule, MdNativeDateModule ],
    providers: [
    {
        provide: DateAdapter, useClass: AppDateAdapter
    },
    {
        provide: MD_DATE_FORMATS, useValue: APP_DATE_FORMATS
    }
    ]
    })

    export class DatePickerModule {

    }

simplemente impórtelo (app.module.ts)

    import {Component, NgModule, VERSION,  ReflectiveInjector}   from ''@angular/core''//NgZone,
    import { CommonModule }              from ''@angular/common'';
    import {BrowserModule}               from ''@angular/platform-browser''
    import { BrowserAnimationsModule }        from ''@angular/platform-browser/animations'';
    import { FormsModule }              from ''@angular/forms'';
    import { DatePickerModule }            from ''./modules/date.picker/datepicker.module'';

    @Component({
    selector: ''app-root'',
    template: `
    <input (click)="picker.open()" [mdDatepicker]="picker" placeholder="Choose a date" [(ngModel)]="datepicker.SearchDate"  >
    <md-datepicker-toggle mdSuffix [for]="picker"></md-datepicker-toggle>
    <md-datepicker #picker touchUi="true"  ></md-datepicker>
    `,
    })


    export class App{
        datepicker = {SearchDate:new Date()}
        constructor( ) {}

        }

    @NgModule({
    declarations: [ App ],
    imports: [ CommonModule, BrowserModule, BrowserAnimationsModule, FormsModule, DatePickerModule],
    bootstrap: [ App ],
    providers: [   ]//NgZone
    })
    export class AppModule {}

Answer 9

Solo necesita proporcionar un MAT_DATE_FORMATS personalizado

export const APP_DATE_FORMATS = {
    parse: {dateInput: {month: ''short'', year: ''numeric'', day: ''numeric''}},
    display: {
        dateInput: {month: ''short'', year: ''numeric'', day: ''numeric''},
        monthYearLabel: {year: ''numeric''}
    }
};

y agregarlo a los proveedores.

providers: [{
   provide: MAT_DATE_FORMATS, useValue: APP_DATE_FORMATS
}]

code trabajo

Answer 10

Utilicé la solución propuesta por @ igor-janković y tuve el problema de "Error: No capturado (en promesa): TypeError: No se puede leer la propiedad ''dateInput'' de undefined". Me di cuenta de que este problema se debía a que MY_DATE_FORMATS debe declararse como type MdDateFormats :

export declare type MdDateFormats = {
    parse: {
        dateInput: any;
    };
    display: {
        dateInput: any;
        monthYearLabel: any;
        dateA11yLabel: any;
        monthYearA11yLabel: any;
    };
};

Entonces, la forma correcta de declarar MY_DATE_FORMATS es:

const MY_DATE_FORMATS:MdDateFormats = {
   parse: {
       dateInput: {month: ''short'', year: ''numeric'', day: ''numeric''}
   },
   display: {
       dateInput: ''input'',
       monthYearLabel: {year: ''numeric'', month: ''short''},
       dateA11yLabel: {year: ''numeric'', month: ''long'', day: ''numeric''},
       monthYearA11yLabel: {year: ''numeric'', month: ''long''},
   }
};

Con la modificación anterior, la solución funciona para mí.

Saludos

Answer 11

crear un archivo date.adapter.ts

import { NativeDateAdapter, DateAdapter, MAT_DATE_FORMATS, MatDateFormats } from "@angular/material";

export class AppDateAdapter extends NativeDateAdapter {
    parse(value: any): Date | null {
        if ((typeof value === ''string'') && (value.indexOf(''/'') > -1)) {
          const str = value.split(''/'');
          const year = Number(str[2]);
          const month = Number(str[1]) - 1;
          const date = Number(str[0]);
          return new Date(year, month, date);
        }
        const timestamp = typeof value === ''number'' ? value : Date.parse(value);
        return isNaN(timestamp) ? null : new Date(timestamp);
      }
   format(date: Date, displayFormat: string): string {
       if (displayFormat == "input") {
          let day = date.getDate();
          let month = date.getMonth() + 1;
          let year = date.getFullYear();
          return   year + ''-'' + this._to2digit(month) + ''-'' + this._to2digit(day)   ;
       } else if (displayFormat == "inputMonth") {
          let month = date.getMonth() + 1;
          let year = date.getFullYear();
          return  year + ''-'' + this._to2digit(month);
       } else {
           return date.toDateString();
       }
   }
   private _to2digit(n: number) {
       return (''00'' + n).slice(-2);
   }
}
export const APP_DATE_FORMATS =
{
   parse: {
       dateInput: {month: ''short'', year: ''numeric'', day: ''numeric''}
   },
   display: {
       dateInput: ''input'',
       monthYearLabel: ''inputMonth'',
       dateA11yLabel: {year: ''numeric'', month: ''long'', day: ''numeric''},
       monthYearA11yLabel: {year: ''numeric'', month: ''long''},
   }
}

app.module.ts

  providers: [
    DatePipe,
    {
        provide: DateAdapter, useClass: AppDateAdapter
    },
    {
        provide: MAT_DATE_FORMATS, useValue: APP_DATE_FORMATS
    }
    ]

app.component.ts

import { FormControl } from ''@angular/forms'';
import { DatePipe } from ''@angular/common'';
@Component({
  selector: ''datepicker-overview-example'',
  templateUrl: ''datepicker-overview-example.html'',
  styleUrls: [''datepicker-overview-example.css''],
  providers: [
    DatePipe,
    {
        provide: DateAdapter, useClass: AppDateAdapter
    },
    {
        provide: MAT_DATE_FORMATS, useValue: APP_DATE_FORMATS
    }
    ]
})
export class DatepickerOverviewExample {
  day = new Date();
  public date;
 constructor(private datePipe: DatePipe){
    console.log("anh "," " +datePipe.transform(this.day.setDate(this.day.getDate()+7)));
    this.date = new FormControl(this.datePipe.transform(this.day.setDate(this.day.getDate()+7)));
    console.log("anht",'' '' +new Date());
 }
}

app.component.html

<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="Choose a date" [formControl]="date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>