Skip to content

Commit

Permalink
Merge pull request #2562 from valor-software/feat-datepicker-forms
Browse files Browse the repository at this point in the history 
feat(datepicker): added forms support
  • Loading branch information
@valorkin
valorkin authored Sep 7, 2017
2 parents 33198c6 + 0f74e3f commit 363bb22
Show file tree
Hide file tree
Showing 38 changed files with 1,020 additions and 245 deletions.
172 changes: 126 additions & 46 deletions demo/src/app/components/+datepicker/datepicker-section.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,71 +2,151 @@
import { Component } from '@angular/core';
import { DEMOS } from './demos';
// webpack html imports
let oldTitleDoc = require('html-loader!markdown-loader!./docs/titleOld.md');
let titleDoc = require('html-loader!markdown-loader!./docs/title.md');

@Component({
selector: 'datepicker-section',
template: `
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>
<h2>Contents</h2>
<ul>
<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>
<tabset>
<tab heading="Overview">
<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="datepicker-component">DatePickerComponent</a></li>
<li><a routerLink="." fragment="usage">Usage</a></li>
<li><a routerLink="." fragment="examples">Examples</a>
<ul>
<li><a routerLink="." fragment="basic">Basic</a></li>
<li><a routerLink="." fragment="themes">Themes</a></li>
<li><a routerLink="." fragment="locales">Locales</a></li>
<li><a routerLink="." fragment="min-max">Min-max</a></li>
<li><a routerLink="." fragment="disabled">Disabled</a></li>
<li><a routerLink="." fragment="forms">Forms</a></li>
<li><a routerLink="." fragment="reactive">Reactive forms</a></li>
</ul>
</li>
<li><a routerLink="." fragment="api-reference">API Reference</a>
<ul>
<li><a routerLink="." fragment="bs-datepicker-component">BsDatepickerComponent</a></li>
<li><a routerLink="." fragment="bs-daterangepicker-component">BsDaterangepickerComponent</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<h2 routerLink="." fragment="usage" id="usage">Usage</h2>
<h2 routerLink="." fragment="usage" id="usage">Usage</h2>
<p [innerHtml]="titleDoc"></p>
<h2 routerLink="." fragment="examples" id="examples">Examples</h2>
<h3 routerLink="." fragment="basic" id="basic">Basic</h3>
<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> <br></p>
<p>There are two ways of adding css:</p>
<ul>
<li>Load it from CDN. Add <code>&lt;link rel="stylesheet" href="https://unpkg.com/ngx-bootstrap/datepicker/bs-datepicker.css"&gt;</code> to your <code>index.html</code></li>
<li>Load it from <code>node_modules/ngx-bootstrap/datepicker/bs-datepicker.css</code> via package bundler like Angular CLI, if you're using one.</li>
</ul>
<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><s>6. Integration with forms, only for input fields</s></li>
<li>etc.</li>
</ul>
<demo-date-picker-popup></demo-date-picker-popup>
</ng-sample-box>
<h3 routerLink="." fragment="themes" id="themes">Themes</h3>
<ng-sample-box [ts]="demos.colorTheming.component" [html]="demos.colorTheming.html">
<p>Datepicker comes with some default color schemes.
You can change it by manipulating <code>containerClass</code> property in <code>bsConfig</code> object</p>
<p>There are 6 color schemes: <code>theme-default</code>, <code>theme-green</code>, <code>theme-blue</code>,
<code>theme-dark-blue</code>, <code>theme-red</code>, <code>theme-orange</code></p>
<demo-datepicker-color-theming></demo-datepicker-color-theming>
</ng-sample-box>
<p [innerHtml]="titleDoc"></p>
<h3 routerLink="." fragment="locales" id="locales">Locales</h3>
<h2 routerLink="." fragment="examples" id="examples">Examples</h2>
<ng-sample-box [ts]="demos.changeLocale.component" [html]="demos.changeLocale.html">
<p>Datepicker can use different locales. <br>It's possible to change a locale by changing <code>locale</code>
property in <code>bsConfig</code> object, list of available locales is in dropdown below.</p>
<p>To use a different locale, you have to import it from <code>ngx-bootstrap/bs-moment</code> and define it
in your <code>@NgModule</code> using function <code>defineLocale</code></p>
<p>Example: </p>
<code>import {{ '{' }} defineLocale {{ '}' }} from 'ngx-bootstrap/bs-moment';</code><br>
<code>import {{ '{' }} de {{ '}' }} from 'ngx-bootstrap/locale';</code><br>
<code>defineLocale('de', de));</code>
<br><br>
<demo-datepicker-change-locale></demo-datepicker-change-locale>
</ng-sample-box>
<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>
<h3 routerLink="." fragment="min-max" id="min-max">Min-max</h3>
<ng-sample-box [ts]="demos.minMax.component" [html]="demos.minMax.html">
<p>You can set min and max date of datepicker/daterangepicker using <code>minDate</code> and <code>maxDate</code> properties</p>
<p>In the following example <code>minDate</code> is set to yesterday and <code>maxDate</code> to the current day in the next week</p>
<demo-datepicker-min-max></demo-datepicker-min-max>
</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>
<ng-sample-box [ts]="demos.changeLocale.component" [html]="demos.changeLocale.html">
<demo-datepicker-change-locale></demo-datepicker-change-locale>
</ng-sample-box>
<h3 routerLink="." fragment="disabled" id="disabled">Disabled (scratch, WIP)</h3>
<ng-sample-box [ts]="demos.disabled.component" [html]="demos.disabled.html">
<p>If you want to disable datepicker set is <code>isDisabled</code> property to true</p>
<demo-datepicker-disabled></demo-datepicker-disabled>
</ng-sample-box>
<h3 routerLink="." fragment="forms" id="forms">Forms</h3>
<ng-sample-box [ts]="demos.forms.component" [html]="demos.forms.html">
<p>Datepicker and daterangepicker can be used in forms. Keep in mind that value of <code>ngModel</code>
is <code>Date</code> object (array of 2 object for daterangepicker)</p>
<demo-datepicker-forms></demo-datepicker-forms>
</ng-sample-box>
<h3 routerLink="." fragment="reactive" id="reactive">Reactive forms</h3>
<ng-sample-box [ts]="demos.reactive.component" [html]="demos.reactive.html">
<demo-datepicker-reactive-forms></demo-datepicker-reactive-forms>
</ng-sample-box>
<h2 routerLink="." fragment="api-reference" id="api-reference">API Reference</h2>
<ng-api-doc id="bs-datepicker-component" directive="BsDatepickerComponent"></ng-api-doc>
<ng-api-doc id="bs-daterangepicker-component" directive="BsDaterangepickerComponent"></ng-api-doc>
</tab>
<tab heading="Old">
<p>This is a legacy version of datepicker without support of daterangepicker, locales, themes, etc.</p>
<h2>Contents</h2>
<ul>
<li><a routerLink="." fragment="usageOld">Usage</a></li>
<li><a routerLink="." fragment="examplesOld">Example</a> </li>
<li><a routerLink="." fragment="api-referenceOld">API Reference</a>
<ul>
<li><a routerLink="." fragment="datepicker-component">DatePickerComponent</a></li>
</ul>
</li>
</ul>
<h2 routerLink="." fragment="usageOld" id="usageOld">Usage</h2>
<ng-sample-box [ts]="demos.old.component" [html]="demos.old.html">
<datepicker-demo></datepicker-demo>
</ng-sample-box>
<p [innerHtml]="oldTitleDoc"></p>
<h2 routerLink="." fragment="examplesOld" id="examplesOld">Example</h2>
<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>
<h2 routerLink="." fragment="api-referenceOld" id="api-referenceOld">API Reference</h2>
<ng-api-doc id="datepicker-component" directive="DatePickerComponent"></ng-api-doc>
</tab>
</tabset>
</demo-section>`
})
export class DatepickerSectionComponent {
public name: string = 'Datepicker';
public src: string = 'https://github.com/valor-software/ngx-bootstrap/tree/development/src/datepicker';
public demos: any = DEMOS;
public oldTitleDoc: string = oldTitleDoc;
public titleDoc: string = titleDoc;
}
8 changes: 5 additions & 3 deletions demo/src/app/components/+datepicker/demo-datepicker.module.ts
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,16 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { DatepickerModule, BsDatepickerModule } from 'ngx-bootstrap/datepicker';
import { TabsModule } from 'ngx-bootstrap/tabs';

import { SharedModule } from '../../shared';
import { DatepickerSectionComponent } from './datepicker-section.component';
import { DEMO_COMPONENTS } from './demos';
import { routes } from './demo-datepicker.routes';

import { defineLocale, getSetGlobalLocale } from 'ngx-bootstrap/bs-moment';
import { defineLocale } 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';
Expand All @@ -18,7 +19,6 @@ const locales = [ar, de, enGb, es, esDo, esUs, fr, hi, it, ja, ko, nl, nlBe, pl,

locales.forEach(locale => defineLocale(locale.abbr, locale));

getSetGlobalLocale('en');

@NgModule({
declarations: [
Expand All @@ -28,8 +28,10 @@ getSetGlobalLocale('en');
imports: [
DatepickerModule.forRoot(),
BsDatepickerModule.forRoot(),
TabsModule.forRoot(),
CommonModule,
FormsModule,
ReactiveFormsModule,
SharedModule,
RouterModule.forChild(routes)
],
Expand Down
22 changes: 11 additions & 11 deletions demo/src/app/components/+datepicker/demos/bs-popup/date-picker-popup.html
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,23 @@
<pre>{{bsValue}}</pre>
<input type="text"
value="{{ bsValue | date:'yMd'}}"
[minDate]="minDate"
[maxDate]="maxDate"
#dp="bsDatepicker"
bsDatepicker [(bsValue)]="bsValue">
<span style="display: inline-block">
<button class="btn btn-success" (click)="dp.toggle()">Date Picker popup</button>
</span>
<input type="text"
[minDate]="minDate"
[maxDate]="maxDate"
[(ngModel)]="bsValue"
bsDatepicker>
<button class="btn btn-success" (click)="dp.toggle()">Date Picker popup</button>

<br>
<br>

<pre>{{bsRangeValue}}</pre>
<input type="text"
value="{{ bsRangeValue[0] | date:'yMd'}} - {{ bsRangeValue[1] | date:'yMd'}}"
#drp="bsDaterangepicker"
bsDaterangepicker [(bsValue)]="bsRangeValue">
<span style="display: inline-block">
<button class="btn btn-success" (click)="drp.toggle()">Date Range Picker popup</button>
</span>
<pre>{{ bsRangeValue[0] | date:'yMd'}} - {{ bsRangeValue[1] | date:'yMd'}}</pre>
<input #drp="bsDaterangepicker" bsDaterangepicker [(bsValue)]="bsRangeValue">
<input bsDaterangepicker [(ngModel)]="bsRangeValue">
<input [(ngModel)]="bsRangeValue">
<button class="btn btn-success" (click)="drp.toggle()">Date Range Picker popup</button>

22 changes: 20 additions & 2 deletions demo/src/app/components/+datepicker/demos/bs-popup/date-picker-popup.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,24 @@ import { Component } from '@angular/core';
export class DemoDatePickerPopupComponent {
minDate = new Date(2017, 5, 10);
maxDate = new Date(2018, 9, 15);
bsValue: any ;
bsRangeValue: any = [new Date(2017, 7, 4), new Date(2017, 7, 20)];
_bsValue: Date;
get bsValue(): Date {
return this._bsValue;
}

set bsValue(v: Date) {
console.log(v);
this._bsValue = v;
}

_bsRangeValue: any = [new Date(2017, 7, 4), new Date(2017, 7, 20)];
get bsRangeValue(): any {
return this._bsRangeValue;
}

set bsRangeValue(v: any) {
this._bsRangeValue = v;
}

log(v: any) {console.log(v);}
}
15 changes: 8 additions & 7 deletions demo/src/app/components/+datepicker/demos/change-locale/change-locale.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,13 @@
<option *ngFor="let loc of locales" [value]="loc">{{ loc }}</option>
</select>
</div>
<div class="col-xs-6 col-sm-3">
<input placeholder="Datepicker" type="text" class="form-control" bsDatepicker #dp="bsDatepicker" [bsConfig]="bsConfig">
</div>
<input type="button"
class="btn btn-success"
value="Date Picker"
bsDatepicker
#dp="bsDatepicker"
[bsConfig]="bsConfig"/>
(click)="dp.show()" />
</div>
<br>

Expand All @@ -23,11 +24,11 @@
<option *ngFor="let loc of locales" [value]="loc">{{ loc }}</option>
</select>
</div>
<div class="col-xs-6 col-sm-3">
<input placeholder="Daterangepicker" type="text" class="form-control" bsDaterangepicker #dpr="bsDaterangepicker" [bsConfig]="bsConfig">
</div>
<input type="button"
class="btn btn-success"
value="Date Range Picker"
bsDaterangepicker
#dpr="bsDaterangepicker"
[bsConfig]="bsConfig"/>
value="Date Range Picker" (click)="dpr.show()"/>
</div>

38 changes: 9 additions & 29 deletions demo/src/app/components/+datepicker/demos/color-theming/color-theming.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,37 +11,17 @@
<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 class="col-xs-6 col-sm-3">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" bsDatepicker #dp="bsDatepicker" [bsConfig]="bsConfig">
<div class="input-group-btn">
<button class="btn btn-success" (click)="dp.show() ">Open</button>
</div>
</div>
</div>
</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>

13 changes: 13 additions & 0 deletions demo/src/app/components/+datepicker/demos/disabled/disabled.component.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<div class="row">
<div class="col-sm-3">
<div class="form-group">
<input class="form-control" placeholder="Datepicker" bsDatepicker #dp="bsDatepicker">
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<input class="form-control" placeholder="Daterangepicker" bsDaterangepicker #dpr="bsDaterangepicker">
</div>
</div>
</div>

Loading

0 comments on commit 363bb22

Please sign in to comment.