在 Angular 应用程序的 ngb-datepicker (ng Bootstrap) 中获取所选日期的 "Day"
Get "Day" of Selected Date in ngb-datepicker (ng Bootstrap) in Angular Application
演示:
https://stackblitz.com/edit/angular-bife8z-px13fl?file=app%2Fdatepicker-basic.html
我已将 Day(Sunday) 添加为静态文本,我希望根据日期选择表单日历对其进行更改。
试试这个:
组件html
Selected Date is: <b>{{getDay(model)}}</b>
组件 ts
getDay(model){
let date = new Date(Date.UTC(model.year, model.month - 1, model.day, 0, 0, 0))
let days = new Array( "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday" );
let day = days[date.getDay() - 1]
return day
}
您可以使用日历来获取星期几,并有一个存储日期名称的字典。
weekDays = {
1: 'Monday',
2: 'Tuesday',
3: 'Wednesday',
4: 'Thursday',
5: 'Friday',
6: 'Satarday',
7: 'Sunday'
}
Selected Date is: <b>{{weekDays[calendar.getWeekday(model)]}}
https://stackblitz.com/edit/angular-bife8z-bftzuu?file=app%2Fdatepicker-basic.html
事实上,您可以在 model
变量的 setter 中设置一天的变量。
selectedDay: string = '';
set model(val) {
this._model = val;
this.selectedDay = this.weekDays[this.calendar.getWeekday(this.model)]
}
get model() {
return this._model;
}
Selected Date is: <b>{{selectedDay}}</b> <br>
演示: https://stackblitz.com/edit/angular-bife8z-px13fl?file=app%2Fdatepicker-basic.html
我已将 Day(Sunday) 添加为静态文本,我希望根据日期选择表单日历对其进行更改。
试试这个:
组件html
Selected Date is: <b>{{getDay(model)}}</b>
组件 ts
getDay(model){
let date = new Date(Date.UTC(model.year, model.month - 1, model.day, 0, 0, 0))
let days = new Array( "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday" );
let day = days[date.getDay() - 1]
return day
}
您可以使用日历来获取星期几,并有一个存储日期名称的字典。
weekDays = {
1: 'Monday',
2: 'Tuesday',
3: 'Wednesday',
4: 'Thursday',
5: 'Friday',
6: 'Satarday',
7: 'Sunday'
}
Selected Date is: <b>{{weekDays[calendar.getWeekday(model)]}}
https://stackblitz.com/edit/angular-bife8z-bftzuu?file=app%2Fdatepicker-basic.html
事实上,您可以在 model
变量的 setter 中设置一天的变量。
selectedDay: string = '';
set model(val) {
this._model = val;
this.selectedDay = this.weekDays[this.calendar.getWeekday(this.model)]
}
get model() {
return this._model;
}
Selected Date is: <b>{{selectedDay}}</b> <br>