feat(datepicker): added month and year view (#2540)

feat(datepicker): added min\max dates boundaries

Author: valorkin

.travis.yml

@@ -20,8 +20,7 @@ script:
   - npm i ./dist
   - npm run demo.build
   # istanbul is broken, should be fixed
-  #- npm run test-coverage
-  - ./node_modules/.bin/ng test -sr
+  - npm run test-coverage
 
 after_success:
   - ./node_modules/.bin/codecov

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

@@ -36,11 +36,11 @@ let titleDoc = require('html-loader!markdown-loader!./docs/title.md');
     <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>1. Month and year selection</li>
-      <li>2. Min/max dates restrcitions</li>
+      <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>5. Configuration</li>
+      <li><s>5. Configuration</s></li>
       <li>6. Integration with forms, only for input fields</li>
       <li>etc.</li>
     </ul>

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

@@ -1,10 +1,12 @@
 <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>
-  <bs-datepicker #dp [(bsValue)]="bsValue" style="display: block"></bs-datepicker>
 </span>
 
 <br>
@@ -13,9 +15,9 @@
 <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>
-  <bs-daterangepicker #drp [(bsValue)]="bsRangeValue" placement="right" style="display: block"></bs-daterangepicker>
 </span>
 

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

@@ -5,6 +5,8 @@ import { Component } from '@angular/core';
   templateUrl: './date-picker-popup.html'
 })
 export class DemoDatePickerPopupComponent {
-  public bsValue: any ;
-  public bsRangeValue: any = [new Date(2017, 7, 4), new Date(2017, 7, 20)];
+  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)];
 }

demo/src/assets/css/style.css

@@ -150,7 +150,7 @@ a:hover {
   position: fixed;
   bottom: 0;
   left: 0;
-  z-index: 999;
+  /*z-index: 999;*/
   -webkit-transition: left .5s ease;
   -moz-transition: left .5s ease;
   -ms-transition: left .5s ease;
@@ -585,6 +585,7 @@ a:hover {
 
   .isOpenMenu #main-menu {
     left: 0;
+    z-index: 999;
   }
 
   #main {

demo/src/ng-api-doc.ts

@@ -67,17 +67,17 @@ export const ngdoc: any = {
     "description": "",
     "selector": "alert,ngx-alert",
     "inputs": [
+      {
+        "name": "dismissOnTimeout",
+        "type": "string | number",
+        "description": "<p>Number in milliseconds, after which alert will be closed </p>\n"
+      },
       {
         "name": "dismissible",
         "defaultValue": "false",
         "type": "boolean",
         "description": "<p>If set, displays an inline &quot;Close&quot; button </p>\n"
       },
-      {
-        "name": "dismissOnTimeout",
-        "type": "string | number",
-        "description": "<p>Number in milliseconds, after which alert will be closed </p>\n"
-      },
       {
         "name": "type",
         "defaultValue": "warning",
@@ -111,18 +111,18 @@ export const ngdoc: any = {
     "description": "",
     "methods": [],
     "properties": [
-      {
-        "name": "dismissible",
-        "defaultValue": "false",
-        "type": "boolean",
-        "description": "<p>is alerts are dismissible by default </p>\n"
-      },
       {
         "name": "dismissOnTimeout",
         "defaultValue": "undefined",
         "type": "number",
         "description": "<p>default time before alert will dismiss </p>\n"
       },
+      {
+        "name": "dismissible",
+        "defaultValue": "false",
+        "type": "boolean",
+        "description": "<p>is alerts are dismissible by default </p>\n"
+      },
       {
         "name": "type",
         "defaultValue": "warning",

package.json

@@ -21,7 +21,9 @@
     "disable-lint": "tslint \"**/*.ts\" -c tslint.json --fix --type-check -t prose -e \"node_modules/**\" -e \"dist/**\" -e \"temp/**\" -e \"scripts/docs/**\"",
     "flow.changelog": "conventional-changelog -i CHANGELOG.md -s -p angular",
     "flow.github-release": "conventional-github-releaser -p angular",
-    "build": "ngm build -p src --clean",
+    "build": "run-s build.ngm build.sass",
+    "build.sass": "node-sass --recursive src --output dist --source-map true --source-map-contents sass",
+    "build.ngm": "ngm build -p src --clean",
     "build.watch": "ngm build -p src --watch --skip-bundles",
     "start": "ng serve --aot --host 0.0.0.0",
     "generate-bs4": "node scripts/generate-bs4.js",
@@ -67,7 +69,7 @@
     "@angular/forms": "^2.3.1 || >=4.0.0"
   },
   "devDependencies": {
-    "@angular/cli": "1.3.1",
+    "@angular/cli": "1.3.2",
     "@angular/common": "^2.4.4",
     "@angular/compiler": "^2.4.4",
     "@angular/compiler-cli": "^2.4.4",
@@ -79,10 +81,10 @@
     "@angular/platform-browser-dynamic": "^2.4.4",
     "@angular/router": "^3.4.4",
     "@angular/tsc-wrapped": "0.5.1",
-    "@types/jasmine": "2.5.53",
+    "@types/jasmine": "2.5.54",
     "@types/marked": "0.3.0",
-    "@types/node": "8.0.24",
-    "@types/webpack": "3.0.9",
+    "@types/node": "8.0.25",
+    "@types/webpack": "3.0.10",
     "bootstrap": "3.3.7",
     "classlist-polyfill": "1.2.0",
     "codecov": "2.3.0",
@@ -97,8 +99,8 @@
     "google-code-prettify": "1.0.5",
     "html-loader": "0.5.1",
     "intl": "^1.2.5",
-    "jasmine": "2.7.0",
-    "jasmine-core": "2.7.0",
+    "jasmine": "2.8.0",
+    "jasmine-core": "2.8.0",
     "jasmine-data-provider": "2.2.0",
     "jasmine-spec-reporter": "4.2.1",
     "karma": "1.7.0",
@@ -108,26 +110,26 @@
     "karma-jasmine": "^1.0.2",
     "karma-jasmine-html-reporter": "^0.2.2",
     "karma-remap-istanbul": "0.6.0",
-    "karma-sauce-launcher": "1.1.0",
+    "karma-sauce-launcher": "1.2.0",
     "lite-server": "2.3.0",
     "lodash": "4.17.4",
     "markdown-loader": "github:valorkin/markdown-loader",
     "marked": "0.3.6",
     "ng2-page-scroll": "4.0.0-beta.7",
     "ngm-cli": "0.6.1",
-    "npm-run-all": "4.0.2",
+    "npm-run-all": "4.1.1",
     "protractor": "5.1.2",
     "reflect-metadata": "0.1.10",
     "require-dir": "0.3.2",
     "rxjs": "5.4.3",
     "ts-helpers": "^1.1.1",
-    "tslint": "5.6.0",
+    "tslint": "5.7.0",
     "tslint-config-valorsoft": "2.1.0",
     "typedoc": "0.8.0",
     "typescript": "2.4.2",
     "wallaby-webpack": "0.0.39",
     "webdriver-manager": "12.0.6",
     "webpack-bundle-analyzer": "2.9.0",
-    "zone.js": "0.8.16"
+    "zone.js": "0.8.17"
   }
 }

src/bs-moment/format-functions.ts

@@ -1,7 +1,7 @@
 import { Locale } from './locale/locale.class';
 import { zeroFill } from './utils';
 import { isFunction } from './utils/type-checks';
-import { DateFormatterFn } from '../datepicker/models/index';
+import { DateFormatterFn } from './types';
 
 export let formatFunctions: { [key: string]: (date: Date, locale: Locale) => string } = {};
 export let formatTokenFunctions: { [key: string]: DateFormatterFn } = {};

src/bs-moment/types.ts

@@ -1,3 +1,5 @@
+import { Locale } from './locale/locale.class';
+
 export type UnitOfTime = 'year' | 'month' | 'week' | 'day' | 'hour' |
   'minute' | 'seconds' | 'milliseconds';
 
@@ -9,3 +11,5 @@ export interface TimeUnit {
   minute?: number;
   seconds?: number;
 }
+
+export type DateFormatterFn = (date: Date, format: string, locale?: Locale) => string;

src/bs-moment/utils/date-compare.ts

@@ -0,0 +1,64 @@
+import { UnitOfTime } from '../types';
+import { endOf, startOf } from './start-end-of';
+
+export function isAfter(date1: Date, date2: Date, units: UnitOfTime = 'milliseconds'): boolean {
+  if (!date1 || !date2) {
+    return false;
+  }
+
+  if (units === 'milliseconds') {
+    return date1.valueOf() > date2.valueOf();
+  }
+
+  return date2.valueOf() < startOf(date1, units).valueOf();
+}
+
+export function isBefore(date1: Date, date2: Date, units: UnitOfTime = 'milliseconds'): boolean {
+  if (!date1 || !date2) {
+    return false;
+  }
+
+  if (units === 'milliseconds') {
+    return date1.valueOf() < date2.valueOf();
+  }
+
+  return endOf(date1, units).valueOf() < date2.valueOf();
+}
+
+export function isBetween(date: Date,
+                          from: Date,
+                          to: Date,
+                          units: UnitOfTime,
+                          inclusivity = '()'): boolean {
+  const leftBound = inclusivity[0] === '('
+    ? isAfter(date, from, units) :
+    !isBefore(date, from, units);
+  const rightBound = inclusivity[1] === ')'
+    ? isBefore(date, to, units)
+    : !isAfter(date, to, units);
+
+  return leftBound && rightBound;
+}
+
+export function isSame(date1: Date, date2: Date, units: UnitOfTime = 'milliseconds'): boolean {
+  if (!date1 || !date2) {
+    return false;
+  }
+
+  if (units === 'milliseconds') {
+    return date1.valueOf() === date2.valueOf();
+  }
+
+  const inputMs = date2.valueOf();
+
+  return startOf(date1, units).valueOf() <= inputMs
+    && inputMs <= endOf(date1, units).valueOf();
+}
+
+export function isSameOrAfter(date1: Date, date2: Date, units?: UnitOfTime): boolean {
+  return isSame(date1, date2, units) || isAfter(date1, date2, units);
+}
+
+export function isSameOrBefore(date1: Date, date2: Date, units?: UnitOfTime): boolean {
+  return isSame(date1, date2, units) || isBefore(date1, date2, units);
+}