Skip to content

Commit 363bb22

Browse files
valorkinvalorkin
authored
Merge pull request valor-software#2562 from valor-software/feat-datepicker-forms
feat(datepicker): added forms support
2 parents 33198c6 + 0f74e3f commit 363bb22

38 files changed

+1020
-245
lines changed

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

Lines changed: 126 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -2,71 +2,151 @@
22
import { Component } from '@angular/core';
33
import { DEMOS } from './demos';
44
// webpack html imports
5+
let oldTitleDoc = require('html-loader!markdown-loader!./docs/titleOld.md');
56
let titleDoc = require('html-loader!markdown-loader!./docs/title.md');
67

78
@Component({
89
selector: 'datepicker-section',
9-
template: `
10+
template: `
1011
<demo-section [name]="name" [src]="src">
11-
<p>Datepicker is a highly configurable component that adds datepicker functionality to your pages. You can
12-
customize the date format and language, restrict the selectable date ranges.</p>
13-
14-
<h2>Contents</h2>
15-
<ul>
16-
<li><a routerLink="." fragment="usage">Usage</a></li>
17-
<li><a routerLink="." fragment="examples">Examples</a>
18-
<ul>
19-
<!--<li><a routerLink="." fragment="link-color">Link color</a></li>-->
20-
</ul>
21-
</li>
22-
<li><a routerLink="." fragment="api-reference">API Reference</a>
12+
<tabset>
13+
<tab heading="Overview">
14+
<p>Datepicker is a highly configurable component that adds datepicker functionality to your pages. You can
15+
customize the date format and language, restrict the selectable date ranges.</p>
16+
<h2>Contents</h2>
2317
<ul>
24-
<li><a routerLink="." fragment="datepicker-component">DatePickerComponent</a></li>
18+
<li><a routerLink="." fragment="usage">Usage</a></li>
19+
<li><a routerLink="." fragment="examples">Examples</a>
20+
<ul>
21+
<li><a routerLink="." fragment="basic">Basic</a></li>
22+
<li><a routerLink="." fragment="themes">Themes</a></li>
23+
<li><a routerLink="." fragment="locales">Locales</a></li>
24+
<li><a routerLink="." fragment="min-max">Min-max</a></li>
25+
<li><a routerLink="." fragment="disabled">Disabled</a></li>
26+
<li><a routerLink="." fragment="forms">Forms</a></li>
27+
<li><a routerLink="." fragment="reactive">Reactive forms</a></li>
28+
</ul>
29+
</li>
30+
<li><a routerLink="." fragment="api-reference">API Reference</a>
31+
<ul>
32+
<li><a routerLink="." fragment="bs-datepicker-component">BsDatepickerComponent</a></li>
33+
<li><a routerLink="." fragment="bs-daterangepicker-component">BsDaterangepickerComponent</a></li>
34+
</ul>
35+
</li>
2536
</ul>
26-
</li>
27-
</ul>
2837
29-
<h2 routerLink="." fragment="usage" id="usage">Usage</h2>
38+
<h2 routerLink="." fragment="usage" id="usage">Usage</h2>
39+
40+
<p [innerHtml]="titleDoc"></p>
41+
42+
<h2 routerLink="." fragment="examples" id="examples">Examples</h2>
43+
<h3 routerLink="." fragment="basic" id="basic">Basic</h3>
44+
<ng-sample-box [ts]="demos.pop.component" [html]="demos.pop.html">
45+
<p><code>BsDatepickerModule</code> is activily developed but you can use it already</p>
46+
<p>Notebale change is additional css for it <code> "/datepicker/bs-datepicker.css"</code> <br></p>
47+
<p>There are two ways of adding css:</p>
48+
<ul>
49+
<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>
50+
<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>
51+
</ul>
52+
<p>In nearest time will be added:</p>
53+
<ul>
54+
<li><s>1. Month and year selection</s></li>
55+
<li><s>2. Min/max dates restrcitions</s></li>
56+
<li><s>3. Color theming</s></li>
57+
<li>4. Options to replace any part of template</li>
58+
<li><s>5. Configuration</s></li>
59+
<li><s>6. Integration with forms, only for input fields</s></li>
60+
<li>etc.</li>
61+
</ul>
62+
<demo-date-picker-popup></demo-date-picker-popup>
63+
</ng-sample-box>
64+
65+
<h3 routerLink="." fragment="themes" id="themes">Themes</h3>
66+
<ng-sample-box [ts]="demos.colorTheming.component" [html]="demos.colorTheming.html">
67+
<p>Datepicker comes with some default color schemes.
68+
You can change it by manipulating <code>containerClass</code> property in <code>bsConfig</code> object</p>
69+
<p>There are 6 color schemes: <code>theme-default</code>, <code>theme-green</code>, <code>theme-blue</code>,
70+
<code>theme-dark-blue</code>, <code>theme-red</code>, <code>theme-orange</code></p>
71+
<demo-datepicker-color-theming></demo-datepicker-color-theming>
72+
</ng-sample-box>
3073
31-
<p [innerHtml]="titleDoc"></p>
74+
<h3 routerLink="." fragment="locales" id="locales">Locales</h3>
3275
33-
<h2 routerLink="." fragment="examples" id="examples">Examples</h2>
76+
<ng-sample-box [ts]="demos.changeLocale.component" [html]="demos.changeLocale.html">
77+
<p>Datepicker can use different locales. <br>It's possible to change a locale by changing <code>locale</code>
78+
property in <code>bsConfig</code> object, list of available locales is in dropdown below.</p>
79+
<p>To use a different locale, you have to import it from <code>ngx-bootstrap/bs-moment</code> and define it
80+
in your <code>@NgModule</code> using function <code>defineLocale</code></p>
81+
<p>Example: </p>
82+
<code>import {{ '{' }} defineLocale {{ '}' }} from 'ngx-bootstrap/bs-moment';</code><br>
83+
<code>import {{ '{' }} de {{ '}' }} from 'ngx-bootstrap/locale';</code><br>
84+
<code>defineLocale('de', de));</code>
85+
<br><br>
86+
<demo-datepicker-change-locale></demo-datepicker-change-locale>
87+
</ng-sample-box>
3488
35-
<ng-sample-box [ts]="demos.pop.component" [html]="demos.pop.html">
36-
<p><code>BsDatepickerModule</code> is activily developed but you can use it already</p>
37-
<p>Notebale change is additional css for it <code> "/datepicker/bs-datepicker.css"</code></p>
38-
<p>In nearest time will be added:</p>
39-
<ul>
40-
<li><s>1. Month and year selection</s></li>
41-
<li><s>2. Min/max dates restrcitions</s></li>
42-
<li><s>3. Color theming</s></li>
43-
<li>4. Options to replace any part of template</li>
44-
<li><s>5. Configuration</s></li>
45-
<li>6. Integration with forms, only for input fields</li>
46-
<li>etc.</li>
47-
</ul>
48-
<demo-date-picker-popup></demo-date-picker-popup>
49-
</ng-sample-box>
89+
<h3 routerLink="." fragment="min-max" id="min-max">Min-max</h3>
90+
<ng-sample-box [ts]="demos.minMax.component" [html]="demos.minMax.html">
91+
<p>You can set min and max date of datepicker/daterangepicker using <code>minDate</code> and <code>maxDate</code> properties</p>
92+
<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>
93+
<demo-datepicker-min-max></demo-datepicker-min-max>
94+
</ng-sample-box>
5095
51-
<ng-sample-box [ts]="demos.colorTheming.component" [html]="demos.colorTheming.html">
52-
<demo-datepicker-color-theming></demo-datepicker-color-theming>
53-
</ng-sample-box>
54-
55-
<ng-sample-box [ts]="demos.changeLocale.component" [html]="demos.changeLocale.html">
56-
<demo-datepicker-change-locale></demo-datepicker-change-locale>
57-
</ng-sample-box>
96+
<h3 routerLink="." fragment="disabled" id="disabled">Disabled (scratch, WIP)</h3>
97+
<ng-sample-box [ts]="demos.disabled.component" [html]="demos.disabled.html">
98+
<p>If you want to disable datepicker set is <code>isDisabled</code> property to true</p>
99+
<demo-datepicker-disabled></demo-datepicker-disabled>
100+
</ng-sample-box>
101+
102+
<h3 routerLink="." fragment="forms" id="forms">Forms</h3>
103+
<ng-sample-box [ts]="demos.forms.component" [html]="demos.forms.html">
104+
<p>Datepicker and daterangepicker can be used in forms. Keep in mind that value of <code>ngModel</code>
105+
is <code>Date</code> object (array of 2 object for daterangepicker)</p>
106+
<demo-datepicker-forms></demo-datepicker-forms>
107+
</ng-sample-box>
108+
109+
<h3 routerLink="." fragment="reactive" id="reactive">Reactive forms</h3>
110+
<ng-sample-box [ts]="demos.reactive.component" [html]="demos.reactive.html">
111+
<demo-datepicker-reactive-forms></demo-datepicker-reactive-forms>
112+
</ng-sample-box>
113+
114+
<h2 routerLink="." fragment="api-reference" id="api-reference">API Reference</h2>
115+
<ng-api-doc id="bs-datepicker-component" directive="BsDatepickerComponent"></ng-api-doc>
116+
<ng-api-doc id="bs-daterangepicker-component" directive="BsDaterangepickerComponent"></ng-api-doc>
117+
</tab>
118+
<tab heading="Old">
119+
<p>This is a legacy version of datepicker without support of daterangepicker, locales, themes, etc.</p>
120+
<h2>Contents</h2>
121+
<ul>
122+
<li><a routerLink="." fragment="usageOld">Usage</a></li>
123+
<li><a routerLink="." fragment="examplesOld">Example</a> </li>
124+
<li><a routerLink="." fragment="api-referenceOld">API Reference</a>
125+
<ul>
126+
<li><a routerLink="." fragment="datepicker-component">DatePickerComponent</a></li>
127+
</ul>
128+
</li>
129+
</ul>
130+
131+
<h2 routerLink="." fragment="usageOld" id="usageOld">Usage</h2>
58132
59-
<ng-sample-box [ts]="demos.old.component" [html]="demos.old.html">
60-
<datepicker-demo></datepicker-demo>
61-
</ng-sample-box>
133+
<p [innerHtml]="oldTitleDoc"></p>
134+
135+
<h2 routerLink="." fragment="examplesOld" id="examplesOld">Example</h2>
136+
<ng-sample-box [ts]="demos.old.component" [html]="demos.old.html">
137+
<datepicker-demo></datepicker-demo>
138+
</ng-sample-box>
62139
63-
<h2 routerLink="." fragment="api-reference" id="api-reference">API Reference</h2>
64-
<ng-api-doc id="datepicker-component" directive="DatePickerComponent"></ng-api-doc>
140+
<h2 routerLink="." fragment="api-referenceOld" id="api-referenceOld">API Reference</h2>
141+
<ng-api-doc id="datepicker-component" directive="DatePickerComponent"></ng-api-doc>
142+
</tab>
143+
</tabset>
65144
</demo-section>`
66145
})
67146
export class DatepickerSectionComponent {
68147
public name: string = 'Datepicker';
69148
public src: string = 'https://github.com/valor-software/ngx-bootstrap/tree/development/src/datepicker';
70149
public demos: any = DEMOS;
150+
public oldTitleDoc: string = oldTitleDoc;
71151
public titleDoc: string = titleDoc;
72152
}

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

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
11
import { NgModule } from '@angular/core';
22
import { CommonModule } from '@angular/common';
3-
import { FormsModule } from '@angular/forms';
3+
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
44
import { RouterModule } from '@angular/router';
55
import { DatepickerModule, BsDatepickerModule } from 'ngx-bootstrap/datepicker';
6+
import { TabsModule } from 'ngx-bootstrap/tabs';
67

78
import { SharedModule } from '../../shared';
89
import { DatepickerSectionComponent } from './datepicker-section.component';
910
import { DEMO_COMPONENTS } from './demos';
1011
import { routes } from './demo-datepicker.routes';
1112

12-
import { defineLocale, getSetGlobalLocale } from 'ngx-bootstrap/bs-moment';
13+
import { defineLocale } from 'ngx-bootstrap/bs-moment';
1314
import {
1415
ar, de, enGb, es, esDo, esUs, fr, hi, it, ja, ko, nl, nlBe, pl, ptBr, ru, zhCn
1516
} from 'ngx-bootstrap/locale';
@@ -18,7 +19,6 @@ const locales = [ar, de, enGb, es, esDo, esUs, fr, hi, it, ja, ko, nl, nlBe, pl,
1819

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

21-
getSetGlobalLocale('en');
2222

2323
@NgModule({
2424
declarations: [
@@ -28,8 +28,10 @@ getSetGlobalLocale('en');
2828
imports: [
2929
DatepickerModule.forRoot(),
3030
BsDatepickerModule.forRoot(),
31+
TabsModule.forRoot(),
3132
CommonModule,
3233
FormsModule,
34+
ReactiveFormsModule,
3335
SharedModule,
3436
RouterModule.forChild(routes)
3537
],

‎demo/src/app/components/+datepicker/demos/bs-popup/date-picker-popup.html

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,23 @@
11
<pre>{{bsValue}}</pre>
22
<input type="text"
3-
value="{{ bsValue | date:'yMd'}}"
43
[minDate]="minDate"
54
[maxDate]="maxDate"
65
#dp="bsDatepicker"
76
bsDatepicker [(bsValue)]="bsValue">
8-
<span style="display: inline-block">
9-
<button class="btn btn-success" (click)="dp.toggle()">Date Picker popup</button>
10-
</span>
7+
<input type="text"
8+
[minDate]="minDate"
9+
[maxDate]="maxDate"
10+
[(ngModel)]="bsValue"
11+
bsDatepicker>
12+
<button class="btn btn-success" (click)="dp.toggle()">Date Picker popup</button>
1113

1214
<br>
1315
<br>
1416

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

‎demo/src/app/components/+datepicker/demos/bs-popup/date-picker-popup.ts

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,24 @@ import { Component } from '@angular/core';
77
export class DemoDatePickerPopupComponent {
88
minDate = new Date(2017, 5, 10);
99
maxDate = new Date(2018, 9, 15);
10-
bsValue: any ;
11-
bsRangeValue: any = [new Date(2017, 7, 4), new Date(2017, 7, 20)];
10+
_bsValue: Date;
11+
get bsValue(): Date {
12+
return this._bsValue;
13+
}
14+
15+
set bsValue(v: Date) {
16+
console.log(v);
17+
this._bsValue = v;
18+
}
19+
20+
_bsRangeValue: any = [new Date(2017, 7, 4), new Date(2017, 7, 20)];
21+
get bsRangeValue(): any {
22+
return this._bsRangeValue;
23+
}
24+
25+
set bsRangeValue(v: any) {
26+
this._bsRangeValue = v;
27+
}
28+
29+
log(v: any) {console.log(v);}
1230
}

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

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,13 @@
66
<option *ngFor="let loc of locales" [value]="loc">{{ loc }}</option>
77
</select>
88
</div>
9+
<div class="col-xs-6 col-sm-3">
10+
<input placeholder="Datepicker" type="text" class="form-control" bsDatepicker #dp="bsDatepicker" [bsConfig]="bsConfig">
11+
</div>
912
<input type="button"
1013
class="btn btn-success"
1114
value="Date Picker"
12-
bsDatepicker
13-
#dp="bsDatepicker"
14-
[bsConfig]="bsConfig"/>
15+
(click)="dp.show()" />
1516
</div>
1617
<br>
1718

@@ -23,11 +24,11 @@
2324
<option *ngFor="let loc of locales" [value]="loc">{{ loc }}</option>
2425
</select>
2526
</div>
27+
<div class="col-xs-6 col-sm-3">
28+
<input placeholder="Daterangepicker" type="text" class="form-control" bsDaterangepicker #dpr="bsDaterangepicker" [bsConfig]="bsConfig">
29+
</div>
2630
<input type="button"
2731
class="btn btn-success"
28-
value="Date Range Picker"
29-
bsDaterangepicker
30-
#dpr="bsDaterangepicker"
31-
[bsConfig]="bsConfig"/>
32+
value="Date Range Picker" (click)="dpr.show()"/>
3233
</div>
3334

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

Lines changed: 9 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -11,37 +11,17 @@
1111
<option value="theme-orange">orange</option>
1212
</select>
1313
</div>
14-
<div class="col-xs-6 col-sm-9">
15-
<input type="button"
16-
class="btn btn-success"
17-
value="Date Picker"
18-
bsDatepicker
19-
#dp="bsDatepicker"
20-
[bsConfig]="bsConfig"/>
14+
<div class="col-xs-6 col-sm-3">
15+
<div class="form-group">
16+
<div class="input-group">
17+
<input type="text" class="form-control" bsDatepicker #dp="bsDatepicker" [bsConfig]="bsConfig">
18+
<div class="input-group-btn">
19+
<button class="btn btn-success" (click)="dp.show() ">Open</button>
20+
</div>
21+
</div>
22+
</div>
2123
</div>
2224
</div>
2325
<br>
2426

25-
<div class="row">
26-
<div class="col-xs-6 col-sm-3">
27-
<select
28-
class="custom-select form-control "
29-
[(ngModel)]="colorTheme" (ngModelChange)="applyTheme(dpr);">
30-
<option value="theme-default">default</option>
31-
<option value="theme-green">green</option>
32-
<option value="theme-blue">blue</option>
33-
<option value="theme-dark-blue">dark-blue</option>
34-
<option value="theme-red">red</option>
35-
<option value="theme-orange">orange</option>
36-
</select>
37-
</div>
38-
<div class="col-xs-6 col-sm-9">
39-
<input type="button"
40-
class="btn btn-success"
41-
value="Date Range Picker"
42-
bsDaterangepicker
43-
#dpr="bsDaterangepicker"
44-
[bsConfig]="bsConfig"/>
45-
</div>
46-
</div>
4727

‎demo/src/app/components/+datepicker/demos/disabled/disabled.component.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<div class="row">
2+
<div class="col-sm-3">
3+
<div class="form-group">
4+
<input class="form-control" placeholder="Datepicker" bsDatepicker #dp="bsDatepicker">
5+
</div>
6+
</div>
7+
<div class="col-sm-3">
8+
<div class="form-group">
9+
<input class="form-control" placeholder="Daterangepicker" bsDaterangepicker #dpr="bsDaterangepicker">
10+
</div>
11+
</div>
12+
</div>
13+

0 commit comments

Comments
 (0)