diff --git a/demo/src/app/locale/locale.component.html b/demo/src/app/locale/locale.component.html
index 2675f6cf..acf736bd 100644
--- a/demo/src/app/locale/locale.component.html
+++ b/demo/src/app/locale/locale.component.html
@@ -7,7 +7,10 @@
             [(ngModel)]="selected"
             class="form-control"
             placeholder="Choose date"
-            [locale]="{ locale, applyLabel: 'Ack' }" />
+            [showCustomRangeLabel]="true"
+            [ranges]="datesRanges"
+            [alwaysShowCalendars]="true"
+            [locale]="{ locale, applyLabel: 'Ack', displayFormat: 'YYYY MMM DD', separator: ' :: ' }" />
     </div>
-  
+
 </div>
diff --git a/demo/src/app/locale/locale.component.ts b/demo/src/app/locale/locale.component.ts
index d946c400..9463b7a2 100644
--- a/demo/src/app/locale/locale.component.ts
+++ b/demo/src/app/locale/locale.component.ts
@@ -13,8 +13,16 @@ dayjs.extend(utc);
 export class LocaleComponent implements OnInit {
   selected: { startDate: dayjs.Dayjs; endDate: dayjs.Dayjs };
   locale = fr;
-  constructor() {}
+  datesRanges: any = {
+    ['Today']: [dayjs(), dayjs()],
+    ['Yesterday']: [dayjs().subtract(1, 'days'), dayjs().subtract(1, 'days')],
+    ['Last 7 days']: [dayjs().subtract(6, 'days'), dayjs()],
+    ['Last 30 days']: [dayjs().subtract(29, 'days'), dayjs()],
+    ['This month']: [dayjs().startOf('month'), dayjs().endOf('month')],
+    ['Last month']: [dayjs().subtract(1, 'month').startOf('month'), dayjs().subtract(1, 'month').endOf('month')],
+  };
 
+  constructor() {}
 
   ngOnInit(): void {}
 }
diff --git a/src/daterangepicker/daterangepicker.component.ts b/src/daterangepicker/daterangepicker.component.ts
index ef06efbb..800d4ffa 100644
--- a/src/daterangepicker/daterangepicker.component.ts
+++ b/src/daterangepicker/daterangepicker.component.ts
@@ -324,8 +324,16 @@ export class DaterangepickerComponent implements OnInit, OnChanges {
 
   @Input() set locale(value: LocaleConfig) {
     this.localeHolder = { ...this.localeHolderService.config, ...value };
+
     if (value.locale) {
-      this.localeHolder = this.localeHolderService.configWithLocale(value.locale);
+      const tempValue = { ...value }; // make copy of value
+      // remove fields being applied from value.locale
+      delete tempValue.daysOfWeek;
+      delete tempValue.monthNames;
+      delete tempValue.firstDay;
+
+      // combine config with locale and customized LocaleConfig
+      this.localeHolder = { ...this.localeHolderService.configWithLocale(value.locale), ...tempValue };
     }
   }
 
@@ -844,7 +852,7 @@ export class DaterangepickerComponent implements OnInit, OnChanges {
         return;
       }
       if (this.startDate) {
-        // we want to stay on whatever months are in view if date range is set and both calendar sides have a month already.  e.g. when 
+        // we want to stay on whatever months are in view if date range is set and both calendar sides have a month already.  e.g. when
         // user clicks on the end date, we want to stay on current month in view
         if (this.leftCalendar.month && this.rightCalendar.month) {
           return;
@@ -897,11 +905,20 @@ export class DaterangepickerComponent implements OnInit, OnChanges {
         ) {
           this.chosenLabel = this.chosenRange;
         } else {
-          this.chosenLabel = this.startDate.format(format) + this.locale.separator + this.endDate.format(format);
+          const formattedStartDate = this.localeHolder.locale
+            ? this.startDate.locale(this.localeHolder.locale).format(format)
+            : this.startDate.format(format);
+          const formattedEndDate = this.localeHolder.locale
+            ? this.endDate.locale(this.localeHolder.locale).format(format)
+            : this.endDate.format(format);
+
+          this.chosenLabel = formattedStartDate + this.locale.separator + formattedEndDate;
         }
       }
     } else if (this.autoUpdateInput) {
-      this.chosenLabel = this.startDate.format(format);
+      this.chosenLabel = this.localeHolder.locale
+        ? this.startDate.locale(this.localeHolder.locale).format(format)
+        : this.startDate.format(format);
     }
   }