feat(datepicker): bsConfig, colors, localization

demo/src/app/components/+datepicker/datepicker-section.component.ts

@@ -7,57 +7,66 @@ let titleDoc = require('html-loader!markdown-loader!./docs/title.md');
 @Component({
   selector: 'datepicker-section',
   template: `
-<demo-section [name]="name" [src]="src">
-<p>Datepicker is a highly configurable component that adds datepicker functionality to your pages. You can customize the date format and language, restrict the selectable date ranges.</p>
+    <demo-section [name]="name" [src]="src">
+      <p>Datepicker is a highly configurable component that adds datepicker functionality to your pages. You can
+        customize the date format and language, restrict the selectable date ranges.</p>
 
-  <h2>Contents</h2>
-  <ul>
-    <li><a routerLink="." fragment="usage">Usage</a></li>
-    <li><a routerLink="." fragment="examples">Examples</a>
+      <h2>Contents</h2>
       <ul>
-        <!--<li><a routerLink="." fragment="link-color">Link color</a></li>-->
+        <li><a routerLink="." fragment="usage">Usage</a></li>
+        <li><a routerLink="." fragment="examples">Examples</a>
+          <ul>
+            <!--<li><a routerLink="." fragment="link-color">Link color</a></li>-->
+          </ul>
+        </li>
+        <li><a routerLink="." fragment="api-reference">API Reference</a>
+          <ul>
+            <li><a routerLink="." fragment="datepicker-component">DatePickerComponent</a></li>
+          </ul>
+        </li>
       </ul>
-    </li>
-    <li><a routerLink="." fragment="api-reference">API Reference</a>
-      <ul>
-        <li><a routerLink="." fragment="datepicker-component">DatePickerComponent</a></li>
-      </ul>
-    </li>
-  </ul>   
+
+      <h2 routerLink="." fragment="usage" id="usage">Usage</h2>
+
+      <p [innerHtml]="titleDoc"></p>
+
+      <h2 routerLink="." fragment="examples" id="examples">Examples</h2>
+
+      <ng-sample-box [ts]="demos.pop.component" [html]="demos.pop.html">
+        <p><code>BsDatepickerModule</code> is activily developed but you can use it already</p>
+        <p>Notebale change is additional css for it <code> "/datepicker/bs-datepicker.css"</code></p>
+        <p>In nearest time will be added:</p>
+        <ul>
+          <li><s>1. Month and year selection</s></li>
+          <li><s>2. Min/max dates restrcitions</s></li>
+          <li><s>3. Color theming</s></li>
+          <li>4. Options to replace any part of template</li>
+          <li><s>5. Configuration</s></li>
+          <li>6. Integration with forms, only for input fields</li>
+          <li>etc.</li>
+        </ul>
+        <demo-date-picker-popup></demo-date-picker-popup>
+      </ng-sample-box>
+
+      <ng-sample-box [ts]="demos.colorTheming.component" [html]="demos.colorTheming.html">
+        <demo-datepicker-color-theming></demo-datepicker-color-theming>
+      </ng-sample-box>
 
-  <h2 routerLink="." fragment="usage" id="usage">Usage</h2>
-
-  <p [innerHtml]="titleDoc"></p>
-
-  <h2 routerLink="." fragment="examples" id="examples">Examples</h2>
-
-  <ng-sample-box [ts]="demos.pop.component" [html]="demos.pop.html">
-    <p><code>BsDatepickerModule</code> is activily developed but you can use it already</p>
-    <p>Notebale change is additional css for it <code> "/datepicker/bs-datepicker.css"</code></p>
-    <p>In nearest time will be added:</p>
-    <ul>
-      <li><s>1. Month and year selection</s></li>
-      <li><s>2. Min/max dates restrcitions</s></li>
-      <li>3. Theming - this will be a small breaking change</li>
-      <li>4. Options to replace any part of template</li>
-      <li><s>5. Configuration</s></li>
-      <li>6. Integration with forms, only for input fields</li>
-      <li>etc.</li>
-    </ul>
-    <demo-date-picker-popup></demo-date-picker-popup>
-  </ng-sample-box>
-
-  <ng-sample-box [ts]="demos.old.component" [html]="demos.old.html">
-    <datepicker-demo></datepicker-demo>
-  </ng-sample-box>
-
-  <h2 routerLink="." fragment="api-reference" id="api-reference">API Reference</h2>
-  <ng-api-doc id="datepicker-component" directive="DatePickerComponent"></ng-api-doc>
-</demo-section>`
+      <ng-sample-box [ts]="demos.changeLocale.component" [html]="demos.changeLocale.html">
+        <demo-datepicker-change-locale></demo-datepicker-change-locale>
+      </ng-sample-box>
+
+      <ng-sample-box [ts]="demos.old.component" [html]="demos.old.html">
+        <datepicker-demo></datepicker-demo>
+      </ng-sample-box>
+
+      <h2 routerLink="." fragment="api-reference" id="api-reference">API Reference</h2>
+      <ng-api-doc id="datepicker-component" directive="DatePickerComponent"></ng-api-doc>
+    </demo-section>`
 })
 export class DatepickerSectionComponent {
-  public name:string = 'Datepicker';
-  public src:string = 'https://github.com/valor-software/ngx-bootstrap/tree/development/src/datepicker';
+  public name: string = 'Datepicker';
+  public src: string = 'https://github.com/valor-software/ngx-bootstrap/tree/development/src/datepicker';
   public demos: any = DEMOS;
-  public titleDoc:string = titleDoc;
+  public titleDoc: string = titleDoc;
 }

demo/src/app/components/+datepicker/demo-datepicker.module.ts

@@ -8,15 +8,24 @@ import { SharedModule } from '../../shared';
 import { DatepickerSectionComponent } from './datepicker-section.component';
 import { DEMO_COMPONENTS } from './demos';
 import { routes } from './demo-datepicker.routes';
-import { DemoDatePickerPopupComponent } from './demos/bs-popup/date-picker-popup';
+
+import { defineLocale, getSetGlobalLocale } from 'ngx-bootstrap/bs-moment';
+import {
+  ar, de, enGb, es, esDo, esUs, fr, hi, it, ja, ko, nl, nlBe, pl, ptBr, ru, zhCn
+} from 'ngx-bootstrap/locale';
+
+const locales = [ar, de, enGb, es, esDo, esUs, fr, hi, it, ja, ko, nl, nlBe, pl, ptBr, ru, zhCn];
+
+locales.forEach(locale => defineLocale(locale.abbr, locale));
+
+getSetGlobalLocale('en');
 
 @NgModule({
-  declarations:[
-    DemoDatePickerPopupComponent,
+  declarations: [
     DatepickerSectionComponent,
     ...DEMO_COMPONENTS
   ],
-  imports:[
+  imports: [
     DatepickerModule.forRoot(),
     BsDatepickerModule.forRoot(),
     CommonModule,

demo/src/app/components/+datepicker/demos/change-locale/change-locale.html

@@ -0,0 +1,33 @@
+<div class="row">
+  <div class="col-xs-6 col-sm-3">
+    <select
+      class="custom-select form-control "
+      [(ngModel)]="locale" (ngModelChange)="applyLocale(dp);">
+      <option *ngFor="let loc of locales" [value]="loc">{{ loc }}</option>
+    </select>
+  </div>
+  <input type="button"
+         class="btn btn-success"
+         value="Date Picker"
+         bsDatepicker
+         #dp="bsDatepicker"
+         [bsConfig]="bsConfig"/>
+</div>
+<br>
+
+<div class="row">
+  <div class="col-xs-6 col-sm-3">
+    <select
+      class="custom-select form-control "
+      [(ngModel)]="locale" (ngModelChange)="applyLocale(dpr);">
+      <option *ngFor="let loc of locales" [value]="loc">{{ loc }}</option>
+    </select>
+  </div>
+  <input type="button"
+         class="btn btn-success"
+         value="Date Range Picker"
+         bsDaterangepicker
+         #dpr="bsDaterangepicker"
+         [bsConfig]="bsConfig"/>
+</div>
+

demo/src/app/components/+datepicker/demos/change-locale/change-locale.ts

@@ -0,0 +1,23 @@
+import { Component } from '@angular/core';
+import { BsDatepickerConfig } from 'ngx-bootstrap/datepicker';
+import { listLocales } from 'ngx-bootstrap/bs-moment';
+
+@Component({
+  selector: 'demo-datepicker-change-locale',
+  templateUrl: './change-locale.html'
+})
+export class DemoDatepickerChangeLocaleComponent {
+  locale = 'en';
+  locales = listLocales();
+  bsConfig: Partial<BsDatepickerConfig>;
+
+  applyLocale(pop: any) {
+    // create new object on each property change
+    // so Angular can catch object reference change
+    this.bsConfig = Object.assign({}, {locale: this.locale});
+    setTimeout(() => {
+      pop.hide();
+      pop.show();
+    });
+  }
+}

demo/src/app/components/+datepicker/demos/color-theming/color-theming.html

@@ -0,0 +1,47 @@
+<div class="row">
+  <div class="col-xs-6 col-sm-3">
+    <select
+      class="custom-select form-control "
+      [(ngModel)]="colorTheme" (ngModelChange)="applyTheme(dp);">
+      <option value="theme-default">default</option>
+      <option value="theme-green">green</option>
+      <option value="theme-blue">blue</option>
+      <option value="theme-dark-blue">dark-blue</option>
+      <option value="theme-red">red</option>
+      <option value="theme-orange">orange</option>
+    </select>
+  </div>
+  <div class="col-xs-6 col-sm-9">
+    <input type="button"
+           class="btn btn-success"
+           value="Date Picker"
+           bsDatepicker
+           #dp="bsDatepicker"
+           [bsConfig]="bsConfig"/>
+  </div>
+</div>
+<br>
+
+<div class="row">
+  <div class="col-xs-6 col-sm-3">
+    <select
+      class="custom-select form-control "
+      [(ngModel)]="colorTheme" (ngModelChange)="applyTheme(dpr);">
+      <option value="theme-default">default</option>
+      <option value="theme-green">green</option>
+      <option value="theme-blue">blue</option>
+      <option value="theme-dark-blue">dark-blue</option>
+      <option value="theme-red">red</option>
+      <option value="theme-orange">orange</option>
+    </select>
+  </div>
+  <div class="col-xs-6 col-sm-9">
+    <input type="button"
+           class="btn btn-success"
+           value="Date Range Picker"
+           bsDaterangepicker
+           #dpr="bsDaterangepicker"
+           [bsConfig]="bsConfig"/>
+  </div>
+</div>
+

demo/src/app/components/+datepicker/demos/color-theming/color-theming.ts

@@ -0,0 +1,21 @@
+import { Component } from '@angular/core';
+import { BsDatepickerConfig } from 'ngx-bootstrap/datepicker';
+
+@Component({
+  selector: 'demo-datepicker-color-theming',
+  templateUrl: './color-theming.html'
+})
+export class DemoDatepickerColorThemingComponent {
+  colorTheme = 'theme-green';
+
+  bsConfig: Partial<BsDatepickerConfig>;
+
+  applyTheme(pop: any) {
+    // create new object on each property change
+    // so Angular can catch object reference change
+    this.bsConfig = Object.assign({}, {containerClass: this.colorTheme});
+    setTimeout(() => {
+      pop.show();
+    });
+  }
+}

demo/src/app/components/+datepicker/demos/index.ts

@@ -1,7 +1,13 @@
 import { DatepickerDemoComponent } from './datepicker-demo.component';
+import { DemoDatePickerPopupComponent } from './bs-popup/date-picker-popup';
+import { DemoDatepickerColorThemingComponent } from './color-theming/color-theming';
+import { DemoDatepickerChangeLocaleComponent } from './change-locale/change-locale';
 
 export const DEMO_COMPONENTS = [
-  DatepickerDemoComponent
+  DatepickerDemoComponent,
+  DemoDatePickerPopupComponent,
+  DemoDatepickerColorThemingComponent,
+  DemoDatepickerChangeLocaleComponent
 ];
 
 export const DEMOS = {
@@ -12,5 +18,13 @@ export const DEMOS = {
   pop: {
     component: require('!!raw-loader?lang=typescript!./bs-popup/date-picker-popup.ts'),
     html: require('!!raw-loader?lang=markup!./bs-popup/date-picker-popup.html')
+  },
+  colorTheming: {
+    component: require('!!raw-loader?lang=typescript!./color-theming/color-theming.ts'),
+    html: require('!!raw-loader?lang=markup!./color-theming/color-theming.html')
+  },
+  changeLocale: {
+    component: require('!!raw-loader?lang=typescript!./change-locale/change-locale.ts'),
+    html: require('!!raw-loader?lang=markup!./change-locale/change-locale.html')
   }
 };

src/bs-moment/format.ts

@@ -13,7 +13,11 @@ import { isDateValid } from './utils/type-checks';
 
 export function formatDate(date: Date, format: string, locale = 'en'): string {
   const _locale = getLocale(locale);
+  if (!_locale) {
+    throw new Error(`Locale "${locale}" is not defined, please add it with "defineLocale(...)"`);
+  }
   const output = formatMoment(date, format, _locale);
+
   return _locale.postformat(output);
 }
 

src/bs-moment/i18n/de.ts

@@ -0,0 +1,72 @@
+// moment.js locale configuration
+// locale : German [de]
+// author : lluchs : https://github.com/lluchs
+// author: Menelion Elensúle: https://github.com/Oire
+// author : Mikolaj Dadela : https://github.com/mik01aj
+
+import { LocaleData } from '../locale/locale.class';
+
+function processRelativeTime(num: number, withoutSuffix: boolean, key: string, isFuture: boolean): string {
+  const str = num.toString();
+
+  const format: any = {
+    m: ['eine Minute', 'einer Minute'],
+    h: ['eine Stunde', 'einer Stunde'],
+    d: ['ein Tag', 'einem Tag'],
+    dd: [`${str} Tage`, `${str} Tagen`],
+    M: ['ein Monat', 'einem Monat'],
+    MM: [`${str} Monate`, `${str} Monaten`],
+    y: ['ein Jahr', 'einem Jahr'],
+    yy: [`${str} Jahre`, `${str} Jahren`]
+  };
+
+  return withoutSuffix ? format[key][0] : format[key][1];
+}
+
+export const de: LocaleData = {
+  abbr: 'de',
+  months: 'Januar_Februar_März_April_Mai_Juni_Juli_August_September_Oktober_November_Dezember'.split('_'),
+  monthsShort: 'Jan._Feb._März_Apr._Mai_Juni_Juli_Aug._Sep._Okt._Nov._Dez.'.split('_'),
+  monthsParseExact: true,
+  weekdays: 'Sonntag_Montag_Dienstag_Mittwoch_Donnerstag_Freitag_Samstag'.split('_'),
+  weekdaysShort: 'So._Mo._Di._Mi._Do._Fr._Sa.'.split('_'),
+  weekdaysMin: 'So_Mo_Di_Mi_Do_Fr_Sa'.split('_'),
+  weekdaysParseExact: true,
+  longDateFormat: {
+    LT: 'HH:mm',
+    LTS: 'HH:mm:ss',
+    L: 'DD.MM.YYYY',
+    LL: 'D. MMMM YYYY',
+    LLL: 'D. MMMM YYYY HH:mm',
+    LLLL: 'dddd, D. MMMM YYYY HH:mm'
+  },
+  calendar: {
+    sameDay: '[heute um] LT [Uhr]',
+    sameElse: 'L',
+    nextDay: '[morgen um] LT [Uhr]',
+    nextWeek: 'dddd [um] LT [Uhr]',
+    lastDay: '[gestern um] LT [Uhr]',
+    lastWeek: '[letzten] dddd [um] LT [Uhr]'
+  },
+  relativeTime: {
+    future: 'in %s',
+    past: 'vor %s',
+    s: 'ein paar Sekunden',
+    m: processRelativeTime,
+    mm: '%d Minuten',
+    h: processRelativeTime,
+    hh: '%d Stunden',
+    d: processRelativeTime,
+    dd: processRelativeTime,
+    M: processRelativeTime,
+    MM: processRelativeTime,
+    y: processRelativeTime,
+    yy: processRelativeTime
+  },
+  dayOfMonthOrdinalParse: /\d{1,2}\./,
+  ordinal(num: number, token?: string): string { return `${num}.`; },
+  week: {
+    dow: 1, // Monday is the first day of the week.
+    doy: 4  // The week that contains Jan 4th is the first week of the year.
+  }
+};