add sample screenshot

lib/ui/date.js

@@ -4,11 +4,14 @@ import { createElement } from "../functions";
  * 创建或转换日期选择框
  * @param {string} [min] - 最小可选日期
  * @param {string} [max] - 最大可选日期
- * @param {HTMLInputElement} [element] - 转换该元素为日期选择框
+ * @param {HTMLInputElement | string} [element] - 转换该元素为日期选择框
  * @returns {HTMLInputElement} 返回创建或转换的日期选择框
  */
 export function createDateInput(min, max, element) {
     let date;
+    if (typeof element === 'string') {
+        element = document.querySelector(element);
+    }
     if (element instanceof HTMLInputElement) {
         date = element;
         date.classList.add('ui-date-cell');
@@ -121,13 +124,6 @@ export function getDateValue(element, formatter) {
     return '';
 }
 
-/**
- * 日期选中触发的回调函数
- * @callback DateSelectedCallback
- * @param {Date} date - 修改后的日期值
- * @this DateSelector
- */
-
 /**
  * 日期选择框类
  * @class
@@ -140,7 +136,8 @@ export class DateSelector {
     /**
      * 日期发生变化时触发的事件
      * @event
-     * @type {DateSelectedCallback}
+     * @param {Date} date - 修改后的日期值
+     * @this DateSelector
      */
     onDateChanged;
 
@@ -152,6 +149,24 @@ export class DateSelector {
      * @param {string} [opts.minDate] - 最小可选择日期
      * @param {string} [opts.maxDate] - 最大可选择日期
      * @param {DateFormatterCallback} [opts.valueFormatter] - 自定义格式化函数
+     * @example <caption>创建一个 DateSelector 并插入到元素中</caption>
+     *  <div id="dateFrom"></div>
+     * @example
+     *  // 构造参数
+     *  const opts = {
+     *      minDate: '2020-01-01',
+     *      maxDate: '2024-02-01',
+     *      valueFormatter: (date) => {
+     *          return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;  // 2024/1/31
+     *      }
+     *  };
+     *  const dateSelectorFrom = new DateSelector(opts);
+     *  document.querySelector('#dateFrom').appendChild(dateSelectorFrom.create());
+     * @example <caption>将一个元素转化为 DateSelector</caption>
+     *  <input id="dateTo"></div>
+     * @example
+     *  const dateSelectorTo = new DateSelector();
+     *  dateSelectorTo.create('#dateTo');
      */
     constructor(opts) {
         this._var.options = opts ?? {};
@@ -159,7 +174,7 @@ export class DateSelector {
 
     /**
      * 创建或转换日期选择框元素
-     * @param {HTMLInputElement} [element] - 转换该元素为日期选择框
+     * @param {HTMLInputElement | string} [element] - 转换该元素为日期选择框
      * @returns {HTMLInputElement} 返回创建或转换的日期选择元素
      */
     create(element) {
@@ -245,7 +260,9 @@ export class DateSelector {
      * 解析的属性为 `id`, `class`, `data-min`, `data-max`, `disabled`
      * @static
      * @param {HTMLElement} [dom=document.body] 父元素
-     * @param {DateSelectedCallback} trigger 日期设置事件触发函数（上下文为触发设置日期的 `DateSelector` 实例）
+     * @param {Function} [trigger] 日期设置事件触发函数
+     * @param {Date} trigger.[this]] - 上下文为触发设置日期的 `DateSelector` 实例
+     * @param {Date} trigger.date - 修改后的日期值
      * @example <caption>HTML</caption>
      *  <input id="dateFrom" data-type="date" data-min="1980-01-01"/>
      * @example <caption>解析父容器</caption>