angular - 两个日期之间的 TypeScript 差异
问题描述
我正在尝试以天计算两个日期之间的差异。但是,当两个日期在不同月份时,上个月的日期将被丢弃。
例如,如果开始日期是 3 月 31 日,结束日期是 4 月 1 日,则差值为 0。
HTML:
<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>
<p>Number of selected dates: {{DiffDate}}</p>
<pre>From: {{ fromDate | json }} </pre>
<pre>To: {{ toDate | json }} </pre>
打字稿文件:
import {Component} from '@angular/core';
import {NgbDate, NgbCalendar} from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'ngbd-datepicker-range',
templateUrl: './datepicker-range.html',
styles: [`
.custom-day {
text-align: center;
padding: 0.185rem 0.25rem;
display: inline-block;
height: 2rem;
width: 2rem;
}
.custom-day.focused {
background-color: #e6e6e6;
}
.custom-day.range, .custom-day:hover {
background-color: rgb(2, 117, 216);
color: white;
}
.custom-day.faded {
background-color: rgba(2, 117, 216, 0.5);
}
`]
})
export class NgbdDatepickerRange {
hoveredDate: NgbDate;
fromDate: NgbDate;
toDate: NgbDate;
DiffDate;
enddate;
startDate;
constructor(calendar: NgbCalendar) {
this.fromDate = calendar.getToday();
this.toDate = calendar.getNext(calendar.getToday(), 'd', 10);
}
onDateSelection(date: NgbDate) {
if (!this.fromDate && !this.toDate) {
this.fromDate = date;
} else if (this.fromDate && !this.toDate && date.after(this.fromDate)) {
this.toDate = date;
} else {
this.toDate = null;
this.fromDate = date;
}
this.enddate=new Date (this.toDate.year,this.toDate.month,this.toDate.day);
this.startDate=new Date (this.fromDate.year,this.fromDate.month,this.fromDate.day);
this.DiffDate=Math.floor((Date.UTC(this.enddate.getFullYear(),this.enddate.getMonth(),this.enddate.getDate())-Date.UTC(this.startDate.getFullYear(),this.startDate.getMonth(),this.startDate.getDate()) )/(1000 * 60 * 60 * 24));
//this.DiffDate=(this.DiffDate/86400000);
}
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);
}
}
如果两天在同一个月,它工作正常。
提前感谢您的支持。
更新:我想出了如何解决它。一切都按预期工作,除非所选日期是该月的最后一天。现场演示可以在下面找到:
例如,开始日期:3 月 19 日,结束日期:3 月 21 日。相差2天。
But when start day selected is March 31st, it is calculated as May 1st:
知道出了什么问题吗?提前致谢。
解决方案
使用 moment 的 diff 函数,您可以获得这两个日期之间正确的 1 天差异。
this.firstDate = moment('2019/03/31');
this.secondDate = moment('2019/04/01');
this.diffInDays = Math.abs(this.firstDate.diff(this.secondDate, 'days'));
请参阅此stackblitz进行演示。
更新:
我分叉了你的stackblitz。一般创建了两个新函数并清理了一些重复。
NgbDate 具有年、月和日三个属性。重要的是该月从 1 开始(对于 JS 原生 Date 对象,不是从零开始)参见 NgbDate docs here。
private createDateFromNgbDate(ngbDate: NgbDate): Date {
const date: Date = new Date(Date.UTC(ngbDate.year, ngbDate.month-1, ngbDate.day));
return date;
}
还有一个单独的函数来计算天数的差异,如下所示:
private calcDaysDiff(): number {
const fromDate: Date = this.createDateFromNgbDate(this.fromDate);
const toDate: Date = this.createDateFromNgbDate(this.toDate);
const daysDiff = Math.floor(Math.abs(<any>fromDate - <any>toDate) / (1000*60*60*24));
return daysDiff;
}
检查更新的stackblitz,如果您仍有问题,请告诉我。
推荐阅读
- c# - 实体框架核心 - 排序
- php - 为什么我的 php 文件无法读取样式表,即使是 html 也可以读取相同的样式
- .net - 在 IIS 错误中部署 WCF 服务 - “localhost 当前无法处理此请求”
- vim - vimscript: vim 寄存器的补全
- ios - 单元格视图收缩动画很生涩
- javascript - JavaScript Map 对象中的递增值
- python - 蟒蛇打印错误
- java - 在groovy中将for循环的结果写入csv
- wix - WiX 安装程序 - 如何使用 Wix 3.10 检查 .net framework 3.5 和 4.6
- makefile - Makefile:匹配多个模式规则