有没有办法自定义角度日期选择器? [英] Is there a way to customize angular date picker?
问题描述
我需要帮助定制角度材料日期选择器,即https://material.angular.io/components/datepicker/overview.一旦我们点击日期,日历就不应该关闭.我应该可以有 2 个按钮,一个是取消",另一个是保存".单击保存按钮后,日历应关闭.
我不知道这是否是更好的解决方案,但基于此 SO 答案,我认为解决方案是使用带有日历的菜单.
因为我们需要一个输入,所以我们至少需要两个函数,一个将输入的值解析为一个日期对象,另一个在我们有一个日期对象时格式化输入的值.
因为我希望这个特殊"日期选择器可以以多种方式格式化日期,YYYY-MM-DD 和 DD/MM/YYYY 我需要树变量
placeHolder:string="DD/MM/YYYY"分隔符:字符串;订单:数量[]=[];
一个函数给了我们分隔符和顺序"的值
init(placeholder:string){this.separator=placeholder.replace(/[YMD]/g,'').substr(0,1)const parts=placeholder.replace(/[.\/]/g,'-').split('-')this.order[0]=parts.indexOf('YYYY')this.order[1]=parts.indexOf('MM')this.order[2]=parts.indexOf('DD')}
所以,我们的函数解析和格式变得像
格式(日期:任意){如果(!日期)返回空;const 部分=[''+date.getFullYear(),("00" + (date.getMonth() + 1)).slice(-2),("00" + date.getDate()).slice(-2)]返回部分[this.order[0]]+this.separator+零件[this.order[1]]+this.separator+零件[this.order[2]]}解析(值:字符串){const parts=value?value.replace(/[.\/]/g,'-').split('-'):[]const date:any=(parts.length==3)?新日期(parts[this.order[0]]+'-'+parts[this.order[1]]+'-'+parts[this.order[2]]):空值返回日期 &&date.getTime &&date.getTime()?date:null}
一个辅助函数可以让我们(模糊)重新构造值
tryFormat(value:string){const date=this.parse(value)this.date=date?this.format(date):value}
当菜单"打开时,允许更改ViewChild中日历的活动日期
@ViewChild('calendar',{static:false}) calendar:any打开(){如果(这个日期){const date=this.parse(this.date);如果(日期){this.calendar.activeDate=日期;}}}
最后,.html 就像
<mat-label>日期</mat-label><input matInput placeholder="{{placeHolder}}" [(ngModel)]="date" (blur)="tryFormat(date)" ><button matSuffix mat-icon-button [matMenuTriggerFor]="appMenu" (menuOpened)="onOpen()"><mat-icon>calendar_today</mat-icon>按钮></mat-form-field><mat-menu #appMenu="matMenu" class="drop-calendar" ><div (click)="$event.stopPropagation()"><mat-calendar #calendar(selectedChange)="date=format($event)"[选择]="解析(日期)"></mat-calendar>
</mat-menu>
完整代码在 堆叠闪电战
I need help in customizing the angular material date picker i.e,https://material.angular.io/components/datepicker/overview. The calendar should not close once we click on the date. I should be able to have 2 buttons, one is 'cancel' and another is 'save'. Once the save button is clicked, the calendar should be closed.
I don't know if it's a better solution, but based on this SO answer, I think that the solution is use a menu with a calendar inside.
As we need an input we need at least two functions, one to parse the value of the input to a Date Object, and another to format the value of the input when we has a Date Object.
As I want this "special" datepicker can format the date in severals ways, YYYY-MM-DD and DD/MM/YYYY I need tree variables
placeHolder:string="DD/MM/YYYY"
separator:string;
order:number[]=[];
A function give us the value of "separator and order"
init(placeholder:string)
{
this.separator=placeholder.replace(/[YMD]/g,'').substr(0,1)
const parts=placeholder.replace(/[.\/]/g,'-').split('-')
this.order[0]=parts.indexOf('YYYY')
this.order[1]=parts.indexOf('MM')
this.order[2]=parts.indexOf('DD')
}
So, our function parse and formats becomes like
format(date:any)
{
if (!date)
return null;
const parts=[''+date.getFullYear(),
("00" + (date.getMonth() + 1)).slice(-2),
("00" + date.getDate()).slice(-2)]
return parts[this.order[0]]+this.separator+
parts[this.order[1]]+this.separator+
parts[this.order[2]]
}
parse(value:string)
{
const parts=value?value.replace(/[.\/]/g,'-').split('-'):[]
const date:any=(parts.length==3)?
new Date(parts[this.order[0]]+'-'+parts[this.order[1]]+'-'+parts[this.order[2]]):
null
return date && date.getTime && date.getTime()?date:null
}
An auxiliar function aloow us in (blur) reformatear the value
tryFormat(value:string)
{
const date=this.parse(value)
this.date=date?this.format(date):value
}
And a function when the "menu" is open, allow change the active date of the calendar that get in a ViewChild
@ViewChild('calendar',{static:false}) calendar:any
onOpen()
{
if (this.date)
{
const date=this.parse(this.date);
if (date)
{
this.calendar.activeDate=date;
}
}
}
Finally, the .html is like
<mat-form-field class="example-full-width">
<mat-label>Date</mat-label>
<input matInput placeholder="{{placeHolder}}" [(ngModel)]="date" (blur)="tryFormat(date)" >
<button matSuffix mat-icon-button [matMenuTriggerFor]="appMenu" (menuOpened)="onOpen()">
<mat-icon>calendar_today</mat-icon>
</button>
</mat-form-field>
<mat-menu #appMenu="matMenu" class="drop-calendar" >
<div (click)="$event.stopPropagation()">
<mat-calendar #calendar
(selectedChange)="date=format($event)"
[selected]="parse(date)">
</mat-calendar>
</div>
</mat-menu>
And the full code is in the stackblitz
这篇关于有没有办法自定义角度日期选择器?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!