Xin chào mọi người, hôm nay tienanhvn sẽ trình bày cho các bạn về material datepicker format angular đây là một trong những trường hợp khi các bạn làm với các sự kiện select datepicker in angular, bởi vì theo yêu cầu của người dùng muốn hiển thị ngày, tháng, năm theo một thứ tự nào đó thì các bạn phải format datepicker input in angular.
Bây giờ chúng ta đi vào thực hiện fomart datepicker.
Link tham khảo thêm angular
Step 1. Tạo một file date.adapter.ts
Step 2. thêm dòng lệnh vào trong app.module.ts
Demo online.
Tags: datepicker format in angular, format input datepicker angular, how to set datepicker in angular, angular datepicker format.
Datepicker in angular là gì?
Đây là một calendar cho phép bạn lựa chọn những ngày tháng năm, theo ý muốn bạn, nó hiện thị như một calendar với nhiều tháng, nhiều năm, nó giúp người dùng giảm thời gian nhập liệu.Bây giờ chúng ta đi vào thực hiện fomart datepicker.
Link tham khảo thêm angular
- How to multy language in angular
- HOW TO HIDDEN AND SHOW EN ELEMENT IN ANGULAR
- HOW TO MULTI LANGUAGE IN ANGULAR USING NGX-TRANSLATE
- HOW TO GET LANGUAGE BROWSER IN ANGULAR
Step 1. Tạo một file date.adapter.ts
import { NativeDateAdapter, DateAdapter, MAT_DATE_FORMATS, MatDateFormats } from "@angular/material";Trong đó:
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'},
}
}
return year + '-' + this._to2digit(month) + '-' + this._to2digit(day)bạn có thể thay đổi - thành / tùy ý của bạn.
Step 2. thêm dòng lệnh vào trong app.module.ts
providers: [Hoặc có thể bạn bỏ dòng lệnh này trong file component.ts
DatePipe,
{
provide: DateAdapter, useClass: AppDateAdapter
},
{
provide: MAT_DATE_FORMATS, useValue: APP_DATE_FORMATS
}
]
@Component({Step 3. Tạo một component có tên datepicker.component.ts
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
}
]
})
import { FormControl } from '@angular/forms';Step 4. Tạo một component.html
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());
}
}
<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>
Demo online.
Tags: datepicker format in angular, format input datepicker angular, how to set datepicker in angular, angular datepicker format.
Post a Comment
Post a Comment