[WIP][新增] 日期选择器支持箭头选择、回车确定，关联了@4768

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 {

src/app/for-internal/demo/pc/date-picker/keyboard/demo.component.css

@@ -0,0 +1,4 @@
+.demo-cntr {
+    display: flex;
+    justify-content: space-between;
+}

src/app/for-internal/demo/pc/date-picker/keyboard/demo.component.html

@@ -0,0 +1,27 @@
+<!-- ignore the following lines, they are not important to this demo -->
+<jigsaw-demo-description [summary]="summary" [content]="description">
+</jigsaw-demo-description>
+
+
+<!-- start to learn the demo from here -->
+<ul class="demo-options">
+    <li class="demo-options-item">
+        <span>gr：</span>
+        <jigsaw-button-bar [data]="['date','week','month']" [(selectedItems)]="gr">
+        </jigsaw-button-bar>
+    </li>
+</ul>
+<ul class="demo-cntr">
+    <li>
+        <jigsaw-date-picker [(date)]="date" [gr]="gr[0]" (dateChange)="dateChange($event)"></jigsaw-date-picker>
+        <div>选择的时间是：{{date}}</div>
+    </li>
+    <li>
+        <jigsaw-date-picker [(date)]="date2" [gr]="gr[0]" (dateChange)="dateChange($event)"></jigsaw-date-picker>
+        <div>选择的时间是：{{date2}}</div>
+    </li>
+    <li>
+        <jigsaw-date-picker [(date)]="date3" [gr]="gr[0]" (dateChange)="dateChange($event)"></jigsaw-date-picker>
+        <div>选择的时间是：{{date3}}</div>
+    </li>
+</ul>

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 = '';
+}

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 {
+
+}

src/jigsaw/pc-components/date-and-time/date-picker.html

@@ -34,7 +34,7 @@
         </thead>
         <tbody>
         <tr *ngFor="let row of _$dayList">
-            <td *ngFor="let dayCell of row" class="jigsaw-date-picker-content-day-cell"
+            <td #cell *ngFor="let dayCell of row" class="jigsaw-date-picker-content-day-cell"
                 [class.jigsaw-date-picker-content-day-cell-prev-next]="dayCell.isOwnPrevMonth || dayCell.isOwnNextMonth"
                 [class.jigsaw-date-picker-content-day-cell-today]="dayCell.isToday"
                 [class.jigsaw-date-picker-content-day-cell-selected]="dayCell.isSelected"
@@ -52,7 +52,7 @@
     <table class="jigsaw-date-picker-content-month" *ngIf="_$selectMode == 'month'">
         <tbody>
         <tr *ngFor="let row of _$monthList">
-            <td *ngFor="let monthCell of row" class="jigsaw-date-picker-content-month-cell"
+            <td #cell *ngFor="let monthCell of row" class="jigsaw-date-picker-content-month-cell"
                 [class.jigsaw-date-picker-content-month-cell-selected]="monthCell.isSelected"
                 [class.jigsaw-date-picker-content-month-cell-disabled]="monthCell.isDisabled"
                 (click)="_$selectMonth(monthCell)">
@@ -64,7 +64,7 @@
     <table class="jigsaw-date-picker-content-year" *ngIf="_$selectMode == 'year'">
         <tbody>
         <tr *ngFor="let row of _$yearList">
-            <td *ngFor="let yearCell of row" class="jigsaw-date-picker-content-year-cell"
+            <td #cell *ngFor="let yearCell of row" class="jigsaw-date-picker-content-year-cell"
                 [class.jigsaw-date-picker-content-year-cell-selected]="yearCell.isSelected"
                 [class.jigsaw-date-picker-content-year-cell-disabled]="yearCell.isDisabled"
                 [class.jigsaw-date-picker-content-year-cell-prev-next]="yearCell.isOwnPrevOrNext"

src/jigsaw/pc-components/date-and-time/date-picker.scss

@@ -13,6 +13,7 @@ $jigsaw-date-picker: #{$jigsaw-prefix}-date-picker;
     color: $font-color-default;
     overflow: hidden;
     user-select: none;
+    outline: none;
 
     .#{$jigsaw-date-picker}-header {
         display: flex;

src/jigsaw/pc-components/date-and-time/date-picker.ts

@@ -9,7 +9,8 @@ import {
     NgModule,
     Output,
     Renderer2,
-    Injector
+    Injector,
+    HostListener
 } from '@angular/core';
 import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
 import {CommonModule} from '@angular/common';
@@ -113,9 +114,11 @@ export class GrItem {
         '[style.width]': 'width',
         '[style.height]': 'height',
         '[attr.data-theme]': 'theme',
+        '[attr.tabindex]': '0',
         '[class.jigsaw-date-picker-host]': 'true',
         '[class.jigsaw-date-picker-error]': '!valid',
         '[class.jigsaw-date-picker-disabled]': 'disabled',
+        '(keydown)': '_$handleKeyDown($event)'
     },
     providers: [
         {provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => 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
      */

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;
         }