Months for ru localisation not displayed

[tampambro]

Versions

• Angular version: 13.3.11
• component version: 6.0.4

Describe the bug When set Russian localisation, months names vanished.

To Reproduce For reproduce the bug, you can take your demo from demo/src/app/locale, and instead of France import Russian localisation.

Full code of locale.component.ts:

import { Component, OnInit, ViewChild } from '@angular/core';
import dayjs from 'dayjs/esm';
import utc from 'dayjs/esm/plugin/utc';
import * as fr from 'dayjs/locale/fr';
import * as ru from 'dayjs/locale/ru';
import { DaterangepickerDirective } from '../../../../src/daterangepicker';
dayjs.extend(utc);

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'locale',
  templateUrl: './locale.component.html'
})
export class LocaleComponent implements OnInit {
  selected: { startDate: dayjs.Dayjs; endDate: dayjs.Dayjs };
  locale = ru;
  constructor() {}

  ngOnInit(): void {}
}

Expected behavior In Russian localisation must be short and full names of months.

Screenshots

Additional context I did a little research on the problem and figured out the root cause.

That how looks file of Russian localization in Dayjs:

var monthFormat = 'января_февраля_марта_апреля_мая_июня_июля_августа_сентября_октября_ноября_декабря'.split('_');
var monthStandalone = 'январь_февраль_март_апрель_май_июнь_июль_август_сентябрь_октябрь_ноябрь_декабрь'.split('_');
var monthShortFormat = 'янв._февр._мар._апр._мая_июня_июля_авг._сент._окт._нояб._дек.'.split('_');
var monthShortStandalone = 'янв._февр._март_апр._май_июнь_июль_авг._сент._окт._нояб._дек.'.split('_');

<...>

var months = function months(dayjsInstance, format) {
  if (MONTHS_IN_FORMAT.test(format)) {
    return monthFormat[dayjsInstance.month()];
  }

  return monthStandalone[dayjsInstance.month()];
};

months.s = monthStandalone;
months.f = monthFormat;

var monthsShort = function monthsShort(dayjsInstance, format) {
  if (MONTHS_IN_FORMAT.test(format)) {
    return monthShortFormat[dayjsInstance.month()];
  }

  return monthShortStandalone[dayjsInstance.month()];
};

monthsShort.s = monthShortStandalone;
monthsShort.f = monthShortFormat;
var locale = {
  name: 'ru',
  weekdays: 'воскресенье_понедельник_вторник_среда_четверг_пятница_суббота'.split('_'),
  weekdaysShort: 'вск_пнд_втр_срд_чтв_птн_сбт'.split('_'),
  weekdaysMin: 'вс_пн_вт_ср_чт_пт_сб'.split('_'),
  months: months,
  monthsShort: monthsShort,
<...>

Let's take a similar French localization file for comparison:

var locale = {
  name: 'fr',
  weekdays: 'dimanche_lundi_mardi_mercredi_jeudi_vendredi_samedi'.split('_'),
  weekdaysShort: 'dim._lun._mar._mer._jeu._ven._sam.'.split('_'),
  weekdaysMin: 'di_lu_ma_me_je_ve_sa'.split('_'),
  months: 'janvier_février_mars_avril_mai_juin_juillet_août_septembre_octobre_novembre_décembre'.split('_'),
  monthsShort: 'janv._févr._mars_avr._mai_juin_juil._août_sept._oct._nov._déc.'.split('_'),

<...>

How can see, in Russian file in months and monthsShort properties contains functions not arrays. This functions have tow static properties -- s where saved months in the nominative case and f for months in the accusative case.

Let's see how daterangepicker.component.html handle months names:

<ng-container *ngIf="!showDropdowns || !calendarVariables.right.dropdowns">
    {{ this.locale.monthNames[calendarVariables?.right?.calendar[1][1].month()] }}
    {{ calendarVariables?.right?.calendar[1][1].format(' YYYY') }}
</ng-container>

In Russian localisation this.locale.monthNames contains function, not array, that's why it return undefined, and instead of month name will be nothing.

[armved]

Can confirm this issue