弹出 ng bootstrap 上的日期范围
Date Range on popup ngboostrap
如何在 ng-bootstrap.
的弹出窗口中使用日期范围
<ngb-datepicker #dp (select)="onDateSelection($event)" [displayMonths]="2" [dayTemplate]="t" outsideDays="hidden">
</ngb-datepicker>
<ng-template #t let-date let-focused="focused">
<span class="custom-day"
[class.focused]="focused"
[class.range]="isRange(date)"
[class.faded]="isHovered(date) || isInside(date)"
(mouseenter)="hoveredDate = date"
(mouseleave)="hoveredDate = null">
{{ date.day }}
</span>
</ng-template>
这是日期范围代码,但试图找到在下拉菜单中打开此日期范围的解决方案。
如果您查看示例 stackblitz 代码,它们会在构造函数中设置值:
stackblitz
您只需添加自己的值即可。
小心他们使用自己的日期格式:ngbDateStructure
抱歉我的评论,真正的想法是在下拉菜单中有一个范围选择,请参阅 stackblitz
<form class="form-inline">
<div ngbDropdown class="form-group" placement="bottom-rigth" #myDrop="ngbDropdown">
<div class="input-group">
<input name="range" class="form-control" [ngModel]="range" placeholder="yyyy-mm-dd" (click)="toogle=!toogle">
<div class="input-group-append">
<button ngbDropdownToggle class="btn btn-outline-secondary calendar" type="button"></button>
</div>
<div ngbDropdownMenu >
<ngb-datepicker #dp (select)="onDateSelection($event,myDrop)" [displayMonths]="2" [dayTemplate]="t" outsideDays="hidden">
</ngb-datepicker>
</div>
</div>
</div>
</form>
<ng-template #t let-date let-focused="focused">
<span class="custom-day"
[class.focused]="focused"
[class.range]="isRange(date)"
[class.faded]="isHovered(date) || isInside(date)"
(mouseenter)="hoveredDate = date"
(mouseleave)="hoveredDate = null">
{{ date.day }}
</span>
</ng-template>
<hr/>
<pre>From: {{ fromDate | json }} </pre>
<pre>To: {{ toDate | json }} </pre>
与 select 范围内的原始文档唯一不同的是我通过了下拉菜单,以允许我们关闭。
更改日期时,我设置了一个值 "range" 的格式,该值显示在输入
中
export class AppComponent {
name = 'Angular';
hoveredDate: NgbDate;
fromDate: NgbDate;
toDate: NgbDate;
range:string;
constructor(calendar: NgbCalendar) {
this.fromDate = calendar.getToday();
this.toDate = calendar.getNext(calendar.getToday(), 'd', 10);
}
onDateSelection(date: NgbDate,drop:any) {
if (!this.fromDate && !this.toDate) {
this.fromDate = date;
} else if (this.fromDate && !this.toDate && date.after(this.fromDate)) {
this.toDate = date;
drop.close()
} else {
this.toDate = null;
this.fromDate = date;
}
this.range=this.formatRange(this.fromDate,this.toDate)
}
isHovered(date: NgbDate) {
return this.fromDate && !this.toDate && this.hoveredDate && date.after(this.fromDate) && date.before(this.hoveredDate);
}
isInside(date: NgbDate) {
return date.after(this.fromDate) && date.before(this.toDate);
}
isRange(date: NgbDate) {
return date.equals(this.fromDate) || date.equals(this.toDate) || this.isInside(date) || this.isHovered(date);
}
formatRange(fromDate:NgbDate,toDate:NgbDate)
{
return (fromDate?''+fromDate.year+"-"+('00'+fromDate.month).slice(-2)+"-"+('00'+fromDate.day).slice(-2):"")
+" to "+
(toDate?''+toDate.year+"-"+('00'+toDate.month).slice(-2)+"-"+('00'+toDate.day).slice(-2):"")
}
}
TODO:在输入中添加 (ngModel) 以赋予 "toDate" 和 "fromDate" 值或使输入只读
TODO2:使用组件制作一个 customFormControl
Update 我们可以使用 formControl 来更新范围,stackblitz 是 here
基本上我们使用 [formControl]="range",其中 range 是一个 formControl,所以我们可以订阅 valueChanges
this.range.valueChanges
.pipe(
takeWhile(() => this.alive),
debounceTime(500)
)
.subscribe(res => this.change(res));
而且我们有一个函数变化,比如
change(range: string) {
let start = this.rangeInput.nativeElement.selectionStart;
let value = range.replace(/[^0-9]+/g, "").split("");
let valueJoin = value.join("");
let valueFormated = "";
let fromDate: NgbDate = null;
let toDate: NgbDate = null;
if (value.length >= 8)
fromDate = new NgbDate(
+valueJoin.substring(0, 4),
+valueJoin.substring(4, 6),
+valueJoin.substring(6, 8)
);
if (value.length == 16)
toDate = new NgbDate(
+valueJoin.substring(8, 12),
+valueJoin.substring(12, 14),
+valueJoin.substring(14)
);
value.forEach((c, index) => {
valueFormated += c;
switch (index) {
case 3:
case 5:
case 11:
case 13:
valueFormated += "-";
break;
case 7:
valueFormated += " to ";
}
});
this.range.setValue(valueFormated, { emitEvent: false });
this.fromDate = fromDate;
this.toDate = toDate;
}
如何在 ng-bootstrap.
的弹出窗口中使用日期范围<ngb-datepicker #dp (select)="onDateSelection($event)" [displayMonths]="2" [dayTemplate]="t" outsideDays="hidden">
</ngb-datepicker>
<ng-template #t let-date let-focused="focused">
<span class="custom-day"
[class.focused]="focused"
[class.range]="isRange(date)"
[class.faded]="isHovered(date) || isInside(date)"
(mouseenter)="hoveredDate = date"
(mouseleave)="hoveredDate = null">
{{ date.day }}
</span>
</ng-template>
这是日期范围代码,但试图找到在下拉菜单中打开此日期范围的解决方案。
如果您查看示例 stackblitz 代码,它们会在构造函数中设置值: stackblitz
您只需添加自己的值即可。
小心他们使用自己的日期格式:ngbDateStructure
抱歉我的评论,真正的想法是在下拉菜单中有一个范围选择,请参阅 stackblitz
<form class="form-inline">
<div ngbDropdown class="form-group" placement="bottom-rigth" #myDrop="ngbDropdown">
<div class="input-group">
<input name="range" class="form-control" [ngModel]="range" placeholder="yyyy-mm-dd" (click)="toogle=!toogle">
<div class="input-group-append">
<button ngbDropdownToggle class="btn btn-outline-secondary calendar" type="button"></button>
</div>
<div ngbDropdownMenu >
<ngb-datepicker #dp (select)="onDateSelection($event,myDrop)" [displayMonths]="2" [dayTemplate]="t" outsideDays="hidden">
</ngb-datepicker>
</div>
</div>
</div>
</form>
<ng-template #t let-date let-focused="focused">
<span class="custom-day"
[class.focused]="focused"
[class.range]="isRange(date)"
[class.faded]="isHovered(date) || isInside(date)"
(mouseenter)="hoveredDate = date"
(mouseleave)="hoveredDate = null">
{{ date.day }}
</span>
</ng-template>
<hr/>
<pre>From: {{ fromDate | json }} </pre>
<pre>To: {{ toDate | json }} </pre>
与 select 范围内的原始文档唯一不同的是我通过了下拉菜单,以允许我们关闭。
更改日期时,我设置了一个值 "range" 的格式,该值显示在输入
中export class AppComponent {
name = 'Angular';
hoveredDate: NgbDate;
fromDate: NgbDate;
toDate: NgbDate;
range:string;
constructor(calendar: NgbCalendar) {
this.fromDate = calendar.getToday();
this.toDate = calendar.getNext(calendar.getToday(), 'd', 10);
}
onDateSelection(date: NgbDate,drop:any) {
if (!this.fromDate && !this.toDate) {
this.fromDate = date;
} else if (this.fromDate && !this.toDate && date.after(this.fromDate)) {
this.toDate = date;
drop.close()
} else {
this.toDate = null;
this.fromDate = date;
}
this.range=this.formatRange(this.fromDate,this.toDate)
}
isHovered(date: NgbDate) {
return this.fromDate && !this.toDate && this.hoveredDate && date.after(this.fromDate) && date.before(this.hoveredDate);
}
isInside(date: NgbDate) {
return date.after(this.fromDate) && date.before(this.toDate);
}
isRange(date: NgbDate) {
return date.equals(this.fromDate) || date.equals(this.toDate) || this.isInside(date) || this.isHovered(date);
}
formatRange(fromDate:NgbDate,toDate:NgbDate)
{
return (fromDate?''+fromDate.year+"-"+('00'+fromDate.month).slice(-2)+"-"+('00'+fromDate.day).slice(-2):"")
+" to "+
(toDate?''+toDate.year+"-"+('00'+toDate.month).slice(-2)+"-"+('00'+toDate.day).slice(-2):"")
}
}
TODO:在输入中添加 (ngModel) 以赋予 "toDate" 和 "fromDate" 值或使输入只读
TODO2:使用组件制作一个 customFormControl
Update 我们可以使用 formControl 来更新范围,stackblitz 是 here
基本上我们使用 [formControl]="range",其中 range 是一个 formControl,所以我们可以订阅 valueChanges
this.range.valueChanges
.pipe(
takeWhile(() => this.alive),
debounceTime(500)
)
.subscribe(res => this.change(res));
而且我们有一个函数变化,比如
change(range: string) {
let start = this.rangeInput.nativeElement.selectionStart;
let value = range.replace(/[^0-9]+/g, "").split("");
let valueJoin = value.join("");
let valueFormated = "";
let fromDate: NgbDate = null;
let toDate: NgbDate = null;
if (value.length >= 8)
fromDate = new NgbDate(
+valueJoin.substring(0, 4),
+valueJoin.substring(4, 6),
+valueJoin.substring(6, 8)
);
if (value.length == 16)
toDate = new NgbDate(
+valueJoin.substring(8, 12),
+valueJoin.substring(12, 14),
+valueJoin.substring(14)
);
value.forEach((c, index) => {
valueFormated += c;
switch (index) {
case 3:
case 5:
case 11:
case 13:
valueFormated += "-";
break;
case 7:
valueFormated += " to ";
}
});
this.range.setValue(valueFormated, { emitEvent: false });
this.fromDate = fromDate;
this.toDate = toDate;
}