ngx-daterangepicker-material compability with angular 15 and with dayjs

Question

I have 2 issue in my angular project:

1- i updated my angular version from 13 to 15.2.1 and the new version of ngx-daterangepicker-material and now its breaking and this is error i'm getting: core.mjs:8453 ERROR TypeError: Cannot read properties of undefined (reading 'selectedHour') at DaterangepickerComponent_div_3_div_3_Template (ngx-daterangepicker-material.mjs:1116:8214)

so i had to downgrade it to avoid this error

2- im using dayjs with ngx-daterangepicker-material and when i'm importing dayjs from 'dayjs/esm' the minDate and maxDate arent working in the datepicker

I tried to add a dayjs.config file:

import dayjs from 'dayjs/esm';
import customParseFormat from 'dayjs/esm/plugin/customParseFormat';
import isoWeek from 'dayjs/esm/plugin/isoWeek';
import localeData from 'dayjs/esm/plugin/localeData';
import localizedFormat from 'dayjs/esm/plugin/localizedFormat';
import weekOfYear from 'dayjs/esm/plugin/weekOfYear';
import objectSupport from 'dayjs/esm/plugin/objectSupport';
import isBetween from 'dayjs/esm/plugin/isBetween';

dayjs.extend(customParseFormat);
dayjs.extend(isoWeek);
dayjs.extend(localeData);
dayjs.extend(localizedFormat);
dayjs.extend(weekOfYear);
dayjs.extend(objectSupport);
dayjs.extend(isBetween);

export default dayjs;

and imported dayjs from this file

i also tried adding a custom-webpack file where i added

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { AngularWebpackPlugin } = require('@ngtools/webpack');

const path = require('path');

module.exports = {
  entry: {
    main: './src/main.ts',
  },
  output: {
    globalObject: 'self',
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  resolve: {
    extensions: ['.ts', '.js'],
    alias: {
      dayjs: path.resolve(__dirname, 'node_modules/dayjs/esm'), // Add this line
    },
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        loader: '@ngtools/webpack',
      },
    ],
  },
  plugins: [
    new AngularWebpackPlugin({
      tsconfig: './tsconfig.app.json',
    }),
    new MiniCssExtractPlugin({
      filename: '[name].css',
    }),
  ],
};

i expect the ngx-datepicker to be compatible with dayjs even when im importing it using esm

ngx-daterangepicker-material compability with angular 15 and with dayjs

0 Answers0