我正在使用angular 8,我想实现一个日期选择器,突出显示daterage: enter image description here 我正在寻找像这样的包裹:https://www.npmjs.com/package/saturn-datepicker 不幸的是,它已被弃用,目前我找不到其他类似的东西。 你知道一些我的目的吗?谢谢。
答案 0 :(得分:1)
在物料日期选择器中,您可以定义最大值和最小值。
例如:
example.hml
<input matInput [min]="minValue" [max]="maxValue" [matDatepicker]="picker" formControlName="name"/> <mat-datepicker #voltageToDatePiker [startAt]="tomorrow"></mat-datepicker>
example.ts
minValue = new Date();
maxValue = new Date();
答案 1 :(得分:1)
重要更新,我的好! Google充满了像我这样的控件! (记住:谷歌是我的朋友,谷歌是我的朋友...)
我正在此stackblitz中创建一个datePicker范围,之后我将尝试解释
更新我改进了堆栈闪电问题并作了简要说明
mat-date-picker有一点很重要,那就是不可能创建日模板。因此,必须使用Renderer2添加侦听器,添加类或删除类。我需要使用this another SO
中显示的document.querySelectorAll想法是,在选定单元格的情况下创建对象数组
{
date: //will be a getTime of the date,
element: //will be the nativeElement x,
change: //a boolean to indicate this cell has an aditional class
x.listen: //the listener added to allow us remove the listener
}
还有一个函数,该函数帮助我们根据两个变量添加/删除类:this._dateTo和另一个变量,它将是this._dateFrom或另一个(我们很早就知道了为什么)
redrawCells(timeTo: number) {
timeTo = timeTo || this._dateTo;
if (timeTo<this._dateFrom)
timeTo=this._dateFrom
this.cells.forEach(x => {
const change = x.date >= this._dateFrom && x.date <= timeTo;
if (change || x.change) {
x.change = change;
const addInside = x.change ? "addClass" : "removeClass";
const addFrom = x.date == this._dateFrom? "addClass":
x.date == timeTo && this._dateFrom==timeTo? "addClass":
"removeClass";
const addTo = x.date == timeTo? "addClass":
x.date == this._dateFrom && this._dateFrom==timeTo? "addClass":
"removeClass";
this.renderer[addInside](x.element, "inside");
this.renderer[addFrom](x.element, "from");
this.renderer[addTo](x.element, "to");
}
});
}
新功能setCell将由谁管理td添加/删除鼠标悬停的监听器。它是必需的,因为我们在绘制日历之前调用了此函数
setCells() {
setTimeout(() => {
if (this.cells) {
this.cells.forEach(x => {
x.listen(); //<---remove the listener
});
}
this.dateOver = null;
//get the elements
let elements = document.querySelectorAll(".calendar");
if (!elements || elements.length == 0) return;
const cells = elements[0].querySelectorAll(".mat-calendar-body-cell");
this.cells = [];
//with each element we fill our array "this.cells"
cells.forEach((x, index) => {
const date = new Date(x.getAttribute("aria-label"));
const time=new Date(date.getFullYear() +"-" +(date.getMonth() + 1) +
"-" +date.getDate()).getTime()
this.cells.push({
date: time,
element: x,
change:time>=this._dateFrom && time<=this._dateTo
});
});
this.cells.forEach(x => {
if (!x.listen) {
//we add a listener "mouseover"
x.listen = this.renderer.listen(x.element, "mouseover", () => {
if (!this._dateTo && this.dateOver != x.date) {
this.dateOver = x.date;
this.redrawCells(this.dateOver); //who call to redrawCells
}
});
}
});
});
}
那么,解析和格式化日期以及使用mat-menu打开mat-calendar所需的其余功能来自this another SO。在最后一个SO中,日历没有关闭,因此,我们可以使用两次单击来获取dateFrom和dateTo
select(date: any) {
date = new Date(
date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate()
);
if (
!this.from.value ||
(this.from.value && this.to.value) ||
this._dateFrom > date.getTime()
) {
this.dateFrom = date;
this.dateTo = null;
this.redrawCells(date.getTime());
} else {
this.dateTo = date;
this.trigger.closeMenu();
}
}
我喜欢创建垫子自定义组件。这使我们可以在mat-form-field中使用该组件,例如
<mat-form-field class="full-width" >
<mat-label>Select dates</mat-label>
<date-picker-range [formControl]="control" placeholder="DD/MM/YYYY" ></date-picker-range>
<mat-error>required</mat-error>
</mat-form-field>
并允许例如我们使用[disabled]禁用formControl,然后标签像另一个mat-input一样移动。为此,我们需要添加一些功能,请参见(我保证这是最后一个)last recent SO
注意:控件是按“原样”提供的,没有任何保证,并且允许使用:对其进行批评,改进,修改,使用或将其作为不良示例
答案 2 :(得分:0)
在角形材料中,可以指定范围 https://material.angular.io/components/datepicker/overview#date-range-selection
<mat-form-field appearance="fill">
<mat-label>Enter a date range</mat-label>
<mat-date-range-input [rangePicker]="picker">
<input matStartDate placeholder="Start date">
<input matEndDate placeholder="End date">
</mat-date-range-input>
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-date-range-picker #picker></mat-date-range-picker>
</mat-form-field>
https://stackblitz.com/angular/pydjpbqmvqq?file=src%2Fapp%2Fdate-range-picker-overview-example.html