[英]Ng Bootstrap date range picker [markDisabled] doesn't work on input
I'm trying to disable certain dates on ng bootstrap range picker 我正在尝试在ng bootstrap范围选择器上禁用某些日期
Currently, I have a range picker inside a pop-up, and I am using [markDisabled] to disable certain dates. 当前,我在弹出窗口中有一个范围选择器,并且我正在使用[markDisabled]禁用某些日期。
HTML 的HTML
<form class="form-inline">
<div class="form-group">
<div class="input-group">
<input
#myRangeInput
class="form-control"
placeholder="mm/dd/yyyy - mm/dd/yyyy"
name="dp"
[(ngModel)]="model"
ngbDatepicker
[dayTemplate]="t"
[autoClose]="false"
[displayMonths]="2"
[maxDate]="maxDate"
[minDate]="minDate"
#d="ngbDatepicker" [markDisabled]="isDisabled">
<ng-template #t let-date="date" let-focused="focused" >
<span class="custom-day"
[class.range]="isFrom(date) || isTo(date) || isInside(date) || isHovered(date)"
[class.faded]="isHovered(date) || isInside(date)"
(click)="onDateSelection(date)"
(mouseenter)="hoveredDate = date"
(mouseleave)="hoveredDate = null"
>
{{ date.day }}
</span>
</ng-template>
<div class="input-group-append">
<button class="btn btn-outline-secondary" (click)="d.toggle()" type="button"> click
</button>
</div>
</div>
</div>
</form>
Component: 零件:
const now = new Date();
const equals = (one: NgbDateStruct, two: NgbDateStruct) =>
one && two && two.year === one.year && two.month === one.month && two.day
=== one.day;
const before = (one: NgbDateStruct, two: NgbDateStruct) =>
!one || !two ? false : one.year === two.year ? one.month === two.month ?
one.day === two.day
? false : one.day < two.day : one.month < two.month : one.year < two.year;
const after = (one: NgbDateStruct, two: NgbDateStruct) =>
!one || !two ? false : one.year === two.year ? one.month === two.month ? one.day === two.day
? false : one.day > two.day : one.month > two.month : one.year > two.year;
export class NgbdDatepickerRange implements OnInit{
isDisabled = (date: NgbDate, current: {month: number}) => date.day === 13;
startDate: NgbDateStruct;
maxDate: NgbDateStruct;
minDate: NgbDateStruct;
hoveredDate: NgbDateStruct;
fromDate: any;
toDate: any;
model: any;
private _subscription: Subscription;
private _selectSubscription: Subscription;
@ViewChild("d") input: NgbInputDatepicker;
@ViewChild(NgModel) datePick: NgModel;
@ViewChild('myRangeInput') myRangeInput: ElementRef;
isHovered = date =>
this.fromDate && !this.toDate && this.hoveredDate && after(date, this.fromDate) && before(date, this.hoveredDate)
isInside = date => after(date, this.fromDate) && before(date, this.toDate);
isFrom = date => equals(date, this.fromDate);
isTo = date => equals(date, this.toDate);
constructor(element: ElementRef, private renderer: Renderer2, private _parserFormatter: NgbDateParserFormatter) {
}
ngOnInit() {
this.startDate = {year: now.getFullYear(), month: now.getMonth() + 1, day: now.getDate()};
this.maxDate = { year: now.getFullYear() + 1, month: now.getMonth() + 1, day: now.getDate()};
this.minDate = {year: now.getFullYear() - 1, month: now.getMonth() + 1, day: now.getDate()};
}
onDateSelection(date: NgbDateStruct) {
let parsed = '';
if (!this.fromDate && !this.toDate) {
this.fromDate = date;
} else if (this.fromDate && !this.toDate && after(date, this.fromDate)) {
this.toDate = date;
// this.model = `${this.fromDate.year} - ${this.toDate.year}`;
this.input.close();
} else {
this.toDate = null;
this.fromDate = date;
}
if(this.fromDate) {
parsed += this._parserFormatter.format(this.fromDate);
}
if(this.toDate) {
parsed += ' - ' + this._parserFormatter.format(this.toDate);
}
this.renderer.setProperty(this.myRangeInput.nativeElement, 'value', parsed);
}
}
[markDisabled] works fine when used as following [markDisabled]如下使用时效果很好
<ngb-datepicker #dp (select)="onDateSelection($event)" [displayMonths]="2"
[dayTemplate]="t" outsideDays="hidden" [markDisabled]="isDisabled">
I would like to use markdisabled property inside input element since I want range picker as a pop up. 我想在输入元素中使用markdisabled属性,因为我希望将范围选择器弹出。
I am not sure why, but somehow, your custom Day Template ( ng-template let-date="date"
) seem to have prevented the disabled dates from being rendered/marked as disabled on the popout calender. 我不确定为什么,但是以某种方式,您的自定义“天模板”(
ng-template let-date="date"
)似乎阻止了禁用日期在弹出式日历上呈现/标记为禁用。 You might have overwritten some properties by accident. 您可能无意中覆盖了某些属性。
I haven't had an in-depth look at your code, but I have tried the following and it seems to work. 我没有深入研究您的代码,但是我尝试了以下方法,它似乎可以工作。
First, on your component.html, I have made use of the disabled
property which is part of the DayTemplateContext . 首先,在您的component.html上,我使用了DayTemplateContext一部分中的
disabled
属性。 After which I set the text-muted
class as true, for disabled
dates. 之后,针对
disabled
日期,将text-muted
类设置为true。 This will give the greyed out appearance for disabled
dates. 对于
disabled
日期,这将显示为灰色。 Do make sure that your 请确保您的
<ng-template #t let-date="date" let-focused="focused" let-disabled="disabled">
<span class="custom-day"
[class.text-muted]="disabled"
[class.range]="isFrom(date) || isTo(date) || isInside(date) || isHovered(date)"
[class.faded]="isHovered(date) || isInside(date)"
(click)="onDateSelection(date)"
(mouseenter)="hoveredDate = date"
(mouseleave)="hoveredDate = null">
{{ date.day }}
</span>
</ng-template>
On your component.ts, I have made the following changes to your onDateSelection()
method. 在您的component.ts上,我对
onDateSelection()
方法进行了以下更改。 This is not very elegant, but it does the job for now. 这不是很优雅,但是现在可以完成工作。 I have basically wrapped it with an if-statement to check if the date is on the 13th (which is the disabled date).
我基本上已经用if语句包装它,以检查日期是否在13号(这是禁用日期)。 This will prevent the date itself from being selected.
这将防止选择日期本身。
onDateSelection(date: NgbDateStruct) {
let parsed = '';
if (date.day!==13) {
.
.
// rest of your code
}
}
EDITED: Thanks @Eliseo for the tips, and yes, we can simply add check for disabled
on the click event. 编辑:感谢@Eliseo的提示,是的,我们可以简单地在click事件中添加
disabled
检查。 This way, there is no need for that if-statement on your onDateSelection() statement. 这样,就不需要onDateSelection()语句上的if语句。 I have updated the demo to reflect the changes.
我已经更新了演示以反映更改。
<ng-template #t let-date="date" let-focused="focused" let-disabled="disabled">
<span class="custom-day"
[class.text-muted]="disabled"
[class.range]="isFrom(date) || isTo(date) || isInside(date) || isHovered(date)"
[class.faded]="isHovered(date) || isInside(date)"
(click)="!disabled && onDateSelection(date)"
(mouseenter)="hoveredDate = date"
(mouseleave)="hoveredDate = null">
{{ date.day }}
</span>
</ng-template>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.