angularngx-daterangepicker-material

Error with ngxdaterangepickermd after Upgrade angular app from 15 to 16

I'm using ngxdaterangepickermd in my Angular project to implement a date range picker. However, when I attempt to use it, I encounter the following error on console:

TypeError: calendar[row][col].isoWeekday is not a function

and also

typeerror: calendar[row][col].weekday is not a function

I searched and can not find any solution for this. Do I over/under upgrade any dependencies

My package.json

"@angular-devkit/architect": "^0.1602.16",
"@angular-devkit/core": "^16.2.16",
"@angular/animations": "^16.2.12",
"@angular/cdk": "^16.2.14",
"@angular/common": "^16.2.12",
"@angular/compiler": "^16.2.12",
"@angular/core": "^16.2.12",
"@angular/forms": "^16.2.12",
"@angular/localize": "^16.2.12",
"@angular/material": "^16.2.14",
"@angular/platform-browser": "^16.2.12",
"@angular/platform-browser-dynamic": "^16.2.12",
"@angular/platform-server": "^16.2.12",
"@angular/pwa": "^0.800.1",
"@angular/router": "^16.2.12",
"@angular/service-worker": "^16.2.12",
"@kolkov/angular-editor": "^3.0.0-beta.0",
"@microsoft/signalr": "^8.0.7",
"@ng-bootstrap/ng-bootstrap": "^15.1.2",
"@ng-select/ng-select": "^11.2.0",
"@ngrx/effects": "^16.3.0",
"@ngrx/router-store": "^16.3.0",
"@ngrx/store": "^16.3.0",
"@ngrx/store-devtools": "^16.3.0",
"@types/jquery": "^3.5.32",
"acorn": "^6.1.1",
"angular-froala-wysiwyg": "^4.3.0",
"angular-oauth2-oidc": "^16.0.0",
"bootstrap": "^4.3.1",
"browserify-shim": "^3.8.14",
"core-js": "^3.1.3",
"crypto-js": "^4.2.0",
"exceljs": "^4.4.0",
"file-saver": "^2.0.0",
"font-awesome": "^4.7.0",
"i18n": "^0.8.3",
"jquery": "^3.7.1",
"jsencrypt": "^3.2.0",
"lodash": "^4.17.20",
"lodash-es": "^4.17.21",
"minimatch": "^3.0.4",
"moment": "^2.29.4",
"ngx-bootstrap": "^11.0.2",
"ngx-cookie-service": "^16.1.0",
"ngx-currency": "^4.0.0",
"ngx-daterangepicker-material": "^6.0.4",
"ngx-mask": "^16.4.2",
"ngx-progressbar": "^11.1.0",
"ngx-scrollbar": "^13.0.3",
"ngx-spinner": "^16.0.2",
"ngx-toastr": "^16.2.0",
"rxjs": "^7.8.1",
"sass": "^1.81.0",
"save": "^2.3.3",
"tslib": "^2.8.1",
"typescript-string-operations": "^1.3.1",
"validator": "^13.9.0",
"webpack": "^5.7.0",
"zone.js": "~0.13.3"   },   "devDependencies": {
"@angular-devkit/build-angular": "^16.2.16",
"@angular/cli": "^16.2.16",
"@angular/compiler-cli": "^16.2.12",
"@angular/language-service": "^16.2.12",
"@babel/cli": "^7.2.3",
"@babel/preset-env": "^7.4.2",
"@types/crypto-js": "^3.1.43",
"@types/exceljs": "^0.5.3",
"@types/file-saver": "^2.0.0",
"@types/jasmine": "~3.6.0",
"@types/jasminewd2": "^2.0.13",
"@types/lodash": "4.14.182",
"@types/lodash-es": "^4.17.7",
"@types/node": "^12.20.55",
"@types/validator": "^9.4.3",
"babel-plugin-lodash": "^3.3.4",
"codelyzer": "^6.0.0",
"jasmine-core": "3.99",
"jasmine-spec-reporter": "~5.0.0",
"karma": "^6.4.2",
"karma-chrome-launcher": "~3.1.0",
"karma-cli": "^2.0.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "^4.0.2",
"karma-jasmine-html-reporter": "^1.7.0",
"ng-packagr": "^16.2.3",
"protractor": "^7.0.0",
"source-map-explorer": "^2.5.3",
"ts-node": "~7.0.0",
"tslint": "^6.1.3",
"typescript": "4.9.5",
"webpack-bundle-analyzer": "^4.10.2"   }

enter image description here

Has anyone encountered this issue with ngxdaterangepickermd? Could this be related to the library’s use of a specific version of a dependency (e.g., moment.js)? Any tips on how to resolve or debug this further?

Solution

  • I found out that I need to reformat my datetime value to dayjs to work.

    ranges: any = {
    "Today": [dayjs().utc().startOf('day'), dayjs().utc().endOf('day')],
    "Yesterday": [dayjs().utc().subtract(1, 'day').startOf('day'), dayjs().utc().subtract(1, 'day').endOf('day')],
    "Last 7 Days": [dayjs().utc().subtract(6, 'day').startOf('day'), dayjs().utc().endOf('day')],
    "Last 30 Days": [dayjs().utc().subtract(29, 'day').startOf('day'), dayjs().utc().endOf('day')],
    "This Month": [dayjs().utc().startOf('month'), dayjs().utc().endOf('month')],
    "Last Month": [
        dayjs().utc().subtract(1, 'month').startOf('month'),
        dayjs().utc().subtract(1, 'month').endOf('month'),
    ],
    "Next Month": [
        dayjs().utc().add(1, 'month').startOf('month'),
        dayjs().utc().add(1, 'month').endOf('month'),
    ],
};

    any minDate or maxDate that you config to ngxDaterangepickerMd also need to be in daysformat like this this.createDateJs(this.yourMinDateData).hour(0).minute(0).second(0);