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:
- Click to open the datetimepicker
- Select a date (I always used 31 May 2021)
- Click to open the datetimepicker again
- It opens at today's date instead of at the selected value
Kind regards
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.