[Angular] [Date Picker]

Topic: [Angular] [Date Picker]

maury844 free asked 6 years ago

Hi again,

I've been trying to use Date Picker but this error keeps coming up, it points to the datepickerUtil.service.ts.

ERROR TypeError: Cannot read property 'length' of undefined
 at UtilService.isDisabledDay (datepickerUtil.service.ts:132)
 at MDBDatePickerComponent.isTodayDisabled (datepicker.component.ts:290)
 at MDBDatePickerComponent.parseOptions (datepicker.component.ts:304)
 at MDBDatePickerComponent.ngOnChanges (datepicker.component.ts:355)

I have added the myDatepickerOptions to the component.ts as well.

Add comment

Damian Gemza staff answered 5 years ago

0 0 Best answer

Dear IRoman, Could you please provide me the full description of your problem? What's exactly wrong in your application? Please provide me with the version of MDB Angular which you're using, and information what's wrong exactly. Best Regards, Damian

Add comment

IRoman pro answered 5 years ago

0 0 Best answer

Please insert min. 20 characters.

I have almost all parameters deleted, only that left. Now works: public myDatePickerOptions: IMyOptions = { // Strings and translations dayLabels: {su: 'Sun', mo: 'Mon', tu: 'Tue', we: 'Wed', th: 'Thu', fr: 'Fri', sa: 'Sat'}, dayLabelsFull: {su: "Sunday", mo: "Monday", tu: "Tuesday", we: "Wednesday", th: "Thursday", fr: "Friday", sa: "Saturday"}, monthLabels: { 1: 'Jan', 2: 'Feb', 3: 'Mar', 4: 'Apr', 5: 'May', 6: 'Jun', 7: 'Jul', 8: 'Aug', 9: 'Sep', 10: 'Oct', 11: 'Nov', 12: 'Dec' }, monthLabelsFull: { 1: "January", 2: "February", 3: "March", 4: "April", 5: "May", 6: "June", 7: "July", 8: "August", 9: "September", 10: "October", 11: "November", 12: "December" }, };

Add comment

IRoman pro answered 5 years ago

0 0 Best answer

Please insert min. 20 characters.

Hello Damian, I have a same problem. I do as in tutorial stands. I can see datepikcer, only the data is not shown and I get the errors: ERROR TypeError: Cannot read property 'length' of undefined at UtilService.push../node_modules/ng-uikit-pro-standard/esm5/ng-uikit-pro-standard.es5.js.UtilService.isDisabledDay (ng-uikit-pro-standard.es5.js:3762) at MDBDatePickerComponent.push../node_modules/ng-uikit-pro-standard/esm5/ng-uikit-pro-standard.es5.js.MDBDatePickerComponent.isTodayDisabled (ng-uikit-pro-standard.es5.js:4204)

Add comment

maury844 free answered 6 years ago

0 0 Best answer

<p>Well I'm using the dateTime picker in a form, where I want the user to pass in a Date, I have taken away all the unnecesary code from the snippet below.</p>
<pre></pre>
<p><a (click)="optionalFields.toggle()" style="font-size: 22px;"> Optional Fields</a><br />
<div id='optional-fields' [mdbCollapse]="!isRequiredShown" #optionalFields="bs-collapse" aria-expanded="false" class="in"<br />
(showBsCollapse)="showOptionalFields()" (hideBsCollapse)="hideOptionalFields()"></p>
<p><div class="md-form form-sm"><br />
<mdb-date-picker name="mydate" [options]="myDatePickerOptions" [placeholder]="'Waiver Expiry Date'" [formControl]="createForm.controls['waiverExpiry']" required></mdb-date-picker></p>
<p></div><br />
</div></p>
<p> </p>
<p>Then in the component.ts I have added the dateTimePickerOptions you guys provide in the tutorial (the default ones), and basically that's it, whenever I try clicking on the datetimePicker, I get that exception I pointed out, and the 'body' of the picker appears with no labels, no numbers and anything, just the 'modal' window.</p>
<p>Best Regards</p>

Please insert min. 20 characters.

Well I'm using the dateTime picker in a form, where I want the user to pass in a Date, I have taken away all the unnecesary code from the snippet below.

<a (click)="optionalFields.toggle()" style="font-size: 22px;"> Optional Fields</a>
<div id='optional-fields' [mdbCollapse]="!isRequiredShown" #optionalFields="bs-collapse" aria-expanded="false" class="in"
(showBsCollapse)="showOptionalFields()" (hideBsCollapse)="hideOptionalFields()">

</div>
</div>

Then in the component.ts I have added the dateTimePickerOptions you guys provide in the tutorial (the default ones), and basically that's it, whenever I try clicking on the datetimePicker, I get that exception I pointed out, and the 'body' of the picker appears with no labels, no numbers and anything, just the 'modal' window.

Best Regards

Damian Gemza staff commented 6 years ago

Dear Maury, from your code I'm unable to reproduce your case because I can't test it on my computer. Could you provide me fully, working example ready to copy and test by me? It would help me to debug the problem. Or if there's a possibility, send me your project at d.gemza@mdbootstrap.com Best Regards, Damian

Add comment

Damian Gemza staff answered 6 years ago

0 0 Best answer

Dear Maury844, could you please provide me code which you're using for datePicker in your project? Best Regards, Damian

maury844 free commented 6 years ago

I'm using the code found in the example for Angular MDB, basic one, also with the myDatepickerConfig object you provide to use the default settings. <a href="https://mdbootstrap.com/angular/advanced/datepicker/" rel="nofollow">https://mdbootstrap.com/angular/advanced/datepicker/</a>

Damian Gemza staff commented 6 years ago

Please show me your code in new post. It's quite strange error and I want to check, in which way you're using our datePicker. I've tried to reproduce your error, but without any success. Best Regards, Damian

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

ForumUser: Free
Premium support: No
Technology: MDB Angular
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

maury844

10Support score
2Questions 1Answers 0Snippets