@ezuikit/control-date-picker 2.0.0-beta.3 → 2.1.0-beta.1

package/dist/style/month/index.scss

@@ -20,7 +20,7 @@
     }
 
     & .#{common.$emonth-prefix-cls}-cell {
-      height: 52px;
+      height: var(--edate-month-cell-height, 52px);
     }
 
     & .#{common.$emonth-prefix-cls}-cell-inner {
@@ -44,7 +44,7 @@
     padding: 0px 0;
     cursor: pointer;
     text-align: center;
-    color: rgba(0, 0, 0, 0.25);
+    color: var(--edate-out-view-color, rgba(0, 0, 0, 0.25));
     box-sizing: border-box;
 
     &:not(.#{common.$disabled}):hover &-inner {
@@ -57,7 +57,7 @@
       inset-inline-start: 0;
       inset-inline-end: 0;
       z-index: 1;
-      height: 22px;
+      height: var(--edate-month-cell-inner-height, 22px);
       transform: translateY(-50%);
       transition: all 0.3s;
       content: '';
@@ -68,7 +68,7 @@
 
       &.#{common.$emonth-prefix-cls}-cell-selected:not(.#{common.$disabled}) .#{common.$emonth-prefix-cls}-cell-inner {
         background-color: var(--edate-primary-color, #1677ff) !important;
-        color: #fff;
+        color: var(--edate-on-primary-color, #fff);
       }
       &.#{common.$emonth-prefix-cls}-cell-selected.#{common.$disabled} .#{common.$emonth-prefix-cls}-cell-inner {
         background-color: var(--edate-disabled-bg-color, rgba(0, 0, 0, 0.04)) !important;
@@ -79,9 +79,9 @@
       position: relative;
       z-index: 2;
       display: inline-block;
-      min-width: 22px;
-      height: 22px;
-      line-height: 22px;
+      min-width: var(--edate-month-cell-inner-min-width, 22px);
+      height: var(--edate-month-cell-inner-height, 22px);
+      line-height: var(--edate-month-cell-inner-height, 22px);
       border-radius: var(--edate-border-radius, 2px);
       transition:
         background 0.2s,

package/dist/style/style/_style.scss

@@ -2,4 +2,5 @@ $edate-prefix-cls: edate;
 $ecalendar-prefix-cls: ecalendar;
 $emonth-prefix-cls: emonth;
 $eyear-prefix-cls: eyear;
+$etime-prefix-cls: etime;
 $disabled: #{$edate-prefix-cls}-disabled;

package/dist/style/style/_theme.scss

@@ -1,9 +1,20 @@
 :root {
+  /* ============================ 尺寸 · 通用 ============================ */
   --edate-header-height: 34px;
-  --edate-footer-height: var(--edate-header-height, 34px);
+  --edate-footer-height: 36px;
   --edate-font-size: 14px;
+  --edate-min-width: 246px;
+  --edate-border-radius: 2px;
+
+  /* ============================ 颜色 · 通用 ============================ */
+  /* 面板背景色 */
+  --edate-bg-color: #fff;
   --edate-default-color: rgba(0, 0, 0, 0.88);
   --edate-primary-color: #648ffc;
+  /* 主色之上的前景色（选中态文字、主按钮文字） */
+  --edate-on-primary-color: #fff;
+  /* 非本视图（上 / 下月等）单元格文字色 */
+  --edate-out-view-color: rgba(0, 0, 0, 0.25);
   --edate-hover-color: var(--edate-default-color, rgba(0, 0, 0, 0.88));
   --edate-hover-bg-color: rgba(0, 0, 0, 0.04);
   --edate-active-color: var(--edate-default-color, rgba(0, 0, 0, 0.88));
@@ -12,16 +23,39 @@
   --edate-disabled-bg-color: rgba(0, 0, 0, 0.04);
   --edate-disabled-active-bg-color: rgba(0, 0, 0, 0.25);
   --edate-border-color: rgba(5, 5, 5, 0.06);
-  --edate-border-radius: 2px;
+  /* 按钮描边色 */
+  --edate-btn-border-color: #d9d9d9;
   --edate-close-color: rgba(240, 87, 87, 1);
+  --edate-arrow-color: rgba(0, 0, 0, 0.45);
+  --edate-arrow-hover-color: var(--edate-default-color, rgba(0, 0, 0, 0.88));
 
-  //
+  /* ============================ Calendar 日历 ============================ */
   --edate-calendar-border-radius: 50%;
   --edate-calendar-cell-width: 26px;
   --edate-calendar-cell-height: 26px;
+  /* 星期表头行高 */
+  --edate-calendar-weekday-height: 30px;
 
-  //
+  /* 徽章点 */
   --edate-badge-color: var(--edate-primary-color, #648ffc);
-  --edate-arrow-color: rgba(0, 0, 0, 0.45);
+  --edate-badge-size: 3px;
+
+  /* ============================ Month 月历 ============================ */
+  --edate-month-cell-height: 52px;
+  --edate-month-cell-inner-min-width: 22px;
+  --edate-month-cell-inner-height: 22px;
+
+  /* ============================ Year 年历 ============================ */
+  --edate-year-cell-height: 52px;
+  --edate-year-cell-inner-min-width: 22px;
+  --edate-year-cell-inner-height: 22px;
+
+  /* ============================ Time 时间 ============================ */
+  /* 滚动列总高度 */
+  --edate-time-column-height: 208px;
+  /* 时 / 分 / 秒单元格高度 */
+  --edate-time-cell-height: 30px;
+
+  /* 箭头 hover 色 */
   --edate-arrow-hover-color: var(--edate-default-color, rgba(0, 0, 0, 0.88));
 }

package/dist/style/style.css

@@ -1 +1 @@
-.epicker-body-noscroll{overflow:hidden;touch-action:none}.epicker{box-shadow:0 9px 28px 8px #0000000d;display:none;margin:0;opacity:0;padding:0;position:absolute;transition:opacity .3s ease;vertical-align:top;z-index:1000}.epicker,.epicker-body{box-sizing:border-box;flex-direction:column}.epicker-body{display:flex}.epicker.epicker-mobile .epicker-mask{background:#0000004d;bottom:0;box-sizing:border-box;height:100%;left:0;position:fixed;right:0;top:0;width:100%;z-index:9998}.epicker.epicker-mobile .epicker-body{align-items:center;bottom:0;left:0;position:fixed;right:0;z-index:9999}:root{--edate-header-height:34px;--edate-footer-height:var(--edate-header-height,34px);--edate-font-size:14px;--edate-default-color:rgba(0,0,0,.88);--edate-primary-color:#648ffc;--edate-hover-color:var(--edate-default-color,rgba(0,0,0,.88));--edate-hover-bg-color:rgba(0,0,0,.04);--edate-active-color:var(--edate-default-color,rgba(0,0,0,.88));--edate-active-bg-color:#e6f4ff;--edate-disabled-color:rgba(0,0,0,.25);--edate-disabled-bg-color:rgba(0,0,0,.04);--edate-disabled-active-bg-color:rgba(0,0,0,.25);--edate-border-color:rgba(5,5,5,.06);--edate-border-radius:2px;--edate-close-color:#f05757;--edate-calendar-border-radius:50%;--edate-calendar-cell-width:26px;--edate-calendar-cell-height:26px;--edate-badge-color:var(--edate-primary-color,#648ffc);--edate-arrow-color:rgba(0,0,0,.45);--edate-arrow-hover-color:var(--edate-default-color,rgba(0,0,0,.88))}.epicker-mobile .edate-mobile{--edate-hover-bg-color:transparent}.edate-container{background-color:#fff;box-sizing:border-box;display:flex;font-size:14px;max-height:80%;min-width:246px;text-align:center;width:100%}.edate-container *{-webkit-tap-highlight-color:transparent;border:none;box-sizing:border-box;margin:0;outline:none;padding:0}.edate-container li,.edate-container ul{border:0;box-sizing:border-box;list-style:none;margin:0;padding:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.edate-container table,.edate-container tbody,.edate-container td,.edate-container th,.edate-container thead,.edate-container tr{border:0;border-color:transparent;border-spacing:0;box-sizing:border-box;margin:0;padding:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.edate-container table:active,.edate-container table:focus,.edate-container table:focus-visible,.edate-container tbody:active,.edate-container tbody:focus,.edate-container tbody:focus-visible,.edate-container td:active,.edate-container td:focus,.edate-container td:focus-visible,.edate-container th:active,.edate-container th:focus,.edate-container th:focus-visible,.edate-container thead:active,.edate-container thead:focus,.edate-container thead:focus-visible,.edate-container tr:active,.edate-container tr:focus,.edate-container tr:focus-visible{background-color:transparent}.edate-container table{height:100%}.edate-panel{display:flex;flex-direction:column;width:100%}.edate-header{align-items:center;border-bottom:1px solid var(--edate-border-color,rgba(5,5,5,.06));box-sizing:border-box;color:var(--edate-default-color,rgba(0,0,0,.88));display:flex;font-weight:600;height:var(--edate-header-height,34px);justify-content:space-between;line-height:var(--edate-header-height,34px);padding:2px 15px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.edate-header-view{text-align:center;width:40%}.edate-header-title-hover{cursor:pointer;transition:color .2s ease-in-out}.edate-header-title-hover:hover{color:var(--edate-primary-color,#1677ff)}.edate-next-btns,.edate-prev-btns{display:inline-flex;height:var(--edate-header-height,34px);line-height:var(--edate-header-height,34px)}.edate-next-btn,.edate-prev-btn,.edate-super-next-btn,.edate-super-prev-btn{align-items:center;background:0 0;border:0;box-sizing:border-box;color:var(--edate-arrow-color,rgba(0,0,0,.45));cursor:pointer;display:inline-flex;font-size:var(--edate-font-size,14px);height:100%;justify-content:center;line-height:var(--edate-header-height,34px);min-width:1.6em;padding:0;transition:color .2s}.edate-next-btn:not(.edate-disabled):active,.edate-prev-btn:not(.edate-disabled):active,.edate-super-next-btn:not(.edate-disabled):active,.edate-super-prev-btn:not(.edate-disabled):active{color:var(--edate-arrow-hover-color,rgba(0,0,0,.88))}.edate-next-icon,.edate-prev-icon,.edate-super-next-icon,.edate-super-prev-icon{display:inline-flex;height:6px;position:relative;transform:rotate(-45deg);-webkit-user-select:none;-moz-user-select:none;user-select:none;width:6px}.edate-next-icon:before,.edate-prev-icon:before,.edate-super-next-icon:before,.edate-super-prev-icon:before{inset-inline-start:0;top:0}.edate-next-icon:before,.edate-prev-icon:before,.edate-super-next-icon:after,.edate-super-next-icon:before,.edate-super-prev-icon:after,.edate-super-prev-icon:before{border:0 solid;border-block-end-width:0;border-block-start-width:1.5px;border-inline-end-width:0;border-inline-start-width:1.5px;content:"";display:inline-block;height:6px;position:absolute;width:6px}.edate-super-next-icon:after,.edate-super-prev-icon:after{left:-4px;top:-4px}.edate-next-icon,.edate-super-next-icon{transform:rotate(135deg)}.edate-footer{align-items:center;border-bottom:1px solid var(--edate-border-color,rgba(5,5,5,.06));border-left:1px solid var(--edate-border-color,rgba(5,5,5,.06));border-right:1px solid var(--edate-border-color,rgba(5,5,5,.06));box-sizing:border-box;display:flex;height:var(--edate-footer-height,34px);justify-content:space-between;padding:4px 5px}.edate-btn-text,.edate-now,.edate-today{color:var(--edate-primary-color,#1677ff);cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.edate-btn-text:not(.edate-disabled):active,.edate-now:not(.edate-disabled):active,.edate-today:not(.edate-disabled):active{opacity:.75}.edate-close-btn{align-items:center;cursor:pointer;font-size:24px}.edate-close-btn,.edate-close-btn .edate-close-icon{display:inline-flex}.edate-close-btn:active{color:var(--edate-close-color,#f05757)}.edate-btn-text{padding:2px 4px}.edate-btn-text.edate-disabled{color:var(--edate-disabled-color,rgba(0,0,0,.25))!important}.edate-btn{background-image:none;background:transparent;border:1px solid #d9d9d9;border-radius:2px;color:var(--edate-primary-color,#1677ff);cursor:pointer;display:inline-block;font-weight:400;height:20px;line-height:19px;min-width:32px;outline:none;padding:0 4px;position:relative;text-align:center;touch-action:manipulation;transition:all .2s cubic-bezier(.645,.045,.355,1);-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap}.edate-btn.edate-disabled{background-color:var(--edate-disabled-bg-color,rgba(0,0,0,.04))!important;border-color:var(--edate-disabled-color,rgba(0,0,0,.25))!important;color:var(--edate-disabled-color,rgba(0,0,0,.25))!important;cursor:not-allowed!important}.edate-btn-primary{background-color:var(--edate-primary-color,#1677ff);border-color:var(--edate-primary-color,#1677ff);color:#fff}.edate-btn-primary:not(.edate-disabled):active{opacity:.75}.edate-disabled{cursor:not-allowed!important}.edate-disabled:before{background-color:var(--edate-disabled-bg-color,rgba(0,0,0,.04))!important}.edate-disabled:before,.edate-disabled>*{color:var(--edate-disabled-color,rgba(0,0,0,.25))!important;cursor:not-allowed!important}.edate-picker-date .emonth-container,.edate-picker-date .eyear-container,.edate-picker-month .ecalendar-container,.edate-picker-month .eyear-container,.edate-picker-year .ecalendar-container,.edate-picker-year .emonth-container{display:none}.epicker-mobile.edate-picker-container{border-radius:10px;overflow:hidden}.epicker-mobile.edate-picker-container .epicker-body{background-color:#fff;border-top-left-radius:10px;border-top-right-radius:10px;overflow:hidden;padding-bottom:15px}.epicker-mobile.edate-picker-container .epicker-body .edate-panel{border:none}.epicker-mobile.edate-picker-container .epicker-body .edate-header{border-bottom:none;height:44px}.ecalendar{box-sizing:border-box;cursor:unset;line-height:normal;margin:0;padding-left:0;text-align:left}.ecalendar-panel{border:1px solid var(--edate-border-color,rgba(5,5,5,.06));box-sizing:border-box;display:flex;flex-direction:column;width:100%}.ecalendar-body{box-sizing:border-box;color:var(--edate-default-color,rgba(0,0,0,.88));flex:1 1 auto;padding:6px 10px}.ecalendar-content{box-sizing:border-box;width:100%}.ecalendar-content th{height:30px}.ecalendar-content tr td{padding:3px 0}.ecalendar-content tr td:before{content:"";display:block;height:var(--edate-calendar-cell-height,24px);position:absolute;width:100%}.ecalendar-cell{box-sizing:border-box;color:rgba(0,0,0,.25);cursor:pointer;padding:0;position:relative;text-align:center}.ecalendar-cell:not(.edate-disabled):hover .ecalendar-cell-inner{background-color:var(--edate-hover-bg-color,rgba(0,0,0,.04))}.ecalendar-cell-in-view{color:var(--edate-default-color,rgba(0,0,0,.88))}.ecalendar-cell-in-view.ecalendar-cell-selected:not(.edate-disabled) .ecalendar-cell-inner{background-color:var(--edate-primary-color,#1677ff)!important;color:#fff}.ecalendar-cell-in-view.ecalendar-cell-selected:not(.edate-disabled) .ecalendar-badge{background-color:#fff}.ecalendar-cell-in-view.ecalendar-cell-selected.edate-disabled .ecalendar-cell-inner{background-color:var(--edate-disabled-bg-color,rgba(0,0,0,.25))}.ecalendar-cell-in-view.ecalendar-cell-today .ecalendar-cell-inner{border-color:var(--edate-primary-color,#1677ff)}.ecalendar-cell-in-view.ecalendar-cell-today.edate-disabled .ecalendar-cell-inner{border-color:var(--edate-disabled-bg-color,rgba(0,0,0,.25))}.ecalendar-cell-inner{align-items:center;border:1px solid transparent;border-radius:var(--edate-calendar-border-radius,2px);display:inline-flex;height:var(--edate-calendar-cell-height,26px);inset-inline-end:0;inset-inline-start:0;justify-content:center;line-height:var(--edate-calendar-cell-height,26px);padding:0;position:relative;transition:background .2s,border .2s;width:var(--edate-calendar-cell-width,26px);z-index:2}.ecalendar-cell .ecalendar-badge{background-color:var(--edate-primary-color,#1677ff);border-radius:50%;height:3px;left:50%;position:absolute;top:50%;transform:translateX(-50%) translateY(8px);width:3px;z-index:3}.ecalendar-cell.edate-disabled .ecalendar-badge{background-color:var(--edate-disabled-color,rgba(0,0,0,.25))}.epicker-mobile .ecalendar-content tr td{padding:8px 0}.emonth{cursor:unset;line-height:normal}.emonth-panel{background-color:#fff;border:1px solid var(--edate-border-color,rgba(5,5,5,.06));display:flex;flex-direction:column}.emonth-panel .emonth-body{padding:1px 8px}.emonth-panel table{width:100%}.emonth-panel .emonth-cell{height:52px}.emonth-panel .emonth-cell-inner{padding:0 8px}.emonth-body{color:var(--edate-default-color,rgba(0,0,0,.88));padding:0 10px}.emonth-content{width:100%}.emonth-cell{box-sizing:border-box;color:rgba(0,0,0,.25);cursor:pointer;padding:0;position:relative;text-align:center}.emonth-cell:not(.edate-disabled):hover .emonth-cell-inner{background-color:var(--edate-hover-bg-color,rgba(0,0,0,.04))}.emonth-cell:before{content:"";height:22px;inset-inline-end:0;inset-inline-start:0;position:absolute;top:50%;transform:translateY(-50%);transition:all .3s;z-index:1}.emonth-cell-in-view{color:var(--edate-default-color,rgba(0,0,0,.88))}.emonth-cell-in-view.emonth-cell-selected:not(.edate-disabled) .emonth-cell-inner{background-color:var(--edate-primary-color,#1677ff)!important;color:#fff}.emonth-cell-in-view.emonth-cell-selected.edate-disabled .emonth-cell-inner{background-color:var(--edate-disabled-bg-color,rgba(0,0,0,.04))!important}.emonth-cell-inner{border-radius:var(--edate-border-radius,2px);display:inline-block;height:22px;line-height:22px;min-width:22px;position:relative;transition:background .2s,border .2s;z-index:2}.eyear{cursor:unset;line-height:normal}.eyear-layout{align-items:stretch;display:flex;flex-wrap:nowrap}.eyear-panel{background-color:#fff;border:1px solid var(--edate-border-color,rgba(5,5,5,.06));display:flex;flex-direction:column}.eyear-panel .eyear-body{padding:1px 8px}.eyear-panel table{width:100%}.eyear-panel .eyear-cell{height:52px}.eyear-panel .eyear-cell-inner{padding:0 8px}.eyear-body{padding:0 10px}.eyear-cell{box-sizing:border-box;color:rgba(0,0,0,.25);cursor:pointer;padding:0;position:relative;text-align:center}.eyear-cell:not(.edate-disabled):hover .eyear-cell-inner{background-color:var(--edate-hover-bg-color,rgba(0,0,0,.04))}.eyear-cell:before{content:"";height:22px;inset-inline-end:0;inset-inline-start:0;position:absolute;top:50%;transform:translateY(-50%);transition:all .3s;z-index:1}.eyear-cell-in-view{color:var(--edate-default-color,rgba(0,0,0,.88))}.eyear-cell-in-view.eyear-cell-selected:not(.edate-disabled) .eyear-cell-inner{background-color:var(--edate-primary-color,#1677ff);color:#fff}.eyear-cell-in-view.eyear-cell-selected.edate-disabled .eyear-cell-inner{background-color:var(--edate-disabled-bg-color,rgba(0,0,0,.04))}.eyear-cell-inner{border-radius:var(--data-picker-border-radius,2px);display:inline-block;height:22px;line-height:22px;min-width:22px;position:relative;transition:background .2s,border .2s;z-index:2}
+.epicker-body-noscroll{overflow:hidden;touch-action:none}.epicker{box-shadow:0 9px 28px 8px #0000000d;display:none;margin:0;opacity:0;padding:0;position:absolute;transition:opacity .3s ease;vertical-align:top;z-index:1000}.epicker,.epicker-body{box-sizing:border-box;flex-direction:column}.epicker-body{display:flex}.epicker.epicker-mobile .epicker-mask{background:#0000004d;bottom:0;box-sizing:border-box;height:100%;left:0;position:fixed;right:0;top:0;width:100%;z-index:9998}.epicker.epicker-mobile .epicker-body{align-items:center;bottom:0;left:0;position:fixed;right:0;z-index:9999}:root{--edate-header-height:34px;--edate-footer-height:36px;--edate-font-size:14px;--edate-min-width:246px;--edate-border-radius:2px;--edate-bg-color:#fff;--edate-default-color:rgba(0,0,0,.88);--edate-primary-color:#648ffc;--edate-on-primary-color:#fff;--edate-out-view-color:rgba(0,0,0,.25);--edate-hover-color:var(--edate-default-color,rgba(0,0,0,.88));--edate-hover-bg-color:rgba(0,0,0,.04);--edate-active-color:var(--edate-default-color,rgba(0,0,0,.88));--edate-active-bg-color:#e6f4ff;--edate-disabled-color:rgba(0,0,0,.25);--edate-disabled-bg-color:rgba(0,0,0,.04);--edate-disabled-active-bg-color:rgba(0,0,0,.25);--edate-border-color:rgba(5,5,5,.06);--edate-btn-border-color:#d9d9d9;--edate-close-color:#f05757;--edate-arrow-color:rgba(0,0,0,.45);--edate-calendar-border-radius:50%;--edate-calendar-cell-width:26px;--edate-calendar-cell-height:26px;--edate-calendar-weekday-height:30px;--edate-badge-color:var(--edate-primary-color,#648ffc);--edate-badge-size:3px;--edate-month-cell-height:52px;--edate-month-cell-inner-min-width:22px;--edate-month-cell-inner-height:22px;--edate-year-cell-height:52px;--edate-year-cell-inner-min-width:22px;--edate-year-cell-inner-height:22px;--edate-time-column-height:208px;--edate-time-cell-height:30px;--edate-arrow-hover-color:var(--edate-default-color,rgba(0,0,0,.88))}.epicker-mobile .edate-mobile{--edate-hover-bg-color:transparent}.edate-container{background-color:var(--edate-bg-color,#fff);box-sizing:border-box;display:flex;font-size:var(--edate-font-size,14px);max-height:80%;min-width:var(--edate-min-width,246px);text-align:center;width:100%}.edate-container *{-webkit-tap-highlight-color:transparent;border:none;box-sizing:border-box;margin:0;outline:none;padding:0}.edate-container li,.edate-container ul{border:0;box-sizing:border-box;list-style:none;margin:0;padding:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.edate-container table,.edate-container tbody,.edate-container td,.edate-container th,.edate-container thead,.edate-container tr{border:0;border-color:transparent;border-spacing:0;box-sizing:border-box;margin:0;padding:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.edate-container table:active,.edate-container table:focus,.edate-container table:focus-visible,.edate-container tbody:active,.edate-container tbody:focus,.edate-container tbody:focus-visible,.edate-container td:active,.edate-container td:focus,.edate-container td:focus-visible,.edate-container th:active,.edate-container th:focus,.edate-container th:focus-visible,.edate-container thead:active,.edate-container thead:focus,.edate-container thead:focus-visible,.edate-container tr:active,.edate-container tr:focus,.edate-container tr:focus-visible{background-color:transparent}.edate-container table{height:100%}.edate-panel{display:flex;flex-direction:column;width:100%}.edate-header{align-items:center;border-bottom:1px solid var(--edate-border-color,rgba(5,5,5,.06));box-sizing:border-box;color:var(--edate-default-color,rgba(0,0,0,.88));display:flex;font-weight:600;height:var(--edate-header-height,34px);justify-content:space-between;line-height:var(--edate-header-height,34px);padding:2px 15px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.edate-header-view{text-align:center;width:40%}.edate-header-title-hover{cursor:pointer;transition:color .2s ease-in-out}.edate-header-title-hover:hover{color:var(--edate-primary-color,#1677ff)}.edate-next-btns,.edate-prev-btns{display:inline-flex;height:var(--edate-header-height,34px);line-height:var(--edate-header-height,34px)}.edate-next-btn,.edate-prev-btn,.edate-super-next-btn,.edate-super-prev-btn{align-items:center;background:0 0;border:0;box-sizing:border-box;color:var(--edate-arrow-color,rgba(0,0,0,.45));cursor:pointer;display:inline-flex;font-size:var(--edate-font-size,14px);height:100%;justify-content:center;line-height:var(--edate-header-height,34px);min-width:1.6em;padding:0;transition:color .2s}.edate-next-btn:not(.edate-disabled):active,.edate-prev-btn:not(.edate-disabled):active,.edate-super-next-btn:not(.edate-disabled):active,.edate-super-prev-btn:not(.edate-disabled):active{color:var(--edate-arrow-hover-color,rgba(0,0,0,.88))}.edate-next-icon,.edate-prev-icon,.edate-super-next-icon,.edate-super-prev-icon{display:inline-flex;height:6px;position:relative;transform:rotate(-45deg);-webkit-user-select:none;-moz-user-select:none;user-select:none;width:6px}.edate-next-icon:before,.edate-prev-icon:before,.edate-super-next-icon:before,.edate-super-prev-icon:before{inset-inline-start:0;top:0}.edate-next-icon:before,.edate-prev-icon:before,.edate-super-next-icon:after,.edate-super-next-icon:before,.edate-super-prev-icon:after,.edate-super-prev-icon:before{border:0 solid;border-block-end-width:0;border-block-start-width:1.5px;border-inline-end-width:0;border-inline-start-width:1.5px;content:"";display:inline-block;height:6px;position:absolute;width:6px}.edate-super-next-icon:after,.edate-super-prev-icon:after{left:-4px;top:-4px}.edate-next-icon,.edate-super-next-icon{transform:rotate(135deg)}.edate-footer{align-items:center;border-top:1px solid var(--edate-border-color,rgba(5,5,5,.06));box-sizing:border-box;display:flex;font-size:12px;height:var(--edate-footer-height,36px);justify-content:flex-end;padding:6px 8px}.edate-footer .edate-btn+.edate-btn{margin-left:7px}.edate-btn-text,.edate-cancel,.edate-now,.edate-today{color:var(--edate-primary-color,#1677ff);cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.edate-btn-text:not(.edate-disabled):active,.edate-cancel:not(.edate-disabled):active,.edate-now:not(.edate-disabled):active,.edate-today:not(.edate-disabled):active{opacity:.75}.edate-close-btn{align-items:center;cursor:pointer;font-size:24px}.edate-close-btn,.edate-close-btn .edate-close-icon{display:inline-flex}.edate-close-btn:active{color:var(--edate-close-color,#f05757)}.edate-btn-text{padding:2px 4px}.edate-btn-text.edate-disabled{color:var(--edate-disabled-color,rgba(0,0,0,.25))!important}.edate-btn{background-image:none;background:transparent;border:1px solid var(--edate-btn-border-color,#d9d9d9);border-radius:var(--edate-border-radius,2px);color:var(--edate-default-color,#262626);cursor:pointer;display:inline-block;font-size:12px;font-weight:400;height:24px;line-height:23px;min-width:32px;outline:none;padding:0 5px;position:relative;text-align:center;touch-action:manipulation;transition:all .2s cubic-bezier(.645,.045,.355,1);-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap}.edate-btn.edate-disabled{background-color:var(--edate-disabled-bg-color,rgba(0,0,0,.04))!important;border-color:var(--edate-disabled-color,rgba(0,0,0,.25))!important;color:var(--edate-disabled-color,rgba(0,0,0,.25))!important;cursor:not-allowed!important}.edate-btn-primary{background-color:var(--edate-primary-color,#1677ff);border-color:var(--edate-primary-color,#1677ff);color:var(--edate-on-primary-color,#fff)}.edate-btn-primary:not(.edate-disabled):active{opacity:.75}.edate-disabled{cursor:not-allowed!important}.edate-disabled:before{background-color:var(--edate-disabled-bg-color,rgba(0,0,0,.04))!important}.edate-disabled:before,.edate-disabled>*{color:var(--edate-disabled-color,rgba(0,0,0,.25))!important;cursor:not-allowed!important}.edate-picker-date .emonth-container,.edate-picker-date .eyear-container,.edate-picker-month .ecalendar-container,.edate-picker-month .eyear-container,.edate-picker-year .ecalendar-container,.edate-picker-year .emonth-container{display:none}.edate-picker{border-radius:2px;overflow:hidden}.edate-picker .edate-panel{border:none}.epicker-mobile.edate-picker .epicker-body{background-color:var(--edate-bg-color,#fff);border-bottom-left-radius:0;border-bottom-right-radius:0;border-top-left-radius:10px;border-top-right-radius:10px;overflow:hidden;padding-bottom:15px}.epicker-mobile.edate-picker .epicker-body .edate-header{border-bottom:none;height:44px}.ecalendar{box-sizing:border-box;cursor:unset;line-height:normal;margin:0;padding-left:0;text-align:left}.ecalendar-panel{border:1px solid var(--edate-border-color,rgba(5,5,5,.06));box-sizing:border-box;display:flex;flex-direction:column;width:100%}.ecalendar-body{box-sizing:border-box;color:var(--edate-default-color,rgba(0,0,0,.88));flex:1 1 auto;padding:6px 10px}.ecalendar-content{box-sizing:border-box;width:100%}.ecalendar-content th{height:var(--edate-calendar-weekday-height,30px)}.ecalendar-content tr td{padding:3px 0}.ecalendar-content tr td:before{content:"";display:block;height:var(--edate-calendar-cell-height,24px);position:absolute;width:100%}.ecalendar-cell{box-sizing:border-box;color:var(--edate-out-view-color,rgba(0,0,0,.25));cursor:pointer;padding:0;position:relative;text-align:center}.ecalendar-cell:not(.edate-disabled):hover .ecalendar-cell-inner{background-color:var(--edate-hover-bg-color,rgba(0,0,0,.04))}.ecalendar-cell-in-view{color:var(--edate-default-color,rgba(0,0,0,.88))}.ecalendar-cell-in-view.ecalendar-cell-selected:not(.edate-disabled) .ecalendar-cell-inner{background-color:var(--edate-primary-color,#1677ff)!important;color:var(--edate-on-primary-color,#fff)}.ecalendar-cell-in-view.ecalendar-cell-selected:not(.edate-disabled) .ecalendar-badge{background-color:var(--edate-on-primary-color,#fff)}.ecalendar-cell-in-view.ecalendar-cell-selected.edate-disabled .ecalendar-cell-inner{background-color:var(--edate-disabled-bg-color,rgba(0,0,0,.25))}.ecalendar-cell-in-view.ecalendar-cell-today .ecalendar-cell-inner{border-color:var(--edate-primary-color,#1677ff)}.ecalendar-cell-in-view.ecalendar-cell-today.edate-disabled .ecalendar-cell-inner{border-color:var(--edate-disabled-bg-color,rgba(0,0,0,.25))}.ecalendar-cell-inner{align-items:center;border:1px solid transparent;border-radius:var(--edate-calendar-border-radius,2px);display:inline-flex;height:var(--edate-calendar-cell-height,26px);inset-inline-end:0;inset-inline-start:0;justify-content:center;line-height:var(--edate-calendar-cell-height,26px);padding:0;position:relative;transition:background .2s,border .2s;width:var(--edate-calendar-cell-width,26px);z-index:2}.ecalendar-cell .ecalendar-badge{background-color:var(--edate-badge-color,#1677ff);border-radius:50%;height:var(--edate-badge-size,3px);left:50%;position:absolute;top:50%;transform:translateX(-50%) translateY(8px);width:var(--edate-badge-size,3px);z-index:3}.ecalendar-cell.edate-disabled .ecalendar-badge{background-color:var(--edate-disabled-color,rgba(0,0,0,.25))}.epicker-mobile .ecalendar-content tr td{padding:8px 0}.emonth{cursor:unset;line-height:normal}.emonth-panel{background-color:#fff;border:1px solid var(--edate-border-color,rgba(5,5,5,.06));display:flex;flex-direction:column}.emonth-panel .emonth-body{padding:1px 8px}.emonth-panel table{width:100%}.emonth-panel .emonth-cell{height:var(--edate-month-cell-height,52px)}.emonth-panel .emonth-cell-inner{padding:0 8px}.emonth-body{color:var(--edate-default-color,rgba(0,0,0,.88));padding:0 10px}.emonth-content{width:100%}.emonth-cell{box-sizing:border-box;color:var(--edate-out-view-color,rgba(0,0,0,.25));cursor:pointer;padding:0;position:relative;text-align:center}.emonth-cell:not(.edate-disabled):hover .emonth-cell-inner{background-color:var(--edate-hover-bg-color,rgba(0,0,0,.04))}.emonth-cell:before{content:"";height:var(--edate-month-cell-inner-height,22px);inset-inline-end:0;inset-inline-start:0;position:absolute;top:50%;transform:translateY(-50%);transition:all .3s;z-index:1}.emonth-cell-in-view{color:var(--edate-default-color,rgba(0,0,0,.88))}.emonth-cell-in-view.emonth-cell-selected:not(.edate-disabled) .emonth-cell-inner{background-color:var(--edate-primary-color,#1677ff)!important;color:var(--edate-on-primary-color,#fff)}.emonth-cell-in-view.emonth-cell-selected.edate-disabled .emonth-cell-inner{background-color:var(--edate-disabled-bg-color,rgba(0,0,0,.04))!important}.emonth-cell-inner{border-radius:var(--edate-border-radius,2px);display:inline-block;height:var(--edate-month-cell-inner-height,22px);line-height:var(--edate-month-cell-inner-height,22px);min-width:var(--edate-month-cell-inner-min-width,22px);position:relative;transition:background .2s,border .2s;z-index:2}.eyear{cursor:unset;line-height:normal}.eyear-layout{align-items:stretch;display:flex;flex-wrap:nowrap}.eyear-panel{background-color:#fff;border:1px solid var(--edate-border-color,rgba(5,5,5,.06));display:flex;flex-direction:column}.eyear-panel .eyear-body{padding:1px 8px}.eyear-panel table{width:100%}.eyear-panel .eyear-cell{height:var(--edate-year-cell-height,52px)}.eyear-panel .eyear-cell-inner{padding:0 8px}.eyear-body{padding:0 10px}.eyear-cell{box-sizing:border-box;color:var(--edate-out-view-color,rgba(0,0,0,.25));cursor:pointer;padding:0;position:relative;text-align:center}.eyear-cell:not(.edate-disabled):hover .eyear-cell-inner{background-color:var(--edate-hover-bg-color,rgba(0,0,0,.04))}.eyear-cell:before{content:"";height:var(--edate-year-cell-inner-height,22px);inset-inline-end:0;inset-inline-start:0;position:absolute;top:50%;transform:translateY(-50%);transition:all .3s;z-index:1}.eyear-cell-in-view{color:var(--edate-default-color,rgba(0,0,0,.88))}.eyear-cell-in-view.eyear-cell-selected:not(.edate-disabled) .eyear-cell-inner{background-color:var(--edate-primary-color,#1677ff);color:var(--edate-on-primary-color,#fff)}.eyear-cell-in-view.eyear-cell-selected.edate-disabled .eyear-cell-inner{background-color:var(--edate-disabled-bg-color,rgba(0,0,0,.04))}.eyear-cell-inner{border-radius:var(--edate-border-radius,2px);display:inline-block;height:var(--edate-year-cell-inner-height,22px);line-height:var(--edate-year-cell-inner-height,22px);min-width:var(--edate-year-cell-inner-min-width,22px);position:relative;transition:background .2s,border .2s;z-index:2}.epicker-mobile .etime-container{padding-bottom:env(safe-area-inset-bottom)}.etime-container{max-height:unset;min-width:unset}.etime-panel{border:1px solid var(--edate-border-color,rgba(5,5,5,.06));display:flex;flex-direction:column}.etime-body{display:flex;flex-direction:row;width:100%}.etime-header{justify-content:center}.etime-column{-webkit-tap-highlight-color:transparent;border-inline-start:1px solid var(--edate-border-color,rgba(5,5,5,.06));box-sizing:border-box;flex:1 1 33.33333%;overflow:hidden;position:relative;touch-action:none;width:33.33333%}.etime-column:first-child{border-inline-start:0}.etime-track{backface-visibility:hidden;-webkit-backface-visibility:hidden;list-style:none;margin:1px 0;padding:0;transform:translateY(0);will-change:transform}.etime-track li{box-sizing:border-box;margin:0;padding:0;width:100%}.etime-cell{position:relative}.etime-cell:before{border-radius:4px;content:"";cursor:pointer;height:100%;position:absolute;width:100%;z-index:-1}.etime-cell .etime-cell-inner{box-sizing:border-box;color:var(--edate-default-color,rgba(0,0,0,.88));cursor:pointer;display:inline-block;margin:0;padding-left:4px;padding-right:4px;transition:background .2s;width:100%}.etime-cell-selected:not(.edate-disabled) div{background-color:var(--edate-active-bg-color,#f0f7ff);color:var(--edate-active-color,rgba(0,0,0,.88))}.etime-cell-selected.edate-disabled div{background-color:var(--edate-disabled-bg-color,rgba(0,0,0,.04))}.etime-cell:not(.edate-disabled) .etime-cell-inner:hover{background-color:var(--edate-hover-bg-color,rgba(0,0,0,.04));color:var(--edate-hover-color,rgba(0,0,0,.88))}.etime-picker{border-radius:2px;overflow:hidden}.etime-picker .etime-panel{border:none}.etime-picker .etime-container{width:160px}

package/dist/style/style.js

@@ -1,6 +1,6 @@
 /*
-* @ezuikit/control-date-picker v2.0.0-beta.3
-* Copyright (c) 2026-05-04 Ezviz-OpenBiz
+* @ezuikit/control-date-picker v2.1.0-beta.1
+* Copyright (c) 2026-06-24 Ezviz-OpenBiz
 * Released under the MIT License.
 */
 require("./style.css");

package/dist/style/time/index.scss

@@ -0,0 +1,127 @@
+// @use "~@common/components/dist/style/_style.scss" as common;
+// @use "~@skax/picker/dist/style/_style.scss" as picker;
+
+@use '../style/_style.scss' as common;
+@use '@skax/picker/dist/style/style.scss' as picker;
+
+$time-prefix-cls: etime;
+
+.#{picker.$picker-prefix}-mobile .#{$time-prefix-cls}-container {
+  padding-bottom: #{'constant(safe-area-inset-bottom)'}; /*兼容 IOS<11.2*/
+  padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
+}
+
+.#{$time-prefix-cls} {
+  &-container {
+    min-width: unset;
+    max-height: unset;
+  }
+
+  &-panel {
+    display: flex;
+    flex-direction: column;
+    border: 1px solid var(--edate-border-color, rgba(5, 5, 5, 0.06));
+  }
+
+  &-body {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+  }
+
+  &-header {
+    justify-content: center;
+  }
+
+  // 列视口：定高裁剪容器，纵向平移由 JS 通过 transform 接管（无原生滚动）
+  &-column {
+    position: relative;
+    flex: 1 1 33.33333%;
+    width: 33.33333%;
+    overflow: hidden;
+    box-sizing: border-box;
+    border-inline-start: 1px solid var(--edate-border-color, rgba(5, 5, 5, 0.06));
+    // 由 JS 接管纵向平移，禁用浏览器默认手势滚动，避免移动端冲突
+    touch-action: none;
+    -webkit-tap-highlight-color: transparent;
+
+    &:first-child {
+      border-inline-start: 0;
+    }
+  }
+
+  // 平移轨道：承载单元格，整体被 translateY 平移
+  &-track {
+    list-style: none;
+    margin: 1px 0;
+    padding: 0;
+    transform: translateY(0);
+    // 丝滑 & 兼容性：提示合成层 + 减少子像素抖动
+    will-change: transform;
+    backface-visibility: hidden;
+    -webkit-backface-visibility: hidden;
+
+    li {
+      margin: 0;
+      // 单元格平分/铺满所在列宽
+      width: 100%;
+      box-sizing: border-box;
+      padding: 0px;
+    }
+  }
+
+  &-cell {
+    position: relative;
+
+    &::before {
+      content: '';
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      z-index: -1;
+      border-radius: 4px;
+      cursor: pointer;
+    }
+  }
+
+  &-cell &-cell-inner {
+    display: inline-block;
+    margin: 0;
+    color: var(--edate-default-color, rgba(0, 0, 0, 0.88));
+    cursor: pointer;
+    transition: background 0.2s;
+    box-sizing: border-box;
+    padding-left: 4px;
+    padding-right: 4px;
+    width: 100%;
+  }
+
+  &-cell-selected:not(.#{common.$disabled}) div {
+    background-color: var(--edate-active-bg-color, #f0f7ff);
+    color: var(--edate-active-color, rgba(0, 0, 0, 0.88));
+  }
+
+  &-cell-selected.#{common.$disabled} div {
+    background-color: var(--edate-disabled-bg-color, rgba(0, 0, 0, 0.04));
+  }
+
+  &-cell:not(.#{common.$disabled}) .#{$time-prefix-cls}-cell-inner {
+    &:hover {
+      color: var(--edate-hover-color, rgba(0, 0, 0, 0.88));
+      background-color: var(--edate-hover-bg-color, rgba(0, 0, 0, 0.04));
+    }
+  }
+
+  &-picker {
+    border-radius: 2px;
+    overflow: hidden;
+
+    .#{$time-prefix-cls}-panel {
+      border: none;
+    }
+
+    .#{$time-prefix-cls}-container {
+      width: 160px;
+    }
+  }
+}

package/dist/style/year/index.scss

@@ -26,7 +26,7 @@
     }
 
     & .#{common.$eyear-prefix-cls}-cell {
-      height: 52px;
+      height: var(--edate-year-cell-height, 52px);
     }
 
     & .#{common.$eyear-prefix-cls}-cell-inner {
@@ -49,7 +49,7 @@
     padding: 0px 0;
     cursor: pointer;
     text-align: center;
-    color: rgba(0, 0, 0, 0.25);
+    color: var(--edate-out-view-color, rgba(0, 0, 0, 0.25));
     box-sizing: border-box;
 
     &:not(.#{common.$disabled}):hover &-inner {
@@ -62,7 +62,7 @@
       inset-inline-start: 0;
       inset-inline-end: 0;
       z-index: 1;
-      height: 22px;
+      height: var(--edate-year-cell-inner-height, 22px);
       transform: translateY(-50%);
       transition: all 0.3s;
       content: '';
@@ -73,7 +73,7 @@
 
       &.#{common.$eyear-prefix-cls}-cell-selected:not(.#{common.$disabled}) .#{common.$eyear-prefix-cls}-cell-inner {
         background-color: var(--edate-primary-color, #1677ff);
-        color: #fff;
+        color: var(--edate-on-primary-color, #fff);
       }
       &.#{common.$eyear-prefix-cls}-cell-selected.#{common.$disabled} .#{common.$eyear-prefix-cls}-cell-inner {
         background-color: var(--edate-disabled-bg-color, rgba(0, 0, 0, 0.04));
@@ -84,10 +84,10 @@
       position: relative;
       z-index: 2;
       display: inline-block;
-      min-width: 22px;
-      height: 22px;
-      line-height: 22px;
-      border-radius: var(--data-picker-border-radius, 2px);
+      min-width: var(--edate-year-cell-inner-min-width, 22px);
+      height: var(--edate-year-cell-inner-height, 22px);
+      line-height: var(--edate-year-cell-inner-height, 22px);
+      border-radius: var(--edate-border-radius, 2px);
       transition:
         background 0.2s,
         border 0.2s;

package/dist/types/index.d.ts

@@ -1,4 +1,5 @@
 import { DateTime } from '@ezuikit/utils-tools';
+import { DelegateEvent } from '@skax/delegate';
 import Picker, { PickerOptions } from '@skax/picker';
 
 interface CalendarLocale {
@@ -8,6 +9,10 @@ interface CalendarLocale {
     months: string[];
     today: string;
     ok: string;
+    /** 时间选择「此刻」文案 */
+    now: string;
+    /** 时间选择「取消」文案 */
+    cancel: string;
 }
 
 /**
@@ -135,6 +140,8 @@ interface HeaderOptions {
 declare class Header {
     options: Required<HeaderOptions>;
     $header: HTMLElement | null;
+    /** 头部内部事件委托集合，destroy 时统一解绑（修复监听泄漏 P0）。 */
+    private _delegations;
     constructor(options: HeaderOptions);
     private _render;
     private _getStrOrFunToStr;
@@ -228,6 +235,12 @@ declare class Container<T extends ContainerOptions> {
      * header.
      */
     header: Header | null;
+    /**
+     * 该容器注册的事件委托集合，destroy 时统一解绑（修复监听泄漏 P0）。
+     */
+    protected _delegations: Array<{
+        destroy: () => void;
+    }>;
     /**
      * The locale object for the current language.
      */
@@ -239,6 +252,12 @@ declare class Container<T extends ContainerOptions> {
      * @returns {void}
      */
     private _setLocale;
+    /**
+     * 注册事件委托并登记，便于 destroy 统一解绑（修复 delegate 监听不解绑导致的泄漏 P0）。
+     * 子类应使用本方法替代直接调用 delegate。
+     * @returns {{ destroy: () => void }} delegate 句柄
+     */
+    protected _delegate(el: Element, selector: string, type: string, cb: (e: DelegateEvent) => void, useCapture?: boolean): any;
     /**
      * destroy content node
      * @example
@@ -589,7 +608,7 @@ declare class Month extends Container<MonthOptions> {
 /**
  * 年历 （12 年）配置项
  */
-interface YearOptions extends Omit<ContainerOptions, 'showPrevIcon' | 'showNextIcon' | 'renderPrevIcon' | 'renderNextIcon'> {
+interface YearOptions extends Omit<ContainerOptions, 'prefixCls' | 'showPrevIcon' | 'showNextIcon' | 'renderPrevIcon' | 'renderNextIcon'> {
     /** 当前时间 或当前年份 */
     current?: Date | number;
     /** 是否展示头部, 默认 true */
@@ -812,5 +831,185 @@ declare class DatePicker extends Picker {
     private _removeCurrentTypeClass;
 }
 
-export { Calendar, DatePicker, Header, Month, Year };
-export type { CalendarLocale, CalendarOptions, ContainerOptions, DatePickerModeType, DatePickerOptions, HeaderOptions, MonthOptions, PopupContainerEle, YearOptions };
+/**
+ * @zh 时间选择器配置
+ * @en time options
+ */
+interface TimeOptions extends ContainerOptions {
+    /** 当前时分秒 00:00:00 */
+    current?: string;
+    /** 自定义行高， 默认 208px */
+    columnHeight?: number;
+    /** 自定义行宽， 默认 120 */
+    width?: number;
+    /** 自定义cell高， 默认 30 */
+    cellHeight?: number;
+    /** 是否显示头部, 默认 true */
+    showHeader?: boolean;
+    /** 是否显示底部, 默认 true */
+    showFooter?: boolean;
+    /** 是否显示底部「取消」按钮，默认 false */
+    showCancel?: boolean;
+    /** 是否显示底部「确定」按钮，默认 false */
+    showOk?: boolean;
+    /** 禁用小时, true 禁用小时 */
+    disabledHour?: (time: number) => boolean;
+    /** 禁用分钟, true 禁用分钟 */
+    disabledMinute?: (time: number) => boolean;
+    /** 禁用秒, true 禁用秒 */
+    disabledSecond?: (time: number) => boolean;
+    /** 点击 单元格 cell  */
+    onCell?: (type: string, time: string, times: string[]) => void;
+    /** time 变换后 */
+    onChange?: (type: string, time: string, times: string[]) => void;
+    /** 点击底部「取消」回调 */
+    onCancel?: () => void;
+}
+/**
+ * 时分秒控件
+ *
+ * 滚动交互采用 **CSS transform: translateY 平移**（不依赖原生 overflow 滚动）：
+ *  - 鼠标滚轮：实时跟随平移，停止后吸附到最近单元格；
+ *  - 点击单元格：选中并平移到列顶部；
+ *  - 移动端：触摸拖拽平移 + 抬手惯性吸附；
+ *  - 平移过渡使用 transform + transition，开启 will-change 保证丝滑；
+ *  - 事件监听做被动模式能力检测，兼容主流浏览器与旧环境。
+ */
+declare class Time extends Container<TimeOptions> {
+    options: Required<TimeOptions>;
+    private _current;
+    /** 已绑定的平移事件清理函数集合，destroy 时统一解绑 */
+    private _panCleanups;
+    constructor(container: PopupContainerEle, options: TimeOptions);
+    /**
+     * 获取时分秒数组 ["21", "30", "37"]
+     * @returns {[string, string, string]}
+     */
+    get _currentTimes(): string[];
+    /**
+     * 获取当前时间
+     * @returns {string} "00:00:00"
+     */
+    get current(): string | undefined;
+    /**
+     * set current time
+     * @param {string | [string, string, string]} time 设置激活时间
+     */
+    setCurrent(time?: string | [string, string, string]): void;
+    /**
+     * 销毁：先解绑平移事件再销毁容器。
+     */
+    destroy(): void;
+    private _events;
+    /** 当前三列（视口）元素 */
+    private get _columns();
+    /** 取某列内的轨道（被平移的 ul） */
+    private _trackOf;
+    /** 测量单元格高度：优先取真实渲染高度，无布局（如测试 / 样式未加载）时回退到选项值 */
+    private _measureCellHeight;
+    /** 单元格最大索引（用于钳制平移范围） */
+    private _maxIndex;
+    private _clamp;
+    /** 读取轨道当前平移量（px，<=0） */
+    private _getTrackOffset;
+    /**
+     * 设置轨道平移量并钳制到合法区间 [-(maxIndex*cellH), 0]。
+     * @param smooth 是否启用过渡动画（点击 / 吸附为 true；拖拽 / 滚轮跟随为 false）
+     */
+    private _setTrackOffset;
+    /** 把指定单元格平移到列顶部 */
+    private _panCellToTop;
+    /** 吸附到最近的单元格边界 */
+    private _snapColumn;
+    /**
+     * 根据当前时间把各列选中项平移到顶部。
+     * @param behavior 'smooth' 带过渡（默认）；'auto' 立即定位（用于首帧）
+     * @private 内部方法：由 setCurrent / 构造 / 点击等流程驱动，不对外暴露
+     */
+    private activeItem;
+    /** 被动监听能力检测（兼容旧浏览器；支持时用 {passive:false} 以允许 preventDefault） */
+    private _supportsPassive;
+    private _bindPanEvents;
+    /** 鼠标滚轮：实时跟随平移，停止后吸附 */
+    private _bindColumnWheel;
+    /** 触摸拖拽（移动端）：拖动跟随 + 抬手惯性吸附 */
+    private _bindColumnTouch;
+    private _render;
+    /**
+     * 渲染底部 footer（取消 / 确定），默认不展示（showCancel / showOk 均为 false）。
+     * @private
+     */
+    private _renderFooter;
+    private _renderTimeBody;
+    /**
+     * 生成时分秒列：外层 .etime-column 为定高视口（overflow hidden），
+     * 内层 .etime-track（ul）承载单元格并被 transform 平移。
+     * @param { "hour" | "minute" | "second"} type
+     * @param {string[]} times 时间数组
+     * @returns {string} 列 dom 字符串
+     */
+    private _generateList;
+    /**
+     * 检查时分秒格式化是否正确
+     * @param {string | [string, string, string]} time 时间字符串 HH:mm:ss
+     * @returns {boolean} true 正确 false 不正确
+     */
+    private _checkTimeFmt;
+}
+
+/**
+ * TimePicker 配置。footer（取消 / 确定）能力来自内嵌 `Time`：
+ * `showCancel` / `showOk` / `onOk` / `onCancel` 透传给 Time，弹层默认展示 footer。
+ */
+interface TimePickerOptions extends PickerOptions, Omit<TimeOptions, 'onOk' | 'onChange'> {
+    /** 点击底部「确定」回调，参数为当前时间 HH:mm:ss */
+    onOk?: (time: string) => void;
+    /**
+     *
+     * @param type
+     * @param time
+     * @param times
+     * @returns
+     */
+    onChange: (time: string, times: string[]) => void;
+}
+/**
+ * 时分秒选择弹层
+ *
+ * 在 `Time` 面板外层包一层 `@skax/picker` 弹层，提供触发、定位与显隐控制。
+ * `Time` 面板在弹层首次打开时懒创建并挂载到 `this.$body`；footer 的「取消 / 确定」
+ * 由 `Time` 渲染，TimePicker 仅在其回调中补充「关闭弹层」行为。
+ */
+declare class TimePicker extends Picker {
+    options: TimePickerOptions;
+    /** 内嵌时分秒面板，弹层首次打开时懒创建 */
+    time: Time | null;
+    private _current;
+    constructor(container: HTMLElement | (() => HTMLElement) | null, options: TimePickerOptions);
+    /**
+     * 获取当前时间
+     * @returns {string} "00:00:00"
+     */
+    get current(): string;
+    /**
+     * set current time
+     * @param {string | [string, string, string]} time 设置激活时间
+     */
+    setCurrent(time?: string | [string, string, string]): void;
+    /**
+     * 收起弹层
+     */
+    hide(): void;
+    /**
+     * 销毁：先销毁内嵌面板再销毁弹层。
+     */
+    destroy(): void;
+    /**
+     * Picker 的 onOpenChange，在 open=true 时懒创建面板（含 footer）并定位到选中时间。
+     * @param {boolean} open
+     */
+    protected _onOpenChange(open: boolean): void;
+}
+
+export { Calendar, DatePicker, Header, Month, Time, TimePicker, Year };
+export type { CalendarLocale, CalendarOptions, ContainerOptions, DatePickerModeType, DatePickerOptions, HeaderOptions, MonthOptions, PopupContainerEle, TimeOptions, TimePickerOptions, YearOptions };

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@ezuikit/control-date-picker",
-  "version": "2.0.0-beta.3",
+  "version": "2.1.0-beta.1",
   "description": "date picker control for ezviz",
   "title": "date-picker",
   "main": "dist/index.cjs",
-  "module": "dist/index.mjs",
+  "module": "dist/index.esm.js",
   "types": "dist/types/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/types/index.d.ts",
-      "import": "./dist/index.mjs",
+      "import": "./dist/index.esm.js",
       "require": "./dist/index.cjs",
       "default": "./dist/index.cjs"
     },