如何解决在ngx-bootstrap daterangepicker-inline日历bs-daterangepicker-inline中显示当前月份和上个月
我正在使用ngx-bootstrap@5.5.0日历:Angular中的 bs-daterangepicker-inline 组件
我需要选择一个日期范围。默认情况下,从星期一到今天:
内联日期范围选择器示例
是否可以设置不显示11月的控件?
一般来说,我想在当前月份的日历右侧显示,在上个月的左侧显示。
我“谷歌搜索”,并找到了具有“ showPreviousMonth:true ”属性的解决方案
但不适用于已显示的默认范围。
代码如下:
test-calendar.component.html
<p>today: {{ today }}</p>
<bs-daterangepicker-inline [bsValue]="bsInlineRangeValue"
[maxDate]="maxDate"
[bsConfig]="bsConfig"
(bsValueChange)="onDateRangeChange($event)">
</bs-daterangepicker-inline>
<p class="my-3">range selected: {{ rangeSelected }}</p>
test-calendar.component.ts
import { Component,OnInit } from '@angular/core';
import { BsLocaleService,BsDatepickerConfig } from 'ngx-bootstrap/datepicker';
import * as moment from 'moment';
@Component({
selector: 'app-test-calendar',templateUrl: './test-calendar.component.html',styleUrls: ['./test-calendar.component.css']
})
export class TestCalendarComponent implements OnInit {
private calendarColorTheme = 'theme-dark-blue';
public bsConfig: Partial<BsDatepickerConfig>;
public bsInlineRangeValue: Date[];
private rangeDateStart: Date;
private rangeDateEnd: Date;
public rangeSelected: string = '';
public lastDateEnabled: Date;
public maxDate: Date = new Date();
constructor(private bsLocaleService: BsLocaleService) {
let now: moment.Moment = moment();
let monday: moment.Moment = now.clone().weekday(1);
this.rangeDateStart = moment.utc(monday).local().toDate();
this.rangeDateEnd = new Date();
this.lastDateEnabled = new Date();
this.bsInlineRangeValue = [this.rangeDateStart,this.rangeDateEnd];
this.bsConfig = Object.assign({},{
containerClass: this.calendarColorTheme,customTodayClass: 'custom-today-class',showPreviousMonth: true
});
this.bsLocaleService.use("fr");
}
ngOnInit() {
}
get today(): string {
return moment.utc(this.rangeDateEnd).format('DD/MM/YYYY');
}
public onDateRangeChange(event: Array<Date>): void {
let dateStart: string = moment.utc(event[0]).local().format('DD/MM/YYYY');
let dateEnd: string = moment.utc(event[1]).local().format('DD/MM/YYYY');
this.rangeSelected = `${dateStart} to ${dateEnd}`;
console.log("dateStart:",dateStart," - dateEnd:",dateEnd);
}
}
感谢您的帮助。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。