add locale demo

Author: fetrarij

Diff for: demo/src/app/app.component.html

@@ -9,6 +9,7 @@
     <div class="nav-wrapper container">
         <ul class="left hide-on-small-only">
             <li routerLinkActive="active"><a [routerLink]="['simple']">Simple</a></li>
+            <li routerLinkActive="active"><a [routerLink]="['locale']">Locale</a></li>
             <li routerLinkActive="active"><a [routerLink]="['single-datepicker']">Single datepicker (fr)</a></li>
             <li routerLinkActive="active"><a [routerLink]="['reactive-forms']">Reactive forms</a></li>
             <li routerLinkActive="active"><a [routerLink]="['with-timepicker']">With timepicker</a></li>

Diff for: demo/src/app/app.module.ts

@@ -21,11 +21,13 @@ import { CustomRangesComponent } from './custom-ranges/custom-ranges.component';
 import { TimepickerComponent } from './timepicker/timepicker.component';
 import { ReactiveFormComponent } from './reactive-form/reactive-form.component';
 import { MatOptionModule } from '@angular/material/core';
+import { LocaleComponent } from './locale/locale.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     SimpleComponent,
+    LocaleComponent,
     FullComponent,
     SingleDatepickerComponent,
     CustomRangesComponent,

Diff for: demo/src/app/app.routing.ts

@@ -5,6 +5,7 @@ import { CustomRangesComponent } from './custom-ranges/custom-ranges.component';
 import { SingleDatepickerComponent } from './single-datepicker/single-datepicker.component';
 import { TimepickerComponent } from './timepicker/timepicker.component';
 import { ReactiveFormComponent } from './reactive-form/reactive-form.component';
+import { LocaleComponent } from './locale/locale.component';
 
 export const appRoutes: Routes = [
   {
@@ -16,6 +17,10 @@ export const appRoutes: Routes = [
     path: 'simple',
     component: SimpleComponent
   },
+  {
+    path: 'locale',
+    component: LocaleComponent
+  },
   {
     path: 'single-datepicker',
     component: SingleDatepickerComponent

Diff for: demo/src/app/locale/locale.component.html

@@ -0,0 +1,18 @@
+<mat-toolbar>Locale daterangepicker</mat-toolbar>
+<div class="row">
+    <div class="col s6">
+        <input
+            type="text"
+            ngxDaterangepickerMd
+            [(ngModel)]="selected"
+            class="form-control"
+            placeholder="Choose date"
+            [locale]="{ locale, applyLabel: 'Ack' }" />
+    </div>
+    <div class="col s6 right-align">
+        <select>
+            <option value="fr">French</option>
+            <option value="en">English</option>
+        </select>
+    </div>
+</div>

Diff for: demo/src/app/locale/locale.component.ts

@@ -0,0 +1,19 @@
+import * as fr from 'dayjs/locale/fr'
+import { Component, OnInit, ViewChild } from '@angular/core';
+import dayjs from 'dayjs/esm';
+dayjs.locale(fr);
+import utc from 'dayjs/esm/plugin/utc';
+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 = fr;
+  constructor() {}
+
+  ngOnInit(): void {}
+}