feat(datepicker): initial version of new datepicker (#2426)

* feat(datepicker): initial version of new datepicker * chore(datepicker): removed obselete comments * chore(ci): use node 8 and npm 5 * chore(ci): run tests * chore(ci): disable coverage until it is fixed
valor-software · Aug 17, 2017 · b11776c · b11776c
1 parent 5dd456b
commit b11776c
Show file tree

Hide file tree

Showing 57 changed files with 3,161 additions and 145 deletions.
diff --git a/.angular-cli.json b/.angular-cli.json
@@ -18,6 +18,7 @@
       "prefix": "",
       "mobile": false,
       "styles": [
+        "../../src/datepicker/bs-datepicker.css"
       ],
       "scripts": [],
       "environmentSource": "environments/environment.ts",

diff --git a/.travis.yml b/.travis.yml
@@ -1,6 +1,6 @@
 sudo: false
 language: node_js
-node_js: "7"
+node_js: "8"
 dist: precise
 
 env:
@@ -19,7 +19,9 @@ script:
   - rm -rf node_modules/ngx-bootstrap
   - npm i ./dist
   - npm run demo.build
-  - npm run test-coverage
+  # istanbul is broken, should be fixed
+  #- npm run test-coverage
+  - ./node_modules/.bin/ng test -sr
 
 after_success:
   - ./node_modules/.bin/codecov

diff --git a/demo/src/app/app.module.ts b/demo/src/app/app.module.ts
@@ -10,24 +10,7 @@ import { MainMenuComponent } from './common/main-menu/main-menu.component';
 import { TopMenuComponent } from './common/top-menu/top-menu.component';
 import { SearchFilterPipe } from './common/main-menu/search-filter.pipe';
 import { AppFooterComponent } from './common/app-footer/app-footer.component';
-// will be lazy loaded later
-// import { DemoAccordionModule } from './components/+accordion';
-// import { DemoAlertsModule } from './components/+alerts';
-// import { DemoButtonsModule } from './components/+buttons';
-// import { DemoCarouselModule } from './components/+carousel';
-// import { DemoCollapseModule } from './components/+collapse';
-// import { DemoDatepickerModule } from './components/+datepicker';
-// import { DemoDropdownModule } from './components/+dropdown';
-// import { DemoModalModule } from './components/+modal';
-// import { DemoPaginationModule } from './components/+pagination';
-// import { DemoPopoverModule } from './components/+popover/index';
-// import { DemoProgressbarModule } from './components/+progressbar';
-// import { DemoRatingModule } from './components/+rating';
-// import { DemoSortableModule } from './components/+sortable';
-// import { DemoTabsModule } from './components/+tabs';
-// import { DemoTimepickerModule } from './components/+timepicker/index';
-// import { DemoTooltipModule } from './components/+tooltip/index';
-// import { DemoTypeaheadModule } from './components/+typeahead/index';
+
 import { NgApiDocModule } from './api-docs/index';
 import { NgApiDoc } from './api-docs/api-docs.model';
 import { ngdoc } from '../ng-api-doc';
@@ -46,25 +29,7 @@ import { ngdoc } from '../ng-api-doc';
     BrowserModule,
     FormsModule,
     RouterModule.forRoot(routes, {useHash: true}),
-    Ng2PageScrollModule.forRoot(),
-    // will be lazy loaded later on
-    // DemoAccordionModule,
-    // DemoAlertsModule,
-    // DemoButtonsModule,
-    // DemoCarouselModule,
-    // DemoCollapseModule,
-    // DemoDatepickerModule,
-    // DemoDropdownModule,
-    // DemoModalModule,
-    // DemoPaginationModule,
-    // DemoPopoverModule,
-    // DemoProgressbarModule,
-    // DemoRatingModule,
-    // DemoSortableModule,
-    // DemoTabsModule,
-    // DemoTimepickerModule,
-    // DemoTooltipModule,
-    // DemoTypeaheadModule
+    Ng2PageScrollModule.forRoot()
   ],
   providers: [
     {provide: NgApiDoc, useValue: ngdoc}

diff --git a/demo/src/app/app.routing.ts b/demo/src/app/app.routing.ts
@@ -1,21 +1,4 @@
 import { GettingStartedComponent } from './getting-started/getting-started.component';
-// import { AccordionSectionComponent } from './components/accordion/accordion-section.component';
-// import { AlertsSectionComponent } from './components/+alerts/alerts-section.component';
-// import { ButtonsSectionComponent } from './components/+buttons/buttons-section.component';
-// import { CarouselSectionComponent } from './components/+carousel/carousel-section.component';
-// import { CollapseSectionComponent } from './components/+collapse/collapse-section.component';
-// import { DatepickerSectionComponent } from './components/+datepicker/datepicker-section.component';
-// import { DropdownSectionComponent } from './components/+dropdown/dropdown-section.component';
-// import { ModalSectionComponent } from './components/+modal/modal-section.component';
-// import { ProgressbarSectionComponent } from './components/+progressbar/progressbar-section.component';
-// import { PaginationSectionComponent } from './components/+pagination/pagination-section.component';
-// import { RatingSectionComponent } from './components/+rating/rating-section.component';
-// import { SortableSectionComponent } from './components/+sortable/sortable-section.component';
-// import { TabsSectionComponent } from './components/+tabs/tabs-section.component';
-// import { TimepickerSectionComponent } from './components/+timepicker/timepicker-section.component';
-// import { TooltipSectionComponent } from './components/+tooltip/tooltip-section.component';
-// import { TypeaheadSectionComponent } from './components/+typeahead/typeahead-section.component';
-// import { PopoverSectionComponent } from './components/+popover/popover-section.component';
 
 export const routes = [
   {

diff --git a/demo/src/app/components/+datepicker/datepicker-section.component.ts b/demo/src/app/components/+datepicker/datepicker-section.component.ts
@@ -30,7 +30,11 @@ let titleDoc = require('html-loader!markdown-loader!./docs/title.md');
   <p [innerHtml]="titleDoc"></p>
 
   <h2 routerLink="." fragment="examples" id="examples">Examples</h2>
-
+    
+  <ng-sample-box [ts]="demos.pop.component" [html]="demos.pop.html">
+    <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>

diff --git a/demo/src/app/components/+datepicker/demo-datepicker.module.ts b/demo/src/app/components/+datepicker/demo-datepicker.module.ts
@@ -2,20 +2,23 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
-import { DatepickerModule } from 'ngx-bootstrap/datepicker';
+import { DatepickerModule, BsDatepickerModule } from 'ngx-bootstrap/datepicker';
 
 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';
 
 @NgModule({
   declarations:[
+    DemoDatePickerPopupComponent,
     DatepickerSectionComponent,
     ...DEMO_COMPONENTS
   ],
   imports:[
     DatepickerModule.forRoot(),
+    BsDatepickerModule.forRoot(),
     CommonModule,
     FormsModule,
     SharedModule,

diff --git a/demo/src/app/components/+datepicker/demos/bs-popup/date-picker-popup.html b/demo/src/app/components/+datepicker/demos/bs-popup/date-picker-popup.html
@@ -0,0 +1,9 @@
+<pre>{{bsValue}}</pre>
+<bs-datepicker #dp [(value)]="bsValue"></bs-datepicker>
+<button class="btn btn-success" (click)="dp.toggle()">Date Picker popup</button>
+
+<br>
+
+<pre>{{bsRangeValue}}</pre>
+<bs-daterangepicker #drp [(value)]="bsRangeValue"></bs-daterangepicker>
+<button class="btn btn-success" (click)="drp.toggle()">Date Range Picker popup</button>
diff --git a/demo/src/app/components/+datepicker/demos/bs-popup/date-picker-popup.ts b/demo/src/app/components/+datepicker/demos/bs-popup/date-picker-popup.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'demo-date-picker-popup',
+  templateUrl: './date-picker-popup.html'
+})
+export class DemoDatePickerPopupComponent {
+  public bsValue: any = new Date(2017, 7, 4);
+  public bsRangeValue: any = [new Date(2017, 7, 4), new Date(2017, 7, 20)];
+}
diff --git a/demo/src/app/components/+datepicker/demos/datepicker-demo.component.ts b/demo/src/app/components/+datepicker/demos/datepicker-demo.component.ts
@@ -1,5 +1,4 @@
 import { Component } from '@angular/core';
-import * as moment from 'moment';
 
 @Component({
   selector: 'datepicker-demo',
@@ -41,8 +40,7 @@ export class DatepickerDemoComponent {
   }
 
   public d20090824(): void {
-    this.dt = moment('2009-08-24', 'YYYY-MM-DD')
-      .toDate();
+    this.dt = new Date(2009,7,24);
   }
 
   public disableTomorrow(): void {

diff --git a/demo/src/app/components/+datepicker/demos/index.ts b/demo/src/app/components/+datepicker/demos/index.ts
@@ -8,5 +8,9 @@ export const DEMOS = {
   old: {
     component: require('!!raw-loader?lang=typescript!./datepicker-demo.component.ts'),
     html: require('!!raw-loader?lang=markup!./datepicker-demo.component.html')
+  },
+  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')
   }
 };