From 710a76c54bf87a31cea2d522a26e365efc565818 Mon Sep 17 00:00:00 2001 From: jessiejuachon Date: Fri, 15 Dec 2017 13:07:42 -0800 Subject: [PATCH 1/4] Option to always keep the date picker open [isAlwaysOpen] = true --- package.json | 99 +------------------- src/ng-datepicker/ng-datepicker.component.ts | 10 +- 2 files changed, 12 insertions(+), 97 deletions(-) diff --git a/package.json b/package.json index c3503a33c..dacc1cf75 100644 --- a/package.json +++ b/package.json @@ -1,96 +1,7 @@ { + "author": "jessie", "name": "ng2-datepicker", - "version": "2.1.6", - "main": "bundles/ng2-datepicker.umd.js", - "repository": { - "type": "git", - "url": "git+https://github.com/jkuri/ng2-datepicker.git" - }, - "authors": [ - "Jan Kuri " - ], - "license": "MIT", - "bugs": { - "url": "https://github.com/jkuri/ng2-datepicker/issues" - }, - "homepage": "https://github.com/jkuri/ng2-datepicker#readme", - "scripts": { - "clean": "rimraf dist lib bundles ./**/*.ngsummary.* ./**/*.ngfactory.* ./**/*.ngstyle.*", - "prestart": "npm run clean", - "start": "webpack-dev-server --env.dev --env.serve --progress --hot", - "start:noopen": "webpack-dev-server --env.dev --env.serve --env.noOpen", - "prestart:aot": "npm run clean", - "start:aot": "webpack-dev-server --env.aot --env.dev --env.serve --progress", - "prebuild": "npm run clean", - "build": "webpack --env.dev --progress --hide-modules", - "prebuild:aot": "npm run clean", - "build:aot": "webpack --env.dev --env.aot --progress --hide-modules", - "prebuild:prod": "npm run clean", - "build:prod": "webpack --env.prod --env.aot --progress --hide-modules -p", - "test": "karma start", - "pretest:e2e": "webdriver-manager update -- --standalone", - "test:e2e": "protractor ./protractor.conf.js", - "test:ci:e2e": "node ./e2e/run.js", - "build:dist": "webpack --config webpack.dist.js -p", - "prepublishOnly": "npm run build:dist" - }, - "devDependencies": { - "@angular/animations": "^4.4.3", - "@angular/common": "^4.4.3", - "@angular/compiler": "^4.4.3", - "@angular/compiler-cli": "4.4.3", - "@angular/core": "^4.4.3", - "@angular/forms": "^4.4.3", - "@angular/http": "^4.4.3", - "@angular/platform-browser": "^4.4.3", - "@angular/platform-browser-dynamic": "^4.4.3", - "@angular/platform-server": "^4.4.3", - "@angular/router": "^4.4.3", - "@ngtools/webpack": "^1.7.1", - "@types/chalk": "^0.4.31", - "@types/jasmine": "^2.6.0", - "add-asset-html-webpack-plugin": "^2.1.2", - "angular2-template-loader": "^0.6.2", - "awesome-typescript-loader": "^3.2.3", - "bulma": "^0.5.3", - "chalk": "^2.1.0", - "circular-dependency-plugin": "^4.2.1", - "compression-webpack-plugin": "^1.0.0", - "copy-webpack-plugin": "^4.0.1", - "core-js": "^2.5.1", - "css-loader": "^0.28.7", - "extract-text-webpack-plugin": "^3.0.0", - "file-loader": "^0.11.2", - "html-loader": "^0.5.1", - "html-webpack-plugin": "^2.30.1", - "jasmine": "^2.8.0", - "jasmine-spec-reporter": "^4.2.1", - "karma": "^1.7.1", - "karma-chrome-launcher": "^2.2.0", - "karma-jasmine": "^1.1.0", - "karma-spec-reporter": "0.0.31", - "karma-webpack": "^2.0.4", - "node-sass": "^4.5.3", - "portfinder": "^1.0.13", - "protractor": "^5.1.2", - "raw-loader": "^0.5.1", - "rimraf": "^2.6.2", - "rxjs": "^5.4.3", - "sass-loader": "^6.0.6", - "source-map-loader": "^0.2.1", - "style-loader": "^0.18.2", - "to-string-loader": "^1.1.5", - "tree-kill": "^1.2.0", - "ts-node": "^3.3.0", - "tslint": "^5.7.0", - "typescript": "^2.5.2", - "webpack": "^3.6.0", - "webpack-dev-server": "^2.8.2", - "webpack-merge": "^4.1.0", - "zone.js": "^0.8.17" - }, - "dependencies": { - "date-fns": "^1.28.5", - "ngx-slimscroll": "^3.5.2" - } -} + "version": "0.0.0", + "description": "Generated with typescript.java", + "license": "MIT" +} \ No newline at end of file diff --git a/src/ng-datepicker/ng-datepicker.component.ts b/src/ng-datepicker/ng-datepicker.component.ts index 932db025d..815b65e58 100644 --- a/src/ng-datepicker/ng-datepicker.component.ts +++ b/src/ng-datepicker/ng-datepicker.component.ts @@ -51,6 +51,8 @@ export class NgDatepickerComponent implements ControlValueAccessor, OnInit, OnCh */ @Input() isOpened = false; + @Input() isAlwaysOpen = false; + /** * Datepicker dropdown position */ @@ -153,7 +155,8 @@ export class NgDatepickerComponent implements ControlValueAccessor, OnInit, OnCh this.date = this.days[i].date; this.value = this.date; this.init(); - this.close(); + if (!this.isAlwaysOpen) + this.close(); } setYear(i: number): void { @@ -217,7 +220,8 @@ export class NgDatepickerComponent implements ControlValueAccessor, OnInit, OnCh } toggle(): void { - this.isOpened = !this.isOpened; + if (!this.isAlwaysOpen) + this.isOpened = !this.isOpened; } close(): void { @@ -258,7 +262,7 @@ export class NgDatepickerComponent implements ControlValueAccessor, OnInit, OnCh } const container = this.elementRef.nativeElement.querySelector('.ngx-datepicker-calendar-container'); - if (container && container !== e.target && !container.contains(e.target) && !(e.target).classList.contains('year-unit')) { + if (container && container !== e.target && !container.contains(e.target) && !(e.target).classList.contains('year-unit') && (!this.isAlwaysOpen)) { this.close(); } } From 6a98718c1d26b3fbeb734b9327b93edfb446fc5d Mon Sep 17 00:00:00 2001 From: jessiejuachon Date: Fri, 15 Dec 2017 16:19:46 -0800 Subject: [PATCH 2/4] Adding option to color busy days --- .../ng-datepicker.component.html | 2 +- .../ng-datepicker.component.sass | 5 ++++ src/ng-datepicker/ng-datepicker.component.ts | 27 ++++++++++++++++--- 3 files changed, 30 insertions(+), 4 deletions(-) diff --git a/src/ng-datepicker/ng-datepicker.component.html b/src/ng-datepicker/ng-datepicker.component.html index b5ca8b274..85a2bbb70 100644 --- a/src/ng-datepicker/ng-datepicker.component.html +++ b/src/ng-datepicker/ng-datepicker.component.html @@ -44,7 +44,7 @@ {{ name }}
- {{ day.day }} + {{ day.day }}
diff --git a/src/ng-datepicker/ng-datepicker.component.sass b/src/ng-datepicker/ng-datepicker.component.sass index 97a1109a2..3847fe388 100644 --- a/src/ng-datepicker/ng-datepicker.component.sass +++ b/src/ng-datepicker/ng-datepicker.component.sass @@ -6,6 +6,7 @@ $radius: 4px $text: #3D495C $text-secondary: #A4A9B1 $color: #1A91EB +$color-busy: #f5ce1e .ngx-datepicker-position-bottom-left top: 40px @@ -107,6 +108,10 @@ $color: #1A91EB background: $text-secondary color: $white + &.is-busy + background: $color-busy + color: $white + &.is-selected background: $color color: $white diff --git a/src/ng-datepicker/ng-datepicker.component.ts b/src/ng-datepicker/ng-datepicker.component.ts index 815b65e58..d27d52a7e 100644 --- a/src/ng-datepicker/ng-datepicker.component.ts +++ b/src/ng-datepicker/ng-datepicker.component.ts @@ -17,7 +17,8 @@ import { format, getDay, subDays, - setDay + setDay, + startOfDay } from 'date-fns'; import { ISlimScrollOptions } from 'ngx-slimscroll'; @@ -53,6 +54,10 @@ export class NgDatepickerComponent implements ControlValueAccessor, OnInit, OnCh @Input() isAlwaysOpen = false; + @Input() busyDays: Date[] = []; + + @Input() events = []; + /** * Datepicker dropdown position */ @@ -108,7 +113,13 @@ export class NgDatepickerComponent implements ControlValueAccessor, OnInit, OnCh gridMargin: '0' }; } - + + addBusyDay(date) { + if (this.busyDays.findIndex(busyDay => busyDay.getTime() == startOfDay(date).getTime()) == -1) { + this.busyDays.push(startOfDay(date)); + } + } + ngOnInit() { this.view = 'days'; this.date = new Date(); @@ -120,6 +131,10 @@ export class NgDatepickerComponent implements ControlValueAccessor, OnInit, OnCh if (this.positions.indexOf(this.position) === -1) { throw new TypeError(`ng-datepicker: invalid position property value '${this.position}' (expected: ${this.positions.join(', ')})`); } + + for (let e of this.events) { + this.addBusyDay(e.visitDate); + } } ngOnChanges(changes: SimpleChanges) { @@ -167,6 +182,11 @@ export class NgDatepickerComponent implements ControlValueAccessor, OnInit, OnCh } init(): void { + this.busyDays = []; + for (let e of this.events) { + this.addBusyDay(e.visitDate); + } + const start = startOfMonth(this.date); const end = endOfMonth(this.date); @@ -178,7 +198,8 @@ export class NgDatepickerComponent implements ControlValueAccessor, OnInit, OnCh year: getYear(date), inThisMonth: true, isToday: isToday(date), - isSelected: isSameDay(date, this.innerValue) && isSameMonth(date, this.innerValue) && isSameYear(date, this.innerValue) + isSelected: isSameDay(date, this.innerValue) && isSameMonth(date, this.innerValue) && isSameYear(date, this.innerValue), + isBusy: this.busyDays.findIndex(busyDay => busyDay.getTime() == startOfDay(date).getTime()) != -1 }; }); From ef00384d07851465c2bceb54ca309424a7f2b3c9 Mon Sep 17 00:00:00 2001 From: jessiejuachon Date: Fri, 15 Dec 2017 16:26:57 -0800 Subject: [PATCH 3/4] tsconfig.json --- tsconfig.json | 36 ++++++++++++------------------------ 1 file changed, 12 insertions(+), 24 deletions(-) diff --git a/tsconfig.json b/tsconfig.json index 0c0758380..7156e683f 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,29 +1,17 @@ { "compilerOptions": { - "module": "commonjs", + "declaration": false, + "emitDecoratorMetadata": false, + "experimentalDecorators": false, + "module": "none", "moduleResolution": "node", - "target": "es5", - "noImplicitAny": true, + "noFallthroughCasesInSwitch": false, + "noImplicitAny": false, + "noImplicitReturns": false, + "removeComments": false, "sourceMap": false, - "emitDecoratorMetadata": true, - "experimentalDecorators": true, - "declaration": false, - "lib": [ - "es2015", - "dom" - ], - "outDir": "lib", - "typeRoots": [ - "node_modules/@types" - ] - }, - "files": [ - "index.ts" - ], - "angularCompilerOptions": { - "skipMetadataEmit": true + "strictNullChecks": false, + "target": "es3" }, - "awesomeTypescriptLoaderOptions": { - "silent": true - } -} + "compileOnSave": true +} \ No newline at end of file From fb4be25539390c2c7021e70eaf55230cc2a430fb Mon Sep 17 00:00:00 2001 From: jessiejuachon Date: Tue, 19 Dec 2017 18:19:15 -0800 Subject: [PATCH 4/4] Added months view in between years and days --- .../ng-datepicker.component.html | 5 ++++ .../ng-datepicker.component.sass | 8 ++--- src/ng-datepicker/ng-datepicker.component.ts | 29 +++++++++++++++++-- 3 files changed, 36 insertions(+), 6 deletions(-) diff --git a/src/ng-datepicker/ng-datepicker.component.html b/src/ng-datepicker/ng-datepicker.component.html index 85a2bbb70..32b444bb8 100644 --- a/src/ng-datepicker/ng-datepicker.component.html +++ b/src/ng-datepicker/ng-datepicker.component.html @@ -52,5 +52,10 @@ {{ year.year }}
+
+
+ {{ month.month }} +
+
diff --git a/src/ng-datepicker/ng-datepicker.component.sass b/src/ng-datepicker/ng-datepicker.component.sass index 3847fe388..373935898 100644 --- a/src/ng-datepicker/ng-datepicker.component.sass +++ b/src/ng-datepicker/ng-datepicker.component.sass @@ -82,14 +82,14 @@ $color-busy: #f5ce1e text-transform: uppercase text-align: center - .main-calendar-days, .main-calendar-years + .main-calendar-days, .main-calendar-years, .main-calendar-months padding: 15px 0 width: 100% display: inline-block max-height: 275px overflow: hidden - .day-unit, .year-unit + .day-unit, .year-unit, .month-unit width: calc(100% / 7) height: 40px display: inline-flex @@ -116,11 +116,11 @@ $color-busy: #f5ce1e background: $color color: $white - .main-calendar-years + .main-calendar-years, .main-calendar-months height: 210px display: block padding: 0 - .year-unit + .year-unit, .month-unit width: calc(100% / 3) border-radius: 10px diff --git a/src/ng-datepicker/ng-datepicker.component.ts b/src/ng-datepicker/ng-datepicker.component.ts index d27d52a7e..23463ca6c 100644 --- a/src/ng-datepicker/ng-datepicker.component.ts +++ b/src/ng-datepicker/ng-datepicker.component.ts @@ -6,6 +6,7 @@ import { addMonths, subMonths, setYear, + setMonth, eachDay, getDate, getMonth, @@ -76,6 +77,7 @@ export class NgDatepickerComponent implements ControlValueAccessor, OnInit, OnCh firstCalendarDay: number; view: string; years: { year: number; isThisYear: boolean }[]; + months: { month: string; isThisMonth: boolean }[]; dayNames: string[]; scrollOptions: ISlimScrollOptions; days: { @@ -126,6 +128,7 @@ export class NgDatepickerComponent implements ControlValueAccessor, OnInit, OnCh this.setOptions(); this.initDayNames(); this.initYears(); + this.initMonths(); // Check if 'position' property is correct if (this.positions.indexOf(this.position) === -1) { @@ -143,12 +146,13 @@ export class NgDatepickerComponent implements ControlValueAccessor, OnInit, OnCh this.initDayNames(); this.init(); this.initYears(); + this.initMonths(); } } setOptions(): void { const today = new Date(); // this const was added because during my tests, I noticed that at this level this.date is undefined - this.minYear = this.options && this.options.minYear || getYear(today) - 30; + this.minYear = this.options && this.options.minYear || getYear(today) - 5; this.maxYear = this.options && this.options.maxYear || getYear(today) + 30; this.displayFormat = this.options && this.options.displayFormat || 'MMM D[,] YYYY'; this.barTitleFormat = this.options && this.options.barTitleFormat || 'MMMM YYYY'; @@ -178,6 +182,13 @@ export class NgDatepickerComponent implements ControlValueAccessor, OnInit, OnCh this.date = setYear(this.date, this.years[i].year); this.init(); this.initYears(); + this.view = 'months'; + } + + setMonth(i: number): void { + this.date = setMonth(this.date, i); + this.init(); + this.initMonths(); this.view = 'days'; } @@ -226,6 +237,14 @@ export class NgDatepickerComponent implements ControlValueAccessor, OnInit, OnCh return { year: year, isThisYear: year === getYear(this.date) }; }); } + + initMonths(): void { + this.months = [0,1,2,3,4,5,6,7,8,9,10,11].map(month => { + var tempDate = new Date(2010, month, 1); + var monthString = format(tempDate,'MMM'); + return { month: monthString, isThisMonth: month === getMonth(this.date) }; + }); + } initDayNames(): void { this.dayNames = []; @@ -237,7 +256,13 @@ export class NgDatepickerComponent implements ControlValueAccessor, OnInit, OnCh } toggleView(): void { - this.view = this.view === 'days' ? 'years' : 'days'; + if (this.view==='days') { + this.view = 'months'; + } else if (this.view==='months') { + this.view = 'years'; + } else if (this.view==='years') { + this.view = 'days'; + } } toggle(): void {