diff --git a/src/app/for-internal/demo/pc/date-picker/demo-set.module.ts b/src/app/for-internal/demo/pc/date-picker/demo-set.module.ts index 005eb2d421..744f3d6c97 100644 --- a/src/app/for-internal/demo/pc/date-picker/demo-set.module.ts +++ b/src/app/for-internal/demo/pc/date-picker/demo-set.module.ts @@ -14,6 +14,8 @@ import {DatePickerWeekStartComponent} from "./week-start/demo.component"; import {DatePickerWeekStartDemoModule} from "./week-start/demo.module"; import { DatePickerOptionsDemoModule } from "./options/demo.module"; import { DatePickerOptionsDemoComponent } from "./options/demo.component"; +import { DatePickerKeyboardDemoModule } from "./keyboard/demo.module"; +import { DatePickerKeyboardDemoComponent } from "./keyboard/demo.component"; export const routerConfig = [ { @@ -37,6 +39,9 @@ export const routerConfig = [ { path: 'options', component: DatePickerOptionsDemoComponent }, + { + path: 'keyboard', component: DatePickerKeyboardDemoComponent + }, ]; @NgModule({ @@ -48,7 +53,8 @@ export const routerConfig = [ DatePickerGrItemDemoModule, DatePickerMarkDemoModule, DatePickerWeekStartDemoModule, - DatePickerOptionsDemoModule + DatePickerOptionsDemoModule, + DatePickerKeyboardDemoModule ] }) export class DatePickerDemoModule { diff --git a/src/app/for-internal/demo/pc/date-picker/keyboard/demo.component.css b/src/app/for-internal/demo/pc/date-picker/keyboard/demo.component.css new file mode 100644 index 0000000000..a1ae32a4e9 --- /dev/null +++ b/src/app/for-internal/demo/pc/date-picker/keyboard/demo.component.css @@ -0,0 +1,4 @@ +.demo-cntr { + display: flex; + justify-content: space-between; +} \ No newline at end of file diff --git a/src/app/for-internal/demo/pc/date-picker/keyboard/demo.component.html b/src/app/for-internal/demo/pc/date-picker/keyboard/demo.component.html new file mode 100644 index 0000000000..237989e62b --- /dev/null +++ b/src/app/for-internal/demo/pc/date-picker/keyboard/demo.component.html @@ -0,0 +1,27 @@ + + + + + + + + \ No newline at end of file diff --git a/src/app/for-internal/demo/pc/date-picker/keyboard/demo.component.ts b/src/app/for-internal/demo/pc/date-picker/keyboard/demo.component.ts new file mode 100644 index 0000000000..5fc5639c67 --- /dev/null +++ b/src/app/for-internal/demo/pc/date-picker/keyboard/demo.component.ts @@ -0,0 +1,22 @@ +import { Component } from "@angular/core"; + +@Component({ + templateUrl: './demo.component.html', + styleUrls: ['demo.component.css', './../../assets/demo.common.css'] +}) +export class DatePickerKeyboardDemoComponent { + public date; + public date2; + public date3; + + public gr = ['date']; + + public dateChange($event) { + console.log('dateChange=>', $event) + } + // ==================================================================== + // ignore the following lines, they are not important to this demo + // ==================================================================== + summary: string = ''; + description: string = ''; +} diff --git a/src/app/for-internal/demo/pc/date-picker/keyboard/demo.module.ts b/src/app/for-internal/demo/pc/date-picker/keyboard/demo.module.ts new file mode 100644 index 0000000000..4d0b60821a --- /dev/null +++ b/src/app/for-internal/demo/pc/date-picker/keyboard/demo.module.ts @@ -0,0 +1,13 @@ +import { NgModule } from "@angular/core"; +import { JigsawButtonBarModule, JigsawButtonModule, JigsawDatePickerModule } from "jigsaw/public_api"; +import { JigsawDemoDescriptionModule } from "app/for-internal/description/demo-description"; +import { DatePickerKeyboardDemoComponent } from "./demo.component"; + +@NgModule({ + declarations: [DatePickerKeyboardDemoComponent], + exports: [DatePickerKeyboardDemoComponent], + imports: [JigsawDatePickerModule, JigsawDemoDescriptionModule, JigsawButtonBarModule] +}) +export class DatePickerKeyboardDemoModule { + +} diff --git a/src/jigsaw/pc-components/date-and-time/date-picker.html b/src/jigsaw/pc-components/date-and-time/date-picker.html index 74600fea13..372fea69c6 100644 --- a/src/jigsaw/pc-components/date-and-time/date-picker.html +++ b/src/jigsaw/pc-components/date-and-time/date-picker.html @@ -34,7 +34,7 @@ - - @@ -64,7 +64,7 @@ -
JigsawDatePicker), multi: true}, @@ -795,6 +798,47 @@ export class JigsawDatePicker extends AbstractJigsawComponent implements Control } } + selectedRowIndex: number = 0; + selectedColIndex: number = 0; + + public _$handleKeyDown($event) { + console.log($event) + console.log(this._$selectMode); + console.log(this._$dayList); + // this._$dayList[1][1].isSelected=true; + if ($event.key === 'ArrowUp') { + this._moveSelection(-1, 0, this._$dayList); + } else if ($event.key === 'ArrowDown') { + this._moveSelection(1, 0, this._$dayList); + } else if ($event.key === 'ArrowLeft') { + this._moveSelection(0, -1, this._$dayList); + } else if ($event.key === 'ArrowRight') { + this._moveSelection(0, 1, this._$dayList); + } + } + + private _moveSelection(rowChange: number, colChange: number, grid) { + const newRow = this.selectedRowIndex + rowChange; + const newCol = this.selectedColIndex + colChange; + + if ( + newRow >= 0 && + newRow < grid.length && + newCol >= 0 && + newCol < grid[0].length && + grid[newRow][newCol].isDisabled + ) { + grid[this.selectedRowIndex][this.selectedColIndex].isSelected = false; + this.selectedRowIndex = newRow; + this.selectedColIndex = newCol; + grid[this.selectedRowIndex][this.selectedColIndex].isSelected = true; + } + } + + private _getPreselectIndex(num, min, max) { + return Math.min(Math.max(num, min), max); + } + /** * @internal */ diff --git a/src/jigsaw/pc-components/date-and-time/date-time-select.ts b/src/jigsaw/pc-components/date-and-time/date-time-select.ts index 1dae64ff61..36f8d4f78a 100644 --- a/src/jigsaw/pc-components/date-and-time/date-time-select.ts +++ b/src/jigsaw/pc-components/date-and-time/date-time-select.ts @@ -291,6 +291,7 @@ export class JigsawDateTimeSelect extends AbstractJigsawComponent implements Con * @internal */ public _$closeComboSelect(cellType: DateTimeCellType) { + console.log(cellType); if (!this._comboSelect || !(this.gr == TimeGr.date || this.gr == TimeGr.month || this.gr == TimeGr.week)) { return; }