Appearance
DatePicker 日期选择器
*UI备注
此模块为须严格遵守设计规范的模块
日期选择器用于选择和展示日期、时间及日期区间等信息。支持多种选择模式（年份、月份、日期、日期时间、日期区间），适用于各种日期相关的交互场景。
CSS样式
全部date-picker样式代码：
查看代码
css
/* HnuiIcon */
@import url('./icon.css');
/* 全局css变量 */
:root {
/* #region vars-BrandColor */
/* 品牌色 */
--hnui-brand-color: #1f78ff;
--hnui-brand-color1: #005ce5;
--hnui-brand-color2: #4b83f7;
--hnui-brand-color3: #3384ff;
--hnui-brand-color4: #599bff;
--hnui-brand-color5: #80b2ff;
--hnui-brand-color6: #b2d1ff;
--hnui-brand-color7: #cce0ff;
--hnui-brand-color8: #d9e8ff;
--hnui-brand-color9: #ebf3ff;
--hnui-brand-color10: #f2f7ff;
/* 状态颜色 */
--hnui-brand-color-normal: var(--hnui-brand-color);
--hnui-brand-color-hover: var(--hnui-brand-color3);
--hnui-brand-color-active: var(--hnui-brand-color1);
--hnui-brand-color-elected: var(--hnui-brand-color9);
--hnui-brand-color-disabled: var(--hnui-brand-color7);
--hnui-brand-color-disabled-border: var(--hnui-brand-color6);
--hnui-brand-color-disabled-bg: var(--hnui-brand-color10);
/* #endregion vars-BrandColor */
/* #region vars-DomainColor */
/* 功能色 */
--hnui-success-color: #2ba471;
--hnui-success-hover-color: #51bd90;
--hnui-success-active-color: #2ba471;
--hnui-warning-color: #faad14;
--hnui-warning-hover-color: #ffc146;
--hnui-warning-active-color: #db960b;
--hnui-danger-color: #ff4d4d;
--hnui-danger-hover-color: #ff7676;
--hnui-danger-active-color: #d82a2a;
--hnui-info-color: #8d97a6;
--hnui-info-hover-color: #b2b7c0;
--hnui-info-active-color: #707a89;
/* #endregion vars-DomainColor */
/* #region vars-NeutralColor */
/* 中性色 */
/* 标题文字 */
--hnui-neutral-color-1: #2d2e33;
/* 正文、重要信息文字、按钮文字、输入框正常状态文字等 */
--hnui-neutral-color-2: #43454d;
/* 内容文字、说明叙述文字 */
--hnui-neutral-color-3: #5d606a;
/* 提示性文字、辅助文本 */
--hnui-neutral-color-4: #9298a0;
/* 禁用文本 */
--hnui-neutral-color-5: #b7bdc7;
/* 描边格描边、输入文本描边、下拉选择描边等 */
--hnui-neutral-color-6: #dfe2e7;
/* 全局背景、禁用状态、分割线等 */
--hnui-neutral-color-7: #f0f2f5;
/* 最低颜色等 */
--hnui-neutral-color-8: #fafbfc;
/* #endregion vars-NeutralColor */
/* 默认文字颜色 */
--hnui-text-color: var(--hnui-neutral-color-2);
--hnui-info-bg: #eceff4;
--hnui-info-bg2: #e7e7e7;
--hnui-color-white: #fff;
--hnui-color-black: #000;
--hnui-border-width: 1px;
--hnui-border-dashed-width: 2px;
--hnui-border-color: var(--hnui-neutral-color-6);
--hnui-disabled-bg-color: var(--hnui-neutral-color-7);
--hnui-disabled-color: var(--hnui-neutral-color-5);
--hnui-control-height: 32px;
--hnui-control-height-sm: 24px;
--hnui-control-height-lg: 40px;
--hnui-control-transparent: transparent;
}
.dark {
--hnui-brand-color6: rgb(50, 59, 74);
--hnui-brand-color7: #30353d;
--hnui-brand-color8: #42484f;
--hnui-brand-color9: #4c4f54;
--hnui-brand-color10: #29292c;
/* 中性色 */
/* 标题文字 */
--hnui-neutral-color-1: #c4c8dc;
/* 正文、重要信息文字、按钮文字、输入框正常状态文字等 */
--hnui-neutral-color-2: #b9bed3;
/* 内容文字、说明叙述文字 */
--hnui-neutral-color-3: #afb5c7;
/* 提示性文字、辅助文本 */
--hnui-neutral-color-4: #6a6f75;
/* 禁用文本 */
--hnui-neutral-color-5: #53565b;
/* 描边格描边、输入文本描边、下拉选择描边等 */
--hnui-neutral-color-6: #59595a;
/* 全局背景、禁用状态、分割线等 */
--hnui-neutral-color-7: #343535;
/* 最低颜色等 */
--hnui-neutral-color-8: #151516;
--hnui-info-bg: #393b3d;
--hnui-color-white: #000;
--hnui-color-black: #fff;
--hnui-control-transparent: transparent;
}
*,
::before,
::after {
box-sizing: border-box;
}
body {
color: var(--hnui-neutral-color-2);
}
/* #region vars-FontFamily */
@font-face {
font-family: 'DIN';
src: url('/fonts/D-DIN-PRO/D-DIN-PRO.woff2') format('woff2'),
url('/fonts/D-DIN-PRO/D-DIN-PRO.woff') format('woff'),
url('/fonts/D-DIN-PRO/D-DIN-PRO.ttf') format('truetype'),
url('/fonts/D-DIN-PRO/D-DIN-PRO.eot') format('embedded-opentype'),
url('/fonts/D-DIN-PRO/D-DIN-PRO.svg') format('svg');
font-weight: normal;
font-style: normal;
}
/* 使用数字字体 */
.use-font {
font-family: DIN;
}
/* #endregion vars-FontFamily */
/* #region vars-BoxShadow */
/* 一级投影（默认向下） */
.hnui-box-shadow {
box-shadow: 0px 6px 16px 6px rgba(0, 0, 0, 0.18);
}
.hnui-box-shadow.hover,
.hnui-box-shadow:hover {
box-shadow: 0px 6px 16px 6px rgba(31, 120, 255, 0.18);
}
/* 二级投影（默认向下） */
.hnui-box-shadow_l2 {
box-shadow: 0px 6px 16px 6px rgba(0, 0, 0, 0.12);
}
.hnui-box-shadow_l2.hover,
.hnui-box-shadow_l2:hover {
box-shadow: 0px 6px 16px 6px rgba(31, 120, 255, 0.12);
}
/* 三级投影（默认向下） */
.hnui-box-shadow_l3 {
box-shadow: 0px 6px 16px 6px rgba(0, 0, 0, 0.06);
}
.hnui-box-shadow_l3.hover,
.hnui-box-shadow_l3:hover {
box-shadow: 0px 6px 16px 6px rgba(31, 120, 255, 0.06);
}
/* #endregion vars-BoxShadow */css
/* DatePicker 基础容器 */
.hnui-date-picker {
display: inline-block;
width: 100%;
max-width: 300px;
}
/* DatePicker 输入框 */
.hnui-date-picker-input {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
height: 32px;
padding: 0 12px;
border: 1px solid var(--hnui-border-color);
border-radius: 3px;
font-size: 14px;
line-height: 22px;
background-color: transparent;
color: var(--hnui-text-color);
cursor: pointer;
transition: all 0.2s cubic-bezier(0.38, 0, 0.24, 1);
box-sizing: border-box;
}
.hnui-date-picker-input:hover {
border-color: var(--hnui-brand-color-normal);
}
.hnui-date-picker-input:focus,
.hnui-date-picker-input.hnui-date-picker-focus,
.hnui-date-picker.hnui-date-picker-show .hnui-date-picker-input {
outline: none;
border-color: var(--hnui-brand-color-normal);
box-shadow: 0 0 0 2px rgba(31, 120, 255, 0.1);
}
.hnui-date-picker-input:disabled,
.hnui-date-picker-input.hnui-date-picker-disabled {
background-color: var(--hnui-disabled-bg-color);
color: var(--hnui-disabled-color);
border-color: var(--hnui-border-color);
cursor: not-allowed;
}
/* DatePicker 图标 */
.hnui-date-picker-icon {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 14px;
line-height: 1;
flex-shrink: 0;
color: var(--hnui-neutral-color-4);
}
.hnui-date-picker-input:hover .hnui-date-picker-icon {
color: var(--hnui-text-color);
}
.hnui-date-picker-input.hnui-date-picker-disabled .hnui-date-picker-icon {
color: var(--hnui-disabled-color);
}
/* DatePicker 占位符文本 */
.hnui-date-picker-placeholder {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--hnui-neutral-color-4);
}
/* DatePicker 值文本 */
.hnui-date-picker-value {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* DatePicker 清除按钮 */
.hnui-date-picker-clear {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
padding: 0;
margin: 0;
background: none;
border: none;
font-size: 14px;
color: var(--hnui-neutral-color-4);
cursor: pointer;
transition: opacity 0.2s;
flex-shrink: 0;
line-height: 1;
}
.hnui-date-picker-clear:hover {
color: var(--hnui-text-color);
opacity: 0.7;
}
.hnui-date-picker-input.hnui-date-picker-disabled .hnui-date-picker-clear {
cursor: not-allowed;
color: var(--hnui-disabled-color);
}
/* DatePicker 弹出层 */
.hnui-date-picker-panel {
background-color: transparent;
border: 1px solid var(--hnui-border-color);
border-radius: 6px;
padding: 12px;
box-sizing: border-box;
margin-top: 8px;
display: none;
}
.hnui-date-picker-panel.hnui-date-picker-panel-show {
display: block;
}
/* Demo专用：展示打开状态 */
.hnui-date-picker.hnui-date-picker-show .hnui-date-picker-panel {
display: block;
}
/* DatePicker 面板头 */
.hnui-date-picker-panel-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 0 12px 0;
border-bottom: 1px solid var(--hnui-neutral-color-7);
margin-bottom: 12px;
}
.hnui-date-picker-panel-title {
font-size: 14px;
font-weight: 500;
color: var(--hnui-text-color);
}
.hnui-date-picker-panel-nav {
display: flex;
align-items: center;
gap: 4px;
}
.hnui-date-picker-panel-nav-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
padding: 0;
margin: 0;
background: none;
border: 1px solid transparent;
border-radius: 3px;
font-size: 12px;
color: var(--hnui-text-color);
cursor: pointer;
transition: all 0.2s;
}
.hnui-date-picker-panel-nav-btn:hover {
border-color: var(--hnui-border-color);
background-color: var(--hnui-neutral-color-7);
}
.hnui-date-picker-panel-nav-btn:active {
background-color: var(--hnui-brand-color9);
border-color: var(--hnui-brand-color-normal);
}
/* DatePicker 内容容器 */
.hnui-date-picker-panel-content {
display: flex;
flex-direction: column;
gap: 8px;
}
/* DatePicker 行容器 */
.hnui-date-picker-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
}
/* DatePicker 单元格 */
.hnui-date-picker-cell {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 32px;
width: 100%;
border: 1px solid transparent;
border-radius: 3px;
font-size: 14px;
color: var(--hnui-text-color);
cursor: pointer;
transition: all 0.2s;
background-color: transparent;
margin: 0;
font-family: inherit;
box-sizing: border-box;
}
.hnui-date-picker-cell:hover:not(.hnui-date-picker-cell-disabled) {
background-color: var(--hnui-brand-color10);
border-color: transparent;
}
.hnui-date-picker-cell-selected {
background-color: var(--hnui-brand-color9);
color: var(--hnui-brand-color1);
border-color: transparent;
}
.hnui-date-picker-cell-selected:hover {
background-color: var(--hnui-brand-color9);
}
.hnui-date-picker-cell-disabled {
color: var(--hnui-neutral-color-5);
background-color: transparent;
cursor: not-allowed;
}
.hnui-date-picker-cell-disabled:hover {
background-color: transparent;
border-color: transparent;
}
.hnui-date-picker-cell-today {
border-color: var(--hnui-brand-color-normal);
}
/* ========== 年份选择器 ========== */
.hnui-date-picker-year .hnui-date-picker-row {
grid-template-columns: repeat(3, 1fr);
}
.hnui-date-picker-year .hnui-date-picker-panel-title {
font-weight: 600;
}
/* 年份选择器 - 下拉框样式 */
.hnui-date-picker-panel-dropdown {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 12px;
border: 1px solid var(--hnui-border-color);
border-radius: 3px;
background-color: transparent;
cursor: pointer;
transition: all 0.2s;
}
.hnui-date-picker-panel-dropdown:hover {
border-color: var(--hnui-brand-color-normal);
}
.hnui-date-picker-panel-dropdown-text {
font-size: 14px;
color: var(--hnui-text-color);
}
.hnui-date-picker-panel-dropdown i {
font-size: 12px;
color: var(--hnui-neutral-color-4);
}
/* 年份选择器 - 中间圆圈按钮样式 */
.hnui-date-picker-panel-nav-btn-center {
border: 1px solid var(--hnui-border-color);
border-radius: 50%;
width: 20px;
height: 20px;
font-size: 10px;
color: var(--hnui-text-color);
}
.hnui-date-picker-panel-nav-btn-center:hover {
background-color: var(--hnui-neutral-color-7);
}
/* 年份选择器 - 上一页按钮（旋转右箭头180度） */
.hnui-date-picker-panel-nav-btn-prev i {
transform: rotate(180deg);
display: inline-block;
}
/* ========== 月份选择器 ========== */
.hnui-date-picker-month .hnui-date-picker-row {
grid-template-columns: repeat(3, 1fr);
}
.hnui-date-picker-month .hnui-date-picker-panel-title {
font-weight: 600;
}
/* ========== 日期选择器 ========== */
.hnui-date-picker-date .hnui-date-picker-panel-header {
display: grid;
grid-template-columns: auto auto 1fr;
gap: 8px;
align-items: center;
}
.hnui-date-picker-date .hnui-date-picker-panel-nav {
justify-self: end;
}
.hnui-date-picker-date .hnui-date-picker-row {
grid-template-columns: repeat(7, 1fr);
}
/* 周日期头 */
.hnui-date-picker-week-header {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 6px;
margin-bottom: 6px;
}
.hnui-date-picker-week-header-item {
display: flex;
align-items: center;
justify-content: center;
height: 24px;
font-size: 12px;
font-weight: 500;
color: var(--hnui-neutral-color-4);
}
/* ========== 日期和时间选择器 ========== */
.hnui-date-picker-datetime .hnui-date-picker-panel-content {
display: grid;
grid-template-columns: 310px 1fr;
gap: 16px;
}
.hnui-date-picker-datetime-date {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.hnui-date-picker-datetime-date .hnui-date-picker-panel-header {
display: grid;
grid-template-columns: auto auto 1fr;
gap: 8px;
align-items: center;
padding: 0 0 8px 0;
margin-bottom: 8px;
}
.hnui-date-picker-datetime-date .hnui-date-picker-panel-nav {
justify-self: end;
}
.hnui-date-picker-datetime-date .hnui-date-picker-row {
grid-template-columns: repeat(7, 1fr);
gap: 4px;
}
.hnui-date-picker-datetime-date .hnui-date-picker-cell {
min-height: 28px;
font-size: 13px;
padding: 2px;
}
.hnui-date-picker-datetime-date .hnui-date-picker-week-header {
gap: 4px;
margin-bottom: 4px;
}
.hnui-date-picker-datetime-date .hnui-date-picker-week-header-item {
height: 20px;
font-size: 11px;
}
.hnui-date-picker-datetime-time {
display: flex;
flex-direction: column;
justify-content: center;
gap: 12px;
padding-left: 16px;
border-left: 1px solid var(--hnui-neutral-color-7);
}
/* 时间显示 */
.hnui-date-picker-time-display {
display: flex;
align-items: center;
justify-content: center;
height: 28px;
font-size: 14px;
font-weight: 500;
color: var(--hnui-text-color);
letter-spacing: 2px;
}
/* 时间列表容器 */
.hnui-date-picker-time-lists {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
}
/* 单个时间列表 */
.hnui-date-picker-time-list {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
background-color: transparent;
}
/* 时间项 */
.hnui-date-picker-time-item {
display: flex;
align-items: center;
justify-content: center;
min-height: 28px;
min-width: 40px;
padding: 4px 8px;
font-size: 13px;
color: var(--hnui-text-color);
cursor: pointer;
border-radius: 2px;
transition: all 0.2s;
flex-shrink: 0;
}
.hnui-date-picker-time-item:hover {
background-color: var(--hnui-brand-color10);
}
.hnui-date-picker-time-item-selected {
background-color: var(--hnui-brand-color9);
color: var(--hnui-brand-color1);
font-weight: 500;
}
/* 底部操作栏 */
.hnui-date-picker-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 0 0 0;
margin-top: 12px;
border-top: 1px solid var(--hnui-neutral-color-7);
}
.hnui-date-picker-footer-left {
display: flex;
align-items: center;
gap: 12px;
}
.hnui-date-picker-footer-right {
display: flex;
align-items: center;
gap: 8px;
}
/* 底部链接 */
.hnui-date-picker-footer-link {
font-size: 13px;
color: var(--hnui-brand-color-normal);
text-decoration: none;
cursor: pointer;
transition: color 0.2s;
}
.hnui-date-picker-footer-link:hover {
color: var(--hnui-brand-color2);
text-decoration: underline;
}
/* 底部按钮 */
.hnui-date-picker-footer-btn {
display: inline-flex;
align-items: center;
justify-content: center;
height: 28px;
padding: 0 16px;
border: 1px solid var(--hnui-border-color);
border-radius: 3px;
font-size: 13px;
background-color: transparent;
color: var(--hnui-text-color);
cursor: pointer;
transition: all 0.2s;
margin: 0;
font-family: inherit;
}
.hnui-date-picker-footer-btn:hover {
border-color: var(--hnui-brand-color-normal);
background-color: var(--hnui-brand-color10);
}
.hnui-date-picker-footer-btn-cancel {
background-color: transparent;
}
.hnui-date-picker-footer-btn-ok {
background-color: var(--hnui-brand-color-normal);
border-color: var(--hnui-brand-color-normal);
color: var(--hnui-color-white);
}
.hnui-date-picker-footer-btn-ok:hover {
background-color: var(--hnui-brand-color2);
border-color: var(--hnui-brand-color2);
}
/* ========== 日期区间选择器 ========== */
.hnui-date-picker-range .hnui-date-picker-panel-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.hnui-date-picker-range-start,
.hnui-date-picker-range-end {
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
}
/* 日期区间选择器的 header 布局 */
.hnui-date-picker-range-start .hnui-date-picker-panel-header,
.hnui-date-picker-range-end .hnui-date-picker-panel-header {
display: grid;
grid-template-columns: auto auto 1fr;
gap: 8px;
align-items: center;
}
.hnui-date-picker-range-start .hnui-date-picker-panel-nav,
.hnui-date-picker-range-end .hnui-date-picker-panel-nav {
justify-self: end;
}
/* 日期区间选择器的行布局 */
.hnui-date-picker-range-start .hnui-date-picker-row,
.hnui-date-picker-range-end .hnui-date-picker-row {
grid-template-columns: repeat(7, 1fr);
gap: 0;
}
/* 日期区间选择器的周标题 */
.hnui-date-picker-range-start .hnui-date-picker-week-header,
.hnui-date-picker-range-end .hnui-date-picker-week-header {
gap: 0;
}
/* 日期区间选择器的单元格 - 去掉圆角和边框，让背景连续 */
.hnui-date-picker-range-start .hnui-date-picker-cell,
.hnui-date-picker-range-end .hnui-date-picker-cell {
border-radius: 0;
border: none;
}
/* 范围内的日期 - 浅蓝色背景，无间隙 */
.hnui-date-picker-cell-in-range {
background-color: var(--hnui-brand-color10);
border-radius: 0;
}
.hnui-date-picker-cell-in-range:hover {
background-color: var(--hnui-brand-color9);
}
/* 范围开始日期 - 深蓝色背景 + 选中状态 + 左侧圆角 */
.hnui-date-picker-cell-range-start {
background-color: var(--hnui-brand-color-normal);
color: var(--hnui-color-white);
border-radius: 3px 0 0 3px;
}
.hnui-date-picker-cell-range-start:hover {
background-color: var(--hnui-brand-color2);
}
/* 范围结束日期 - 深蓝色背景 + 选中状态 + 右侧圆角 */
.hnui-date-picker-cell-range-end {
background-color: var(--hnui-brand-color-normal);
color: var(--hnui-color-white);
border-radius: 0 3px 3px 0;
}
.hnui-date-picker-cell-range-end:hover {
background-color: var(--hnui-brand-color2);
}
/* 当开始和结束是同一天时，四个角都有圆角 */
.hnui-date-picker-cell-range-start.hnui-date-picker-cell-range-end {
border-radius: 3px;
}年份选择器
2022
2022
2022
html
<div class="hnui-date-picker hnui-date-picker-year hnui-date-picker-show">
<div class="hnui-date-picker-input">
<span class="hnui-date-picker-value">2022</span>
<i class="hnui-icon-date"></i>
</div>
<div class="hnui-date-picker-panel hnui-box-shadow_l3">
<div class="hnui-date-picker-panel-header">
<div class="hnui-date-picker-panel-dropdown">
<span class="hnui-date-picker-panel-dropdown-text">2022</span>
<i class="hnui-icon-chevron-down"></i>
</div>
<div class="hnui-date-picker-panel-nav">
<button class="hnui-date-picker-panel-nav-btn hnui-date-picker-panel-nav-btn-prev">
<i class="hnui-icon-chevron-right"></i>
</button>
2022
<button class="hnui-date-picker-panel-nav-btn">
<i class="hnui-icon-chevron-right"></i>
</button>
</div>
</div>
<div class="hnui-date-picker-panel-content">
<div class="hnui-date-picker-row">
<button class="hnui-date-picker-cell hnui-date-picker-cell-disabled">2019</button>
<button class="hnui-date-picker-cell">2020</button>
<button class="hnui-date-picker-cell">2021</button>
</div>
<div class="hnui-date-picker-row">
<button class="hnui-date-picker-cell hnui-date-picker-cell-selected">2022</button>
<button class="hnui-date-picker-cell">2023</button>
<button class="hnui-date-picker-cell">2024</button>
</div>
<div class="hnui-date-picker-row">
<button class="hnui-date-picker-cell">2025</button>
<button class="hnui-date-picker-cell">2026</button>
<button class="hnui-date-picker-cell">2027</button>
</div>
<div class="hnui-date-picker-row">
<button class="hnui-date-picker-cell">2028</button>
<button class="hnui-date-picker-cell">2029</button>
<button class="hnui-date-picker-cell hnui-date-picker-cell-disabled">2030</button>
</div>
</div>
</div>
</div>月份选择器
2022/08
2022
2022
html
<div class="hnui-date-picker hnui-date-picker-month hnui-date-picker-show">
<div class="hnui-date-picker-input">
<span class="hnui-date-picker-value">2022/08</span>
<i class="hnui-icon-date"></i>
</div>
<div class="hnui-date-picker-panel hnui-box-shadow_l3">
<div class="hnui-date-picker-panel-header">
<div class="hnui-date-picker-panel-dropdown">
<span class="hnui-date-picker-panel-dropdown-text">2022</span>
<i class="hnui-icon-chevron-down"></i>
</div>
<div class="hnui-date-picker-panel-nav">
<button class="hnui-date-picker-panel-nav-btn hnui-date-picker-panel-nav-btn-prev">
<i class="hnui-icon-chevron-right"></i>
</button>
2022
<button class="hnui-date-picker-panel-nav-btn">
<i class="hnui-icon-chevron-right"></i>
</button>
</div>
</div>
<div class="hnui-date-picker-panel-content">
<div class="hnui-date-picker-row">
<button class="hnui-date-picker-cell">1 月</button>
<button class="hnui-date-picker-cell">2 月</button>
<button class="hnui-date-picker-cell">3 月</button>
</div>
<div class="hnui-date-picker-row">
<button class="hnui-date-picker-cell hnui-date-picker-cell-selected">4 月</button>
<button class="hnui-date-picker-cell">5 月</button>
<button class="hnui-date-picker-cell">6 月</button>
</div>
<div class="hnui-date-picker-row">
<button class="hnui-date-picker-cell">7 月</button>
<button class="hnui-date-picker-cell">8 月</button>
<button class="hnui-date-picker-cell">9 月</button>
</div>
<div class="hnui-date-picker-row">
<button class="hnui-date-picker-cell">10 月</button>
<button class="hnui-date-picker-cell">11 月</button>
<button class="hnui-date-picker-cell">12 月</button>
</div>
</div>
</div>
</div>日期选择器
2022/08/02
Oct
2022
2022
Su
Mo
Tu
We
Th
Fr
Sa
html
<div class="hnui-date-picker hnui-date-picker-date hnui-date-picker-show">
<div class="hnui-date-picker-input">
<span class="hnui-date-picker-value">2022/08/02</span>
<i class="hnui-icon-date"></i>
</div>
<div class="hnui-date-picker-panel hnui-box-shadow_l3">
<div class="hnui-date-picker-panel-header">
<div class="hnui-date-picker-panel-dropdown">
<span class="hnui-date-picker-panel-dropdown-text">Oct</span>
<i class="hnui-icon-chevron-down"></i>
</div>
<div class="hnui-date-picker-panel-dropdown">
<span class="hnui-date-picker-panel-dropdown-text">2022</span>
<i class="hnui-icon-chevron-down"></i>
</div>
<div class="hnui-date-picker-panel-nav">
<button class="hnui-date-picker-panel-nav-btn hnui-date-picker-panel-nav-btn-prev">
<i class="hnui-icon-chevron-right"></i>
</button>
2022
<button class="hnui-date-picker-panel-nav-btn">
<i class="hnui-icon-chevron-right"></i>
</button>
</div>
</div>
<div class="hnui-date-picker-panel-content">
<div class="hnui-date-picker-week-header">
<div class="hnui-date-picker-week-header-item">Su</div>
<div class="hnui-date-picker-week-header-item">Mo</div>
<div class="hnui-date-picker-week-header-item">Tu</div>
<div class="hnui-date-picker-week-header-item">We</div>
<div class="hnui-date-picker-week-header-item">Th</div>
<div class="hnui-date-picker-week-header-item">Fr</div>
<div class="hnui-date-picker-week-header-item">Sa</div>
</div>
<div class="hnui-date-picker-row">
<button class="hnui-date-picker-cell hnui-date-picker-cell-disabled">25</button>
<button class="hnui-date-picker-cell hnui-date-picker-cell-disabled">26</button>
<button class="hnui-date-picker-cell hnui-date-picker-cell-disabled">27</button>
<button class="hnui-date-picker-cell hnui-date-picker-cell-disabled">28</button>
<button class="hnui-date-picker-cell hnui-date-picker-cell-disabled">29</button>
<button class="hnui-date-picker-cell hnui-date-picker-cell-disabled">30</button>
<button class="hnui-date-picker-cell">1</button>
</div>
<div class="hnui-date-picker-row">
<button class="hnui-date-picker-cell">2</button>
<button class="hnui-date-picker-cell">3</button>
<button class="hnui-date-picker-cell">4</button>
<button class="hnui-date-picker-cell">5</button>
<button class="hnui-date-picker-cell">6</button>
<button class="hnui-date-picker-cell">7</button>
<button class="hnui-date-picker-cell">8</button>
</div>
<div class="hnui-date-picker-row">
<button class="hnui-date-picker-cell">9</button>
<button class="hnui-date-picker-cell">10</button>
<button class="hnui-date-picker-cell">11</button>
<button class="hnui-date-picker-cell">12</button>
<button class="hnui-date-picker-cell">13</button>
<button class="hnui-date-picker-cell">14</button>
<button class="hnui-date-picker-cell">15</button>
</div>
<div class="hnui-date-picker-row">
<button class="hnui-date-picker-cell">16</button>
<button class="hnui-date-picker-cell">17</button>
<button class="hnui-date-picker-cell">18</button>
<button class="hnui-date-picker-cell">19</button>
<button class="hnui-date-picker-cell hnui-date-picker-cell-selected">20</button>
<button class="hnui-date-picker-cell">21</button>
<button class="hnui-date-picker-cell">22</button>
</div>
<div class="hnui-date-picker-row">
<button class="hnui-date-picker-cell">23</button>
<button class="hnui-date-picker-cell">24</button>
<button class="hnui-date-picker-cell">25</button>
<button class="hnui-date-picker-cell">26</button>
<button class="hnui-date-picker-cell">27</button>
<button class="hnui-date-picker-cell">28</button>
<button class="hnui-date-picker-cell">29</button>
</div>
<div class="hnui-date-picker-row">
<button class="hnui-date-picker-cell">30</button>
<button class="hnui-date-picker-cell">31</button>
<button class="hnui-date-picker-cell hnui-date-picker-cell-disabled">1</button>
<button class="hnui-date-picker-cell hnui-date-picker-cell-disabled">2</button>
<button class="hnui-date-picker-cell hnui-date-picker-cell-disabled">3</button>
<button class="hnui-date-picker-cell hnui-date-picker-cell-disabled">4</button>
<button class="hnui-date-picker-cell hnui-date-picker-cell-disabled">5</button>
</div>
</div>
</div>
</div>日期和时间选择器
2022/08/02 04:55:04
Oct
2022
o
Su
Mo
Tu
We
Th
Fr
Sa
14 : 45 : 31
11
12
13
14
15
16
17
42
43
44
45
46
47
48
28
29
30
31
32
33
34
html
<div class="hnui-date-picker hnui-date-picker-datetime hnui-date-picker-show">
<div class="hnui-date-picker-input">
<span class="hnui-date-picker-value">2022/08/02 04:55:04</span>
<i class="hnui-icon-date"></i>
</div>
<div class="hnui-date-picker-panel hnui-box-shadow_l3" style="width: 640px;">
<div class="hnui-date-picker-panel-content">
<div class="hnui-date-picker-datetime-date">
<div class="hnui-date-picker-panel-header">
<div class="hnui-date-picker-panel-dropdown">
<span class="hnui-date-picker-panel-dropdown-text">Oct</span>
<i class="hnui-icon-chevron-down"></i>
</div>
<div class="hnui-date-picker-panel-dropdown">
<span class="hnui-date-picker-panel-dropdown-text">2022</span>
<i class="hnui-icon-chevron-down"></i>
</div>
<div class="hnui-date-picker-panel-nav">
<button class="hnui-date-picker-panel-nav-btn hnui-date-picker-panel-nav-btn-prev">
<i class="hnui-icon-chevron-right"></i>
</button>
o
<button class="hnui-date-picker-panel-nav-btn">
<i class="hnui-icon-chevron-right"></i>
</button>
</div>
</div>
<div class="hnui-date-picker-week-header">
<div class="hnui-date-picker-week-header-item">Su</div>
<div class="hnui-date-picker-week-header-item">Mo</div>
<div class="hnui-date-picker-week-header-item">Tu</div>
<div class="hnui-date-picker-week-header-item">We</div>
<div class="hnui-date-picker-week-header-item">Th</div>
<div class="hnui-date-picker-week-header-item">Fr</div>
<div class="hnui-date-picker-week-header-item">Sa</div>
</div>
<div class="hnui-date-picker-row">
<button class="hnui-date-picker-cell hnui-date-picker-cell-disabled">25</button>
<button class="hnui-date-picker-cell hnui-date-picker-cell-disabled">26</button>
<button class="hnui-date-picker-cell hnui-date-picker-cell-disabled">27</button>
<button class="hnui-date-picker-cell hnui-date-picker-cell-disabled">28</button>
<button class="hnui-date-picker-cell hnui-date-picker-cell-disabled">29</button>
<button class="hnui-date-picker-cell hnui-date-picker-cell-disabled">30</button>
<button class="hnui-date-picker-cell">1</button>
</div>
<div class="hnui-date-picker-row">
<button class="hnui-date-picker-cell">2</button>
<button class="hnui-date-picker-cell">3</button>
<button class="hnui-date-picker-cell">4</button>
<button class="hnui-date-picker-cell">5</button>
<button class="hnui-date-picker-cell">6</button>
<button class="hnui-date-picker-cell">7</button>
<button class="hnui-date-picker-cell">8</button>
</div>
<div class="hnui-date-picker-row">
<button class="hnui-date-picker-cell">9</button>
<button class="hnui-date-picker-cell">10</button>
<button class="hnui-date-picker-cell">11</button>
<button class="hnui-date-picker-cell">12</button>
<button class="hnui-date-picker-cell">13</button>
<button class="hnui-date-picker-cell">14</button>
<button class="hnui-date-picker-cell">15</button>
</div>
<div class="hnui-date-picker-row">
<button class="hnui-date-picker-cell">16</button>
<button class="hnui-date-picker-cell">17</button>
<button class="hnui-date-picker-cell">18</button>
<button class="hnui-date-picker-cell">19</button>
<button class="hnui-date-picker-cell hnui-date-picker-cell-selected">20</button>
<button class="hnui-date-picker-cell">21</button>
<button class="hnui-date-picker-cell">22</button>
</div>
<div class="hnui-date-picker-row">
<button class="hnui-date-picker-cell">23</button>
<button class="hnui-date-picker-cell">24</button>
<button class="hnui-date-picker-cell">25</button>
<button class="hnui-date-picker-cell">26</button>
<button class="hnui-date-picker-cell">27</button>
<button class="hnui-date-picker-cell">28</button>
<button class="hnui-date-picker-cell">29</button>
</div>
<div class="hnui-date-picker-row">
<button class="hnui-date-picker-cell">30</button>
<button class="hnui-date-picker-cell">31</button>
<button class="hnui-date-picker-cell hnui-date-picker-cell-disabled">1</button>
<button class="hnui-date-picker-cell hnui-date-picker-cell-disabled">2</button>
<button class="hnui-date-picker-cell hnui-date-picker-cell-disabled">3</button>
<button class="hnui-date-picker-cell hnui-date-picker-cell-disabled">4</button>
<button class="hnui-date-picker-cell hnui-date-picker-cell-disabled">5</button>
</div>
</div>
<div class="hnui-date-picker-datetime-time">
<div class="hnui-date-picker-time-display">14 : 45 : 31</div>
<div class="hnui-date-picker-time-lists">
<div class="hnui-date-picker-time-list">
<div class="hnui-date-picker-time-item">11</div>
<div class="hnui-date-picker-time-item">12</div>
<div class="hnui-date-picker-time-item">13</div>
<div class="hnui-date-picker-time-item hnui-date-picker-time-item-selected">14</div>
<div class="hnui-date-picker-time-item">15</div>
<div class="hnui-date-picker-time-item">16</div>
<div class="hnui-date-picker-time-item">17</div>
</div>
<div class="hnui-date-picker-time-list">
<div class="hnui-date-picker-time-item">42</div>
<div class="hnui-date-picker-time-item">43</div>
<div class="hnui-date-picker-time-item">44</div>
<div class="hnui-date-picker-time-item hnui-date-picker-time-item-selected">45</div>
<div class="hnui-date-picker-time-item">46</div>
<div class="hnui-date-picker-time-item">47</div>
<div class="hnui-date-picker-time-item">48</div>
</div>
<div class="hnui-date-picker-time-list">
<div class="hnui-date-picker-time-item">28</div>
<div class="hnui-date-picker-time-item">29</div>
<div class="hnui-date-picker-time-item">30</div>
<div class="hnui-date-picker-time-item hnui-date-picker-time-item-selected">31</div>
<div class="hnui-date-picker-time-item">32</div>
<div class="hnui-date-picker-time-item">33</div>
<div class="hnui-date-picker-time-item">34</div>
</div>
</div>
</div>
</div>
<div class="hnui-date-picker-footer">
<div class="hnui-date-picker-footer-left">
<a href="#" class="hnui-date-picker-footer-link">Label1</a>
<a href="#" class="hnui-date-picker-footer-link">Label2</a>
</div>
<div class="hnui-date-picker-footer-right">
<button class="hnui-date-picker-footer-btn hnui-date-picker-footer-btn-cancel">Cancel</button>
<button class="hnui-date-picker-footer-btn hnui-date-picker-footer-btn-ok">Ok</button>
</div>
</div>
</div>
</div>日期区间选择器
2022/08/02 - 2022/08/02
Oct
2022
o
Su
Mo
Tu
We
Th
Fr
Sa
Nov
2022
o
Su
Mo
Tu
We
Th
Fr
Sa
html
<div class="hnui-date-picker hnui-date-picker-range hnui-date-picker-show">
<div class="hnui-date-picker-input">
<span class="hnui-date-picker-value">2022/08/02 - 2022/08/02</span>
<i class="hnui-icon-date"></i>
</div>
<div class="hnui-date-picker-panel hnui-box-shadow_l3" style="width: 680px;">
<div class="hnui-date-picker-panel-content">
<div class="hnui-date-picker-range-start">
<div class="hnui-date-picker-panel-header">
<div class="hnui-date-picker-panel-dropdown">
<span class="hnui-date-picker-panel-dropdown-text">Oct</span>
<i class="hnui-icon-chevron-down"></i>
</div>
<div class="hnui-date-picker-panel-dropdown">
<span class="hnui-date-picker-panel-dropdown-text">2022</span>
<i class="hnui-icon-chevron-down"></i>
</div>
<div class="hnui-date-picker-panel-nav">
<button class="hnui-date-picker-panel-nav-btn hnui-date-picker-panel-nav-btn-prev">
<i class="hnui-icon-chevron-right"></i>
</button>
o
<button class="hnui-date-picker-panel-nav-btn">
<i class="hnui-icon-chevron-right"></i>
</button>
</div>
</div>
<div class="hnui-date-picker-week-header">
<div class="hnui-date-picker-week-header-item">Su</div>
<div class="hnui-date-picker-week-header-item">Mo</div>
<div class="hnui-date-picker-week-header-item">Tu</div>
<div class="hnui-date-picker-week-header-item">We</div>
<div class="hnui-date-picker-week-header-item">Th</div>
<div class="hnui-date-picker-week-header-item">Fr</div>
<div class="hnui-date-picker-week-header-item">Sa</div>
</div>
<div class="hnui-date-picker-row">
<button class="hnui-date-picker-cell hnui-date-picker-cell-disabled">25</button>
<button class="hnui-date-picker-cell hnui-date-picker-cell-disabled">26</button>
<button class="hnui-date-picker-cell hnui-date-picker-cell-disabled">27</button>
<button class="hnui-date-picker-cell hnui-date-picker-cell-disabled">28</button>
<button class="hnui-date-picker-cell hnui-date-picker-cell-disabled">29</button>
<button class="hnui-date-picker-cell hnui-date-picker-cell-disabled">30</button>
<button class="hnui-date-picker-cell">1</button>
</div>
<div class="hnui-date-picker-row">
<button class="hnui-date-picker-cell">2</button>
<button class="hnui-date-picker-cell">3</button>
<button class="hnui-date-picker-cell">4</button>
<button class="hnui-date-picker-cell">5</button>
<button class="hnui-date-picker-cell">6</button>
<button class="hnui-date-picker-cell">7</button>
<button class="hnui-date-picker-cell">8</button>
</div>
<div class="hnui-date-picker-row">
<button class="hnui-date-picker-cell">9</button>
<button class="hnui-date-picker-cell">10</button>
<button class="hnui-date-picker-cell">11</button>
<button class="hnui-date-picker-cell">12</button>
<button class="hnui-date-picker-cell">13</button>
<button class="hnui-date-picker-cell">14</button>
<button class="hnui-date-picker-cell">15</button>
</div>
<div class="hnui-date-picker-row">
<button class="hnui-date-picker-cell">16</button>
<button class="hnui-date-picker-cell">17</button>
<button class="hnui-date-picker-cell">18</button>
<button class="hnui-date-picker-cell">19</button>
<button class="hnui-date-picker-cell">20</button>
<button class="hnui-date-picker-cell">21</button>
<button class="hnui-date-picker-cell">22</button>
</div>
<div class="hnui-date-picker-row">
<button class="hnui-date-picker-cell">23</button>
<button class="hnui-date-picker-cell hnui-date-picker-cell-range-start hnui-date-picker-cell-selected">24</button>
<button class="hnui-date-picker-cell hnui-date-picker-cell-in-range">25</button>
<button class="hnui-date-picker-cell hnui-date-picker-cell-in-range">26</button>
<button class="hnui-date-picker-cell hnui-date-picker-cell-in-range">27</button>
<button class="hnui-date-picker-cell hnui-date-picker-cell-in-range">28</button>
<button class="hnui-date-picker-cell hnui-date-picker-cell-in-range">29</button>
</div>
<div class="hnui-date-picker-row">
<button class="hnui-date-picker-cell hnui-date-picker-cell-in-range">30</button>
<button class="hnui-date-picker-cell hnui-date-picker-cell-in-range">31</button>
<button class="hnui-date-picker-cell hnui-date-picker-cell-disabled">1</button>
<button class="hnui-date-picker-cell hnui-date-picker-cell-disabled">2</button>
<button class="hnui-date-picker-cell hnui-date-picker-cell-disabled">3</button>
<button class="hnui-date-picker-cell hnui-date-picker-cell-disabled">4</button>
<button class="hnui-date-picker-cell hnui-date-picker-cell-disabled">5</button>
</div>
</div>
<div class="hnui-date-picker-range-end">
<div class="hnui-date-picker-panel-header">
<div class="hnui-date-picker-panel-dropdown">
<span class="hnui-date-picker-panel-dropdown-text">Nov</span>
<i class="hnui-icon-chevron-down"></i>
</div>
<div class="hnui-date-picker-panel-dropdown">
<span class="hnui-date-picker-panel-dropdown-text">2022</span>
<i class="hnui-icon-chevron-down"></i>
</div>
<div class="hnui-date-picker-panel-nav">
<button class="hnui-date-picker-panel-nav-btn hnui-date-picker-panel-nav-btn-prev">
<i class="hnui-icon-chevron-right"></i>
</button>
o
<button class="hnui-date-picker-panel-nav-btn">
<i class="hnui-icon-chevron-right"></i>
</button>
</div>
</div>
<div class="hnui-date-picker-week-header">
<div class="hnui-date-picker-week-header-item">Su</div>
<div class="hnui-date-picker-week-header-item">Mo</div>
<div class="hnui-date-picker-week-header-item">Tu</div>
<div class="hnui-date-picker-week-header-item">We</div>
<div class="hnui-date-picker-week-header-item">Th</div>
<div class="hnui-date-picker-week-header-item">Fr</div>
<div class="hnui-date-picker-week-header-item">Sa</div>
</div>
<div class="hnui-date-picker-row">
<button class="hnui-date-picker-cell hnui-date-picker-cell-disabled">30</button>
<button class="hnui-date-picker-cell hnui-date-picker-cell-disabled">31</button>
<button class="hnui-date-picker-cell hnui-date-picker-cell-in-range">1</button>
<button class="hnui-date-picker-cell hnui-date-picker-cell-in-range">2</button>
<button class="hnui-date-picker-cell hnui-date-picker-cell-in-range">3</button>
<button class="hnui-date-picker-cell hnui-date-picker-cell-in-range">4</button>
<button class="hnui-date-picker-cell hnui-date-picker-cell-in-range">5</button>
</div>
<div class="hnui-date-picker-row">
<button class="hnui-date-picker-cell hnui-date-picker-cell-in-range">6</button>
<button class="hnui-date-picker-cell hnui-date-picker-cell-in-range">7</button>
<button class="hnui-date-picker-cell hnui-date-picker-cell-in-range">8</button>
<button class="hnui-date-picker-cell hnui-date-picker-cell-in-range">9</button>
<button class="hnui-date-picker-cell hnui-date-picker-cell-in-range">10</button>
<button class="hnui-date-picker-cell hnui-date-picker-cell-in-range">11</button>
<button class="hnui-date-picker-cell hnui-date-picker-cell-in-range">12</button>
</div>
<div class="hnui-date-picker-row">
<button class="hnui-date-picker-cell hnui-date-picker-cell-in-range">13</button>
<button class="hnui-date-picker-cell hnui-date-picker-cell-in-range">14</button>
<button class="hnui-date-picker-cell hnui-date-picker-cell-range-end hnui-date-picker-cell-selected">15</button>
<button class="hnui-date-picker-cell">16</button>
<button class="hnui-date-picker-cell">17</button>
<button class="hnui-date-picker-cell">18</button>
<button class="hnui-date-picker-cell">19</button>
</div>
<div class="hnui-date-picker-row">
<button class="hnui-date-picker-cell">20</button>
<button class="hnui-date-picker-cell">21</button>
<button class="hnui-date-picker-cell">22</button>
<button class="hnui-date-picker-cell">23</button>
<button class="hnui-date-picker-cell">24</button>
<button class="hnui-date-picker-cell">25</button>
<button class="hnui-date-picker-cell">26</button>
</div>
<div class="hnui-date-picker-row">
<button class="hnui-date-picker-cell">27</button>
<button class="hnui-date-picker-cell">28</button>
<button class="hnui-date-picker-cell">29</button>
<button class="hnui-date-picker-cell">30</button>
<button class="hnui-date-picker-cell hnui-date-picker-cell-disabled">1</button>
<button class="hnui-date-picker-cell hnui-date-picker-cell-disabled">2</button>
<button class="hnui-date-picker-cell hnui-date-picker-cell-disabled">3</button>
</div>
</div>
</div>
<div class="hnui-date-picker-footer">
<div class="hnui-date-picker-footer-left">
<a href="#" class="hnui-date-picker-footer-link">Label1</a>
<a href="#" class="hnui-date-picker-footer-link">Label2</a>
</div>
<div class="hnui-date-picker-footer-right">
<button class="hnui-date-picker-footer-btn hnui-date-picker-footer-btn-cancel">Cancel</button>
<button class="hnui-date-picker-footer-btn hnui-date-picker-footer-btn-ok">Ok</button>
</div>
</div>
</div>
</div>