Completed
Last Updated: 11 May 2022 13:36 by ADMIN
Korstiaan
Created on: 08 Oct 2021 09:13
Category: DateTimePicker
Type: Bug Report
0
DateTimePicker not opening at the selected date when bound to a FormControl

Greetings,

A user told us our datetimepickers weren't opening their pop-ups at their selected values, they instead always open at today's date.
When you specify a focusedDate, which we never do, it does always open at that date's location, which is the intended behaviour afaik.
After creating a test app to track down the problem, it appears it has to do with the angular version.
The Stackblitz examples' package.json all use version 9.x.x, while we're currently using version 12.2.1.
We were using 11.2.0 before and it was broken there as well.
Downgrading everything to version 9 compatible packages indeed fixes the "error", but that's not something we're able to do.

Here's what our test app's package.json looks like:

{
"dependencies": {
    "@angular/animations": "12.2.1",
    "@angular/common": "12.2.1",
    "@angular/compiler": "12.2.1",
    "@angular/core": "12.2.1",
    "@angular/forms": "12.2.1",
    "@angular/platform-browser": "12.2.1",
    "@angular/platform-browser-dynamic": "12.2.1",
    "@angular/router": "12.2.1",
    "rxjs": "6.6.7",
    "tslib": "2.3.1",
    "zone.js": "0.11.4",
    "@progress/kendo-licensing": "1.2.0",
    "@progress/kendo-angular-dateinputs": "5.2.3",
    "@progress/kendo-angular-common": "2.0.1",
    "@progress/kendo-angular-l10n": "3.0.2",
    "@progress/kendo-angular-popup": "4.0.1",
    "@progress/kendo-angular-label": "3.1.0",
    "@progress/kendo-angular-intl": "3.1.1",
    "@progress/kendo-theme-default": "latest"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "12.2.3",
    "@angular/cli": "12.2.1",
    "@angular/compiler-cli": "12.2.1",
    "@angular/localize": "12.2.1",
    "@types/node": "^12.11.1",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "4.3.5"
  }
}

Our html file is as simple as the following:

<kendo-datetimepicker [formControl]="fc"></kendo-datetimepicker>

Steps to replicate:

  1. Click to open the datetimepicker
  2. Select a date (I always used 31 May 2021)
  3. Click to open the datetimepicker again
  4. It opens at today's date instead of at the selected value

Kind regards

4 comments
ADMIN
Svet
Posted on: 15 Mar 2022 13:20

Hi Korstiaan,

Thank you for the provided detailed feedback.

We will proceed with updating the issue. I have also updated your account Telerik points for the invested time in this research. Thank you.

Regards,
Svet
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Korstiaan
Posted on: 09 Mar 2022 09:39

Seeing how this issue still hasn't been fixed, I've went and tracked down the error myself.

Inside the datetimepicker.component.ts file, edit the following inside the template:

The [focusedDate] input has to be above the [(value)] input.
The CalendarComponent uses a setter for the focusedDate @Input field, which is triggered by both the [focusedDate] Input itself and it's manually called inside the [value] input setter function.
The value input setter function actually has to be the last one to call public set focusedDate(focusedDate:Date), otherwise the calendar will open at the focusedDate's value (or 'today' if no value) again. 

ADMIN
Svet
Posted on: 15 Oct 2021 06:24

Hi Korstiaan,

Thank you for pointing our attention to this issue.

I have logged it in our public GitHub repository for further action:

https://github.com/telerik/kendo-angular/issues/3470

I have also updated your account Telerik points for the feedback. Thank you.

Please accept our apologies for the caused inconvenience until the issue is resolved.

Regards,
Svet
Progress Telerik

Remote troubleshooting is now easier with Telerik Fiddler Jam. Get the full context to end-users' issues in just three steps! Start your trial here - https://www.telerik.com/fiddler-jam.
Korstiaan
Posted on: 08 Oct 2021 09:15
(In hindsight, binding it to a formcontrol has nothing to do with the problem since it also doesn't work if you bind it to a value, so the title's a bit badly chosen)