如何使用 PrimeNG 日历设置日历?
How to set calendar using PrimeNG calendar?
我有一个日历控件,我想为它设置一些值,但我在下面的行中收到以下错误,而且值也没有设置。
this.data.dateIn = this.selecteddata.dateIn;
<p-calendar [(ngModel)]="data.dateIn" [showIcon]="true" name="dateInCalendar"
required #dateInCalendar="ngModel">
</p-calendar>
ERROR Error: Uncaught (in promise): TypeError: date.getMonth is not a
function
TypeError: date.getMonth is not a function
at Calendar.webpackJsonp.../../../../primeng/components/calendar/calendar.js.Calendar.formatDate
(calendar.js:649)
at Calendar.webpackJsonp.../../../../primeng/components/calendar/calendar.js.Calendar.updateInputfield
(calendar.js:252)
at Calendar.webpackJsonp.../../../../primeng/components/calendar/calendar.js.Calendar.writeValue
(calendar.js:595)
at forms.es5.js:1779
at forms.es5.js:2965
at Array.forEach ()
at FormControl.webpackJsonp.../../../forms/@angular/forms.es5.js.FormControl.setValue
(forms.es5.js:2965)
at forms.es5.js:4367
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke
(zone.js:365)
at Object.onInvoke (core.es5.js:3890)
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke
(zone.js:364)
at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.run (zone.js:125)
at zone.js:758
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask
(zone.js:398)
at Object.onInvokeTask (core.es5.js:3881)
at Calendar.webpackJsonp.../../../../primeng/components/calendar/calendar.js.Calendar.formatDate
(calendar.js:649)
at Calendar.webpackJsonp.../../../../primeng/components/calendar/calendar.js.Calendar.updateInputfield
(calendar.js:252)
at Calendar.webpackJsonp.../../../../primeng/components/calendar/calendar.js.Calendar.writeValue
(calendar.js:595)
at forms.es5.js:1779
at forms.es5.js:2965
at Array.forEach ()
at FormControl.webpackJsonp.../../../forms/@angular/forms.es5.js.FormControl.setValue
(forms.es5.js:2965)
at forms.es5.js:4367
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke
(zone.js:365)
at Object.onInvoke (core.es5.js:3890)
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke
(zone.js:364)
at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.run (zone.js:125)
at zone.js:758
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask
(zone.js:398)
at Object.onInvokeTask (core.es5.js:3881)
at resolvePromise (zone.js:710) [angular]
at :4200/polyfills.bundle.js:7469:17 [angular]
at Object.onInvokeTask (core.es5.js:3881) [angular]
at drainMicroTaskQueue (zone.js:591) []
at XMLHttpRequest.ZoneTask.invoke (zone.js:464) []
TypeError: date.getMonth is not a function
=> 我认为您正在使用该函数从日期中获取月份。但日期无效或格式错误。这就是为什么你的格式功能不起作用。
根据我的想法,请先使用moment.js来包装您的日期。示例:
let selectedDate = moment(dateString);
如果你想得到月份,你只需使用:
let month = ("0"+(selectedEndDate.get("month")+1)).slice(-2);
您的日期格式对 p-calendar 无效。您可以使用并将其传递给日历:
this.currentDate = moment(new Date()).format('YYYY-MM-DD');
问题已解决,为帮助他人提供解决方案,只需将 selecteddata.dateIn
转换为 .toDate()
。
this.data.dateIn = this.selecteddata.dateIn.toDate();
我有一个日历控件,我想为它设置一些值,但我在下面的行中收到以下错误,而且值也没有设置。
this.data.dateIn = this.selecteddata.dateIn;
<p-calendar [(ngModel)]="data.dateIn" [showIcon]="true" name="dateInCalendar"
required #dateInCalendar="ngModel">
</p-calendar>
ERROR Error: Uncaught (in promise): TypeError: date.getMonth is not a function TypeError: date.getMonth is not a function at Calendar.webpackJsonp.../../../../primeng/components/calendar/calendar.js.Calendar.formatDate (calendar.js:649) at Calendar.webpackJsonp.../../../../primeng/components/calendar/calendar.js.Calendar.updateInputfield (calendar.js:252) at Calendar.webpackJsonp.../../../../primeng/components/calendar/calendar.js.Calendar.writeValue (calendar.js:595) at forms.es5.js:1779 at forms.es5.js:2965 at Array.forEach () at FormControl.webpackJsonp.../../../forms/@angular/forms.es5.js.FormControl.setValue (forms.es5.js:2965) at forms.es5.js:4367 at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:365) at Object.onInvoke (core.es5.js:3890) at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:364) at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.run (zone.js:125) at zone.js:758 at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:398) at Object.onInvokeTask (core.es5.js:3881) at Calendar.webpackJsonp.../../../../primeng/components/calendar/calendar.js.Calendar.formatDate (calendar.js:649) at Calendar.webpackJsonp.../../../../primeng/components/calendar/calendar.js.Calendar.updateInputfield (calendar.js:252) at Calendar.webpackJsonp.../../../../primeng/components/calendar/calendar.js.Calendar.writeValue (calendar.js:595) at forms.es5.js:1779 at forms.es5.js:2965 at Array.forEach () at FormControl.webpackJsonp.../../../forms/@angular/forms.es5.js.FormControl.setValue (forms.es5.js:2965) at forms.es5.js:4367 at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:365) at Object.onInvoke (core.es5.js:3890) at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:364) at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.run (zone.js:125) at zone.js:758 at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:398) at Object.onInvokeTask (core.es5.js:3881) at resolvePromise (zone.js:710) [angular] at :4200/polyfills.bundle.js:7469:17 [angular] at Object.onInvokeTask (core.es5.js:3881) [angular] at drainMicroTaskQueue (zone.js:591) [] at XMLHttpRequest.ZoneTask.invoke (zone.js:464) []
TypeError: date.getMonth is not a function
=> 我认为您正在使用该函数从日期中获取月份。但日期无效或格式错误。这就是为什么你的格式功能不起作用。
根据我的想法,请先使用moment.js来包装您的日期。示例:
let selectedDate = moment(dateString);
如果你想得到月份,你只需使用:
let month = ("0"+(selectedEndDate.get("month")+1)).slice(-2);
您的日期格式对 p-calendar 无效。您可以使用并将其传递给日历:
this.currentDate = moment(new Date()).format('YYYY-MM-DD');
问题已解决,为帮助他人提供解决方案,只需将 selecteddata.dateIn
转换为 .toDate()
。
this.data.dateIn = this.selecteddata.dateIn.toDate();