- 首页
- 其他开发
- Angular Material 6 datepicker 同一组件中的不同格式
Angular Material 6 datepicker 同一组件中的不同格式
[英] Angular Material 6 datepicker different formats in same component
本文介绍了Angular Material 6 datepicker 同一组件中的不同格式的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我需要在一个组件视图的两个 mat datepicker 字段中选择两种不同的日期格式(YYYY-MM-DD 和 YYYY-MM).
我使用的是 angular 6.0.3 和材料 6.4.7.
我在应用程序模块中使用 MAT_DATE_FORMATS 将日期选择器格式配置为 YYYY-MM-DD 并且它在全局范围内工作,但我需要在一些日期选择器字段中将此格式覆盖为 YYYY-MM,正如我上面所写的.不幸的是,我不知道如何实现这一目标.
你能帮我吗?
我的部分代码:
import { Component, OnInit, ViewChild } from '@angular/core';从'@angular/forms' 导入 { FormGroup, FormControl };@成分({选择器:'app-invoice-list',templateUrl: './invoice-list.component.html',styleUrls: ['./invoice-list.component.css']})导出类 InvoiceListComponent {filterForm:FormGroup;@ViewChild('month_picker') month_picker;构造函数(){this.filterForm = new FormGroup({assigned_date_from: 新的 FormControl(),assigned_date_to: 新的 FormControl(),assigned_month: 新的 FormControl(),});}}<div class="container" [formGroup]="filterForm"><div class="container" fxLayout="row" fxLayout.xs="column" fxLayoutWrap fxLayoutGap="0.5%" fxLayoutAlign="start"><div fxFlex="32%"><mat-form-field><input matInput [matDatepicker]="date_from_picker" (focus)="date_from_picker.open()" formControlName="assigned_date_from" placeholder="Date from"><mat-datepicker-toggle matSuffix [for]="date_from_picker"></mat-datepicker-toggle><mat-datepicker #date_from_picker></mat-datepicker></mat-form-field>
<div fxFlex="32%"><mat-form-field><input matInput [matDatepicker]="date_to_picker" (focus)="date_to_picker.open()" formControlName="assigned_date_to" placeholder="Date to"><mat-datepicker-toggle matSuffix [for]="date_to_picker"></mat-datepicker-toggle><mat-datepicker #date_to_picker></mat-datepicker></mat-form-field>
<!-- 在下面的输入中,我想要月年格式 - YYYY-MM - 与上述字段中的默认格式不同 -><div fxFlex="32%"><mat-form-field><input matInput [matDatepicker]="month_picker" (focus)="month_picker.open()" formControlName="assigned_month" placeholder="Month"><mat-datepicker-toggle matSuffix [for]="month_picker"></mat-datepicker-toggle><mat-datepicker #month_picker></mat-datepicker></mat-form-field>
解决方案
请试试这个.在你的 HTML
<input matInput [matDatepicker]="month_picker" (focus)="month_picker.open()" [value] = "selectedMonth" placeholder="Month"><mat-datepicker-toggle matSuffix [for]="month_picker"></mat-datepicker-toggle><mat-datepicker #month_picker开始视图=多年"(monthSelected)="chosenMonthHandler($event, month_picker)"></mat-datepicker></mat-form-field>
在您的 .ts 中
selectedMonth = new Date();selectedMonthHandler(normlizedMonth,日期选择器){var tempDate = JSON.stringify(normlizedMonth).replace("\"",'').split("-")var 月份 = parseInt(tempDate[1])var year = month == 12?parseInt(tempDate[0])+1:parseInt(tempDate[0])var year = month == 12?parseInt(tempDate[0])+1:parseInt(tempDate[0])月 = 月 == 12?1:month+1;this.selectedMonth = 新日期(年 + "-" + 月)console.log(年 + " " + 月)datepicker.close();}
这很好用.但是在选择一个月后将所选日期显示为 1.但我认为这满足您的要求.
I need to select two different date formats (YYYY-MM-DD and YYYY-MM) in two mat datepicker fields in one component view.
I'm using angular 6.0.3 and material 6.4.7.
I configured datepicker format to YYYY-MM-DD in app module using MAT_DATE_FORMATS and it works globally but I need to override this format to YYYY-MM in a few datepicker fields as I wrote above.
Unfortunatelly I have no idea how I can achieve this.
Could You help me please?
Parts of my code:
import { Component, OnInit, ViewChild } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
@Component({
selector: 'app-invoice-list',
templateUrl: './invoice-list.component.html',
styleUrls: ['./invoice-list.component.css']
})
export class InvoiceListComponent {
filterForm: FormGroup;
@ViewChild('month_picker') month_picker;
constructor() {
this.filterForm = new FormGroup({
assigned_date_from: new FormControl(),
assigned_date_to: new FormControl(),
assigned_month: new FormControl(),
});
}
}
<div class="container" [formGroup]="filterForm">
<div class="container" fxLayout="row" fxLayout.xs="column" fxLayoutWrap fxLayoutGap="0.5%" fxLayoutAlign="start">
<div fxFlex="32%">
<mat-form-field>
<input matInput [matDatepicker]="date_from_picker" (focus)="date_from_picker.open()" formControlName="assigned_date_from" placeholder="Date from">
<mat-datepicker-toggle matSuffix [for]="date_from_picker"></mat-datepicker-toggle>
<mat-datepicker #date_from_picker></mat-datepicker>
</mat-form-field>
</div>
<div fxFlex="32%">
<mat-form-field>
<input matInput [matDatepicker]="date_to_picker" (focus)="date_to_picker.open()" formControlName="assigned_date_to" placeholder="Date to">
<mat-datepicker-toggle matSuffix [for]="date_to_picker"></mat-datepicker-toggle>
<mat-datepicker #date_to_picker></mat-datepicker>
</mat-form-field>
</div>
<!-- In below input I want month year format - YYYY-MM - so different than default format in above fields -->
<div fxFlex="32%">
<mat-form-field>
<input matInput [matDatepicker]="month_picker" (focus)="month_picker.open()" formControlName="assigned_month" placeholder="Month">
<mat-datepicker-toggle matSuffix [for]="month_picker"></mat-datepicker-toggle>
<mat-datepicker #month_picker></mat-datepicker>
</mat-form-field>
</div>
</div>
</div>
解决方案
Please try this.
In your Html
<mat-form-field>
<input matInput [matDatepicker]="month_picker" (focus)="month_picker.open()" [value] = "selectedMonth" placeholder="Month">
<mat-datepicker-toggle matSuffix [for]="month_picker"></mat-datepicker-toggle>
<mat-datepicker #month_picker
startView="multi-year"
(monthSelected)="chosenMonthHandler($event, month_picker)"></mat-datepicker>
</mat-form-field>
In your .ts
selectedMonth = new Date();
chosenMonthHandler(normlizedMonth, datepicker) {
var tempDate = JSON.stringify(normlizedMonth).replace("\"",'').split("-")
var month = parseInt(tempDate[1])
var year = month == 12?parseInt(tempDate[0])+1:parseInt(tempDate[0])
var year = month == 12?parseInt(tempDate[0])+1:parseInt(tempDate[0])
month = month == 12?1:month+1;
this.selectedMonth = new Date(year + "-" + month)
console.log(year + " " + month)
datepicker.close();
}
This works well.but show the selected date as 1 after select a month.But I think this fulfills your requirements.
这篇关于Angular Material 6 datepicker 同一组件中的不同格式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!