fix: Date Column editing issue.

docs: add some examples.

lib/ui.js

@@ -10,7 +10,7 @@ import { GridColumn, GridInputColumn, GridDropdownColumn, GridCheckboxColumn, Gr
 import { Popup, createPopup, showAlert, showConfirm } from "./ui/popup";
 import { createPicture, createAudio, createVideo, createFile } from './ui/media';
 import { validation, convertCssStyle } from './ui/extension';
-import { createDateInput, formatDate, setDateValue, getDateValue, DateSelector } from './ui/date';
+import { createDateInput, toDateValue, formatDate, setDateValue, getDateValue, DateSelector } from './ui/date';
 
 export {
   createElement,
@@ -43,6 +43,7 @@ export {
   showConfirm,
   // dateSelector
   createDateInput,
+  toDateValue,
   formatDate,
   setDateValue,
   getDateValue,

lib/ui/css/variables/definition.scss

@@ -25,6 +25,7 @@
     --red-color: red;
     --title-color: #fff;
     --title-bg-color: rgb(68, 114, 196);
+    --title-ctrlbg-color: rgb(68, 114, 196);
     --hover-bg-color: #eee;
     --link-color: #1890ff;
     --secondary-link-color: #1d9ac0;

lib/ui/date.d.ts

@@ -7,6 +7,12 @@
  */
 export function createDateInput(min?: string, max?: string, element?: HTMLInputElement): HTMLInputElement;
 
+/**
+ * 将日期转换成 yyyy-MM-dd 格式的字符串
+ * @param dt 日期值
+ */
+export function toDateValue(dt: Date): string;
+
 /**
  * 格式化日期字符串
  * @param date 要格式化的日期值<br/><br/>

lib/ui/date.js

@@ -29,7 +29,12 @@ export function createDateInput(min, max, element) {
     return date;
 }
 
-function toDateValue(dt) {
+/**
+ * 将日期转换为 `yyyy-MM-dd` 格式的字符串
+ * @param {Date} dt 要转换的日期值
+ * @returns 返回 `yyyy-MM-dd` 格式的字符串
+ */
+export function toDateValue(dt) {
     if (isNaN(dt)) {
         return '';
     }

lib/ui/grid/column.js

@@ -131,6 +131,10 @@ export class GridColumn {
      * @virtual
      */
 
+    /**
+     * 复写 [toString]{@linkcode String#toString} 方法
+     * @private
+     */
     static toString() { return '[object Column]' }
 }
 
@@ -417,6 +421,8 @@ export class GridIconColumn extends GridColumn {
 }
 
 export class GridDateColumn extends GridColumn {
+    static get editing() { return true };
+
     static createEdit(trigger, col, _container, vals) {
         let enabled = col.enabled;
         if (typeof enabled === 'string') {
@@ -428,7 +434,15 @@ export class GridDateColumn extends GridColumn {
             return super.create();
         }
         const date = createDateInput(col.dateMin, col.dateMax);
-        // date.addEventListener('change', trigger);
+        date.addEventListener('change', () => {
+            if (vals.__editing == null) {
+                vals.__editing = {
+                    [col.key]: true
+                }
+            } else {
+                vals.__editing[col.key] = true;
+            }
+        });
         date.addEventListener('blur', trigger);
         return date;
     }

lib/ui/grid/grid.js

@@ -210,6 +210,8 @@ let r = lang;
  * @property {(@deprecated)} [bgFilter] - **已过时**<br/>_根据返回值设置单元格背景色_
  * @property {object} [events] - 给单元格元素附加事件（事件函数上下文为数据行对象）
  * @property {Function} events.{event} - 事件回调函数
+ * @property {Function} events.{event}.{this} - 上下文为行数据对象
+ * @property {Function} events.{event}.e - 事件参数
  * @property {(object | GridItemObjectCallback)} [attrs] - 根据返回值设置单元格元素的附加属性，允许直接设置对象也支持调用如下函数返回对象
  * @property {GridColumnDefinition} attrs.{this} - 上下文为列定义对象
  * @property {GridItem} attrs.item - 行数据对象
@@ -244,12 +246,33 @@ let r = lang;
  *      {
  *          key: 'name',
  *          // type: Grid.ColumnTypes.Common,
- *          caption: 'Name'
+ *          caption: 'Name',
+ *          captionStyle: {
+ *              'font-style': 'italic'
+ *          },
+ *          width: 150,
+ *          allowFilter: true
+ *      },
+ *      {
+ *          key: 'birthday',
+ *          type: Grid.ColumnTypes.Date,
+ *          caption: 'Birthday',
+ *          width: 120,
+ *          dateMin: '1900-01-01',
+ *          dateMax: '2025-01-01',
+ *          dateValueFormatter: toDateValue
  *      },
  *      {
  *          key: 'age',
  *          type: Grid.ColumnTypes.Input,
- *          caption: 'Age'
+ *          caption: 'Age',
+ *          enabled: false,
+ *          align: 'right',
+ *          filter: item => {
+ *              const ms = new Date() - new Date(item.birthday);
+ *              const age = Math.floor(ms / 1000 / 60 / 60 / 24 / 365);
+ *              return String(age);
+ *          }
  *      },
  *      {
  *          key: 'sex',
@@ -267,14 +290,31 @@ let r = lang;
  *          caption: 'Active'
  *      },
  *      {
- *          key: 'birthday',
- *          type: Grid.ColumnTypes.Date,
- *          caption: 'Birthday'
- *      },
- *      {
  *          key: 'remove',
  *          type: Grid.ColumnTypes.Icon,
- *          text: 'times'
+ *          text: 'times',
+ *          resizable: false,
+ *          sortable: false,
+ *          orderable: false,
+ *          tooltip: 'Remove',
+ *          events: {
+ *              onclick: () => {
+ *                  showConfirm('Remove', 'Are you sure you want to remove this person?', [
+ *                      {
+ *                          key: 'yes',
+ *                          text: 'Yes',
+ *                          trigger: () => {
+ *                              console.log('yes');
+ *                              return true;
+ *                          }
+ *                      },
+ *                      {
+ *                          key: 'no',
+ *                          text: 'No'
+ *                      }
+ *                  ], 'question')
+ *              }
+ *          }
  *      }
  *  ]
  */