Skip to content

Commit

Permalink
feat(datepicker): added month and year view (#2540)
Browse files Browse the repository at this point in the history
feat(datepicker): added min\max dates boundaries
  • Loading branch information
valorkin authored Aug 30, 2017
1 parent 48186fd commit 571a00b
Show file tree
Hide file tree
Showing 52 changed files with 1,741 additions and 685 deletions.
3 changes: 1 addition & 2 deletions .travis.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
@@ -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>
Expand All @@ -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>

Original file line number Diff line number Diff line change
Expand Up @@ -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)];
}
3 changes: 2 additions & 1 deletion demo/src/assets/css/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -585,6 +585,7 @@ a:hover {

.isOpenMenu #main-menu {
left: 0;
z-index: 999;
}

#main {
Expand Down
22 changes: 11 additions & 11 deletions demo/src/ng-api-doc.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down
24 changes: 13 additions & 11 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -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"
}
}
2 changes: 1 addition & 1 deletion src/bs-moment/format-functions.ts
Original file line number Diff line number Diff line change
@@ -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 } = {};
Expand Down
4 changes: 4 additions & 0 deletions src/bs-moment/types.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import { Locale } from './locale/locale.class';

export type UnitOfTime = 'year' | 'month' | 'week' | 'day' | 'hour' |
'minute' | 'seconds' | 'milliseconds';

Expand All @@ -9,3 +11,5 @@ export interface TimeUnit {
minute?: number;
seconds?: number;
}

export type DateFormatterFn = (date: Date, format: string, locale?: Locale) => string;
64 changes: 64 additions & 0 deletions src/bs-moment/utils/date-compare.ts
Original file line number Diff line number Diff line change
@@ -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);
}
22 changes: 19 additions & 3 deletions src/bs-moment/utils/date-getters.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@

import { createDate } from './date-setters';

export function getHours(date: Date, isUTC = false): number {
Expand Down Expand Up @@ -47,6 +46,23 @@ export function isFirstDayOfWeek(date: Date, firstDayOfWeek: number): boolean {
}

export function isSameMonth(date1: Date, date2: Date) {
if (!date1 || !date2) {return false;}
return getFullYear(date1) === getFullYear(date2) && getMonth(date1) === getMonth(date2);
if (!date1 || !date2) {return false; }

return isSameYear(date1, date2) && getMonth(date1) === getMonth(date2);
}

export function isSameYear(date1: Date, date2: Date) {
if (!date1 || !date2) {return false; }

return getFullYear(date1) === getFullYear(date2);
}

export function isSameDay(date1: Date, date2: Date): boolean {
if (!date1 || !date2) {
return false;
}

return isSameYear(date1, date2) && isSameMonth(date1, date2)
&& getDate(date1) === getDate(date2);
}

58 changes: 58 additions & 0 deletions src/datepicker/base/bs-datepicker-container.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
// datepicker container component
/* tslint:disable no-empty */
import { BsCustomDates } from '../themes/bs/bs-custom-dates-view.component';
import { BsDatepickerEffects } from '../reducer/bs-datepicker.effects';
import { Observable } from 'rxjs/Observable';
import {
BsDatepickerViewMode, BsNavigationEvent, CalendarCellViewModel, CellHoverEvent, DatepickerRenderOptions,
DaysCalendarViewModel, DayViewModel,
MonthsCalendarViewModel,
YearsCalendarViewModel
} from '../models/index';

export abstract class BsDatepickerContainer {
/** @deperecated */
_customRangesFish: BsCustomDates[] = [
{label: 'today', value: new Date()},
{label: 'today1', value: new Date()},
{label: 'today2', value: new Date()},
{label: 'today3', value: new Date()}
];

_effects: BsDatepickerEffects;

set minDate(value: Date) {
this._effects.setMinDate(value);
}

set maxDate(value: Date) {
this._effects.setMaxDate(value);
}


viewMode: Observable<BsDatepickerViewMode>;
daysCalendar: Observable<DaysCalendarViewModel[]>;
monthsCalendar: Observable<MonthsCalendarViewModel[]>;
yearsCalendar: Observable<YearsCalendarViewModel[]>;
options: Observable<DatepickerRenderOptions>;

setViewMode(event: BsDatepickerViewMode): void {}

navigateTo(event: BsNavigationEvent): void {}

dayHoverHandler(event: CellHoverEvent): void {}

monthHoverHandler(event: CellHoverEvent): void {}

yearHoverHandler(event: CellHoverEvent): void {}

daySelectHandler(day: DayViewModel): void {};

monthSelectHandler(event: CalendarCellViewModel): void {}

yearSelectHandler(event: CalendarCellViewModel): void {}

_stopPropagation(event: any): void {
event.stopPropagation();
}
}
4 changes: 0 additions & 4 deletions src/datepicker/bs-datepicker-config.ts

This file was deleted.

Loading

0 comments on commit 571a00b

Please sign in to comment.