vxe-pc-ui 4.4.6 → 4.4.8

package/lib/vxe-input/style/style.min.css

@@ -1 +1 @@
-.vxe-input--readonly{color:var(--vxe-ui-font-color);display:inline-flex}.vxe-input--wrapper{flex-grow:1;overflow:hidden}.vxe-input--inner{display:block;width:100%;height:100%;outline:0;margin:0;font-size:inherit;font-family:inherit;line-height:inherit;padding:0 .5em;color:var(--vxe-ui-font-color);border:0;border-radius:var(--vxe-ui-base-border-radius);background-color:inherit;box-shadow:none}.vxe-input{background-color:var(--vxe-ui-layout-background-color)}.vxe-input .vxe-input--inner::-moz-placeholder{color:var(--vxe-ui-input-placeholder-color)}.vxe-input .vxe-input--inner::placeholder{color:var(--vxe-ui-input-placeholder-color)}.vxe-input .vxe-input--inner::-webkit-autofill{background-color:var(--vxe-ui-layout-background-color)}.vxe-input .vxe-input--inner[type=number]{-webkit-appearance:none;appearance:none;-moz-appearance:textfield}.vxe-input .vxe-input--inner[type=number]::-webkit-inner-spin-button,.vxe-input .vxe-input--inner[type=number]::-webkit-outer-spin-button,.vxe-input .vxe-input--inner[type=search],.vxe-input .vxe-input--inner[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}.vxe-input .vxe-input--inner[disabled]{cursor:not-allowed;color:var(--vxe-ui-font-disabled-color);background-color:var(--vxe-ui-input-disabled-background-color)}.vxe-input.is--disabled{background-color:var(--vxe-ui-input-disabled-background-color)}.vxe-input.is--disabled .vxe-input--clear-icon,.vxe-input.is--disabled .vxe-input--control-icon,.vxe-input.is--disabled .vxe-input--prefix,.vxe-input.is--disabled .vxe-input--suffix{cursor:not-allowed}.vxe-input.is--disabled .vxe-input--prefix,.vxe-input.is--disabled .vxe-input--suffix{background-color:var(--vxe-ui-input-disabled-background-color)}.vxe-input{display:inline-flex;flex-direction:row;position:relative;border-radius:var(--vxe-ui-base-border-radius);width:180px;border:1px solid var(--vxe-ui-input-border-color)}.vxe-input.is--active{border:1px solid var(--vxe-ui-font-primary-color)}.vxe-input.show--clear:hover .vxe-input--clear-icon{display:block}.vxe-input--prefix{border-radius:var(--vxe-ui-base-border-radius) 0 0 var(--vxe-ui-base-border-radius)}.vxe-input--suffix{border-radius:0 var(--vxe-ui-base-border-radius) var(--vxe-ui-base-border-radius) 0}.vxe-input--prefix,.vxe-input--suffix{display:flex;flex-direction:row;align-items:center;flex-shrink:0;background-color:var(--vxe-ui-layout-background-color)}.vxe-input--prefix-icon{padding-left:.5em}.vxe-input--clear-icon,.vxe-input--control-icon,.vxe-input--suffix-icon{padding-right:.5em}.vxe-input--prefix-icon,.vxe-input--suffix-icon{color:var(--vxe-ui-input-placeholder-color)}.vxe-input--clear-icon,.vxe-input--control-icon{height:100%;color:var(--vxe-ui-input-placeholder-color);cursor:pointer}.vxe-input--clear-icon{display:none}.vxe-input--clear-icon:hover{color:var(--vxe-ui-font-color)}.vxe-input--clear-icon:active{color:var(--vxe-ui-font-primary-color)}.vxe-input--number-btn{height:50%;display:flex;align-items:center;justify-content:center}.vxe-input--number-btn:hover{color:var(--vxe-ui-font-color)}.vxe-input--number-btn:active{color:var(--vxe-ui-font-primary-color)}.vxe-input--number-icon{display:flex;flex-direction:column;height:100%}.vxe-input--number-icon .vxe-input--number-btn.is--disabled{cursor:no-drop;color:var(--vxe-ui-font-disabled-color)}.vxe-input--count{flex-shrink:0;color:var(--vxe-ui-input-count-color);background-color:var(--vxe-ui-layout-background-color);padding-right:.6em}.vxe-input--count.is--error{color:var(--vxe-ui-input-count-error-color)}.vxe-input.is--left .vxe-input--inner{text-align:left}.vxe-input.is--center .vxe-input--inner{text-align:center}.vxe-input.is--right .vxe-input--inner{text-align:right}.vxe-input--panel{display:none;position:absolute;left:0;padding:4px 0;color:var(--vxe-ui-font-color);font-size:var(--vxe-ui-font-size-default);text-align:left}.vxe-input--panel.is--transfer{position:fixed}.vxe-input--panel.ani--leave{display:block;opacity:0;transform:scaleY(.5);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1);transform-origin:center top;backface-visibility:hidden;transform-style:preserve-3d}.vxe-input--panel.ani--leave[placement=top]{transform-origin:center bottom}.vxe-input--panel.ani--enter{opacity:1;transform:scaleY(1)}.vxe-input--panel{pointer-events:none}.vxe-input--panel-layout-wrapper,.vxe-input--panel-wrapper{pointer-events:auto;background-color:var(--vxe-ui-layout-background-color);border:1px solid var(--vxe-ui-base-popup-border-color);box-shadow:0 0 6px 2px rgba(0,0,0,.1);border-radius:var(--vxe-ui-base-border-radius)}.vxe-input--panel-wrapper{overflow-x:hidden;overflow-y:auto}.vxe-input--panel-layout-wrapper{display:inline-flex;flex-direction:row}.vxe-input--panel.type--date,.vxe-input--panel.type--month,.vxe-input--panel.type--quarter,.vxe-input--panel.type--week,.vxe-input--panel.type--year{-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxe-input--panel.type--datetime .vxe-input--panel-right-wrapper{display:flex;flex-direction:column;border-left:1px solid var(--vxe-ui-input-border-color)}.vxe-input--panel.type--date .vxe-input--date-picker-body th,.vxe-input--panel.type--datetime .vxe-input--date-picker-body th{width:14.28571%}.vxe-input--panel.type--week .vxe-input--date-picker-body table th{width:12%}.vxe-input--panel.type--week .vxe-input--date-picker-body table th:first-child{width:14%}.vxe-input--panel.type--quarter .vxe-input--date-picker-body table th{width:50%}.vxe-input--panel.type--month .vxe-input--date-picker-body td,.vxe-input--panel.type--year .vxe-input--date-picker-body td{width:25%}.vxe-input--time-picker-title{flex-grow:1;text-align:center;border:1px solid var(--vxe-ui-input-border-color);border-radius:var(--vxe-ui-base-border-radius);padding:0 .1em;margin-right:.5em}.vxe-input--time-picker-btn{flex-shrink:0}.vxe-input--date-picker-confirm,.vxe-input--time-picker-confirm{outline:0;border:1px solid var(--vxe-ui-input-border-color);border-radius:var(--vxe-ui-base-border-radius);cursor:pointer;color:var(--vxe-ui-input-date-time-confirm-button-color);border-color:var(--vxe-ui-font-primary-color);background-color:var(--vxe-ui-font-primary-color);padding:0 .5em}.vxe-input--date-picker-confirm:hover,.vxe-input--time-picker-confirm:hover{background-color:var(--vxe-ui-font-primary-lighten-color);border-color:var(--vxe-ui-font-primary-lighten-color)}.vxe-input--date-picker-confirm:active,.vxe-input--time-picker-confirm:active{background-color:var(--vxe-ui-font-primary-darken-color);border-color:var(--vxe-ui-font-primary-darken-color)}.vxe-input--time-picker-header{display:flex;flex-direction:row;position:relative;flex-shrink:0}.vxe-input--date-picker-header{display:flex;flex-direction:row;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxe-input--date-picker-header .vxe-input--date-picker-type-wrapper{flex-grow:1}.vxe-input--date-picker-header .vxe-input--date-picker-btn-wrapper{flex-shrink:0;text-align:center}.vxe-input--date-picker-type-wrapper .vxe-input--date-picker-btn,.vxe-input--date-picker-type-wrapper .vxe-input--date-picker-label{display:inline-block}.vxe-input--date-picker-btn-wrapper{display:flex;flex-direction:row}.vxe-input--date-picker-btn,.vxe-input--date-picker-label{display:flex;align-items:center;justify-content:center;background-color:var(--vxe-ui-layout-background-color)}.vxe-input--date-picker-btn.is--disabled{color:var(--vxe-ui-font-disabled-color);cursor:no-drop}.vxe-input--date-picker-btn:not(.is--disabled){cursor:pointer}.vxe-input--date-picker-btn:not(.is--disabled):hover{background-color:#fff}.vxe-input--date-picker-btn:not(.is--disabled):active{background-color:#fff}.vxe-input--date-picker-body{border-radius:var(--vxe-ui-base-border-radius);border:1px solid var(--vxe-ui-base-popup-border-color);-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxe-input--date-picker-body table{border:0;width:100%;border-spacing:0;border-collapse:separate;text-align:center;table-layout:fixed}.vxe-input--date-picker-body td,.vxe-input--date-picker-body th{font-weight:400}.vxe-input--date-picker-body th{box-shadow:inset 0 -1px 0 0 var(--vxe-ui-base-popup-border-color)}.vxe-input--date-picker-body td.is--next,.vxe-input--date-picker-body td.is--prev{color:var(--vxe-ui-font-disabled-color)}.vxe-input--date-picker-body td.is--next .vxe-input--date-festival,.vxe-input--date-picker-body td.is--next .vxe-input--date-label,.vxe-input--date-picker-body td.is--prev .vxe-input--date-festival,.vxe-input--date-picker-body td.is--prev .vxe-input--date-label{color:var(--vxe-ui-font-disabled-color)}.vxe-input--date-picker-body td.is--now{box-shadow:inset 0 0 0 1px var(--vxe-ui-base-popup-border-color)}.vxe-input--date-picker-body td.is--now:not(.is--selected).is--current{color:var(--vxe-ui-font-primary-color)}.vxe-input--date-picker-body td.is--now:not(.is--selected).is--current .vxe-input--date-festival,.vxe-input--date-picker-body td.is--now:not(.is--selected).is--current .vxe-input--date-label{color:var(--vxe-ui-font-primary-color)}.vxe-input--date-picker-body td.is--hover{background-color:var(--vxe-ui-input-date-picker-hover-background-color)}.vxe-input--date-picker-body td.is--selected{color:var(--vxe-ui-input-date-picker-selected-color);background-color:var(--vxe-ui-font-primary-color)}.vxe-input--date-picker-body td.is--selected.is--next,.vxe-input--date-picker-body td.is--selected.is--prev{background-color:var(--vxe-ui-font-primary-lighten-color)}.vxe-input--date-picker-body td.is--selected .vxe-input--date-festival,.vxe-input--date-picker-body td.is--selected .vxe-input--date-label{color:var(--vxe-ui-input-date-picker-festival-selected-color)}.vxe-input--date-picker-body td.is--selected .vxe-input--date-label.is-notice:before{background-color:var(--vxe-ui-input-date-picker-notice-selected-background-color)}.vxe-input--date-picker-body td:not(.is--disabled){cursor:pointer}.vxe-input--date-picker-body td.is--disabled{cursor:no-drop;color:var(--vxe-ui-input-disabled-color);background-color:var(--vxe-ui-input-disabled-background-color)}.vxe-input--date-picker-body td.is--disabled .vxe-input--date-festival,.vxe-input--date-picker-body td.is--disabled .vxe-input--date-label{color:var(--vxe-ui-input-disabled-color)}.vxe-input--date-week-view th:first-child{box-shadow:inset -1px -1px 0 0 var(--vxe-ui-base-popup-border-color)}.vxe-input--date-week-view td:first-child{box-shadow:inset -1px 0 0 0 var(--vxe-ui-base-popup-border-color)}.vxe-input--date-festival,.vxe-input--date-label{display:block;overflow:hidden}.vxe-input--date-label{position:relative}.vxe-input--date-label.is-notice:before{content:"";position:absolute;width:4px;height:4px;left:.8em;top:.1em;transform:translateX(-50%);border-radius:100%;background-color:var(--vxe-ui-input-date-notice-background-color)}.vxe-input--date-label--extra{position:absolute;right:.1em;top:-.2em;font-size:12px;line-height:12px;transform:scale(.7);color:var(--vxe-ui-input-date-extra-color)}.vxe-input--date-label--extra.is-important{color:var(--vxe-ui-input-date-extra-important-color)}.vxe-input--date-festival{color:var(--vxe-ui-input-date-festival-color);height:14px;line-height:1;overflow:hidden}.vxe-input--date-festival.is-important{color:var(--vxe-ui-input-date-festival-important-color)}.vxe-input--date-festival--label{display:block;font-size:12px;transform:scale(.8)}@keyframes festivalOverlap2{0%,100%,45%{transform:translateY(0)}50%,95%{transform:translateY(-14px)}}@keyframes festivalOverlap3{0%,100%,20%{transform:translateY(0)}25%,45%,75%,95%{transform:translateY(-14px)}50%,70%{transform:translateY(-28px)}}.vxe-input--date-festival--overlap{display:block;font-size:12px}.vxe-input--date-festival--overlap.overlap--2{animation:festivalOverlap2 6s infinite ease-in-out}.vxe-input--date-festival--overlap.overlap--3{animation:festivalOverlap3 9s infinite ease-in-out}.vxe-input--date-festival--overlap>span{height:14px;display:block;transform:scale(.8)}.vxe-input--time-picker-body{position:relative;display:flex;flex-direction:row;border:1px solid var(--vxe-ui-base-popup-border-color);flex-grow:1;border-radius:var(--vxe-ui-base-border-radius);-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxe-input--time-picker-body>ul{height:100%;overflow:hidden;margin:0;padding:0}.vxe-input--time-picker-body>ul:after,.vxe-input--time-picker-body>ul:before{content:" ";display:block}.vxe-input--time-picker-body>ul:hover{overflow-y:auto}.vxe-input--time-picker-body>ul>li{display:block}.vxe-input--time-picker-body>ul>li:hover{background-color:var(--vxe-ui-input-date-picker-hover-background-color);cursor:pointer}.vxe-input--time-picker-body>ul>li.is--selected{font-weight:700;color:var(--vxe-ui-font-primary-color)}.vxe-input--time-picker-body .vxe-input--time-picker-minute-list{border-left:1px solid var(--vxe-ui-base-popup-border-color)}.vxe-input--time-picker-body .vxe-input--time-picker-second-list{border-left:1px solid var(--vxe-ui-base-popup-border-color)}.vxe-input{font-size:var(--vxe-ui-font-size-default);height:var(--vxe-ui-input-height-default);line-height:var(--vxe-ui-input-height-default)}.vxe-input .vxe-input--inner[type=date]::-webkit-inner-spin-button,.vxe-input .vxe-input--inner[type=month]::-webkit-inner-spin-button,.vxe-input .vxe-input--inner[type=week]::-webkit-inner-spin-button{margin-top:6px}.vxe-input .vxe-input--inner[type=date]::-webkit-inner-spin-button,.vxe-input .vxe-input--inner[type=month]::-webkit-inner-spin-button,.vxe-input .vxe-input--inner[type=number]::-webkit-inner-spin-button,.vxe-input .vxe-input--inner[type=week]::-webkit-inner-spin-button{height:24px}.vxe-input.size--medium{font-size:var(--vxe-ui-font-size-medium);height:var(--vxe-ui-input-height-medium);line-height:var(--vxe-ui-input-height-medium)}.vxe-input.size--medium .vxe-input--inner[type=date]::-webkit-inner-spin-button,.vxe-input.size--medium .vxe-input--inner[type=month]::-webkit-inner-spin-button,.vxe-input.size--medium .vxe-input--inner[type=week]::-webkit-inner-spin-button{margin-top:4px}.vxe-input.size--small{font-size:var(--vxe-ui-font-size-small);height:var(--vxe-ui-input-height-small);line-height:var(--vxe-ui-input-height-small)}.vxe-input.size--small .vxe-input--inner[type=date]::-webkit-inner-spin-button,.vxe-input.size--small .vxe-input--inner[type=month]::-webkit-inner-spin-button,.vxe-input.size--small .vxe-input--inner[type=week]::-webkit-inner-spin-button{margin-top:2px}.vxe-input.size--mini{font-size:var(--vxe-ui-font-size-mini);height:var(--vxe-ui-input-height-mini);line-height:var(--vxe-ui-input-height-mini)}.vxe-input.size--mini .vxe-input--inner[type=date]::-webkit-inner-spin-button,.vxe-input.size--mini .vxe-input--inner[type=month]::-webkit-inner-spin-button,.vxe-input.size--mini .vxe-input--inner[type=week]::-webkit-inner-spin-button{margin-top:0}.vxe-input--panel{font-size:var(--vxe-ui-font-size-default)}.vxe-input--panel .vxe-input--panel-wrapper{max-height:380px}.vxe-input--panel.type--date .vxe-input--panel-wrapper,.vxe-input--panel.type--month .vxe-input--panel-wrapper,.vxe-input--panel.type--quarter .vxe-input--panel-wrapper,.vxe-input--panel.type--time .vxe-input--panel-wrapper,.vxe-input--panel.type--week .vxe-input--panel-wrapper,.vxe-input--panel.type--year .vxe-input--panel-wrapper{padding:11px}.vxe-input--panel.type--date .vxe-input--panel-wrapper,.vxe-input--panel.type--month .vxe-input--panel-wrapper,.vxe-input--panel.type--quarter .vxe-input--panel-wrapper,.vxe-input--panel.type--year .vxe-input--panel-wrapper{width:336px}.vxe-input--panel.type--week .vxe-input--panel-wrapper{width:380px}.vxe-input--panel.type--time .vxe-input--panel-wrapper{display:inline-flex;flex-direction:column}.vxe-input--panel.type--datetime .vxe-input--panel-left-wrapper{width:336px}.vxe-input--panel.type--datetime .vxe-input--panel-left-wrapper,.vxe-input--panel.type--datetime .vxe-input--panel-right-wrapper{padding:11px}.vxe-input--panel .vxe-input--time-picker-title{height:30px;line-height:30px}.vxe-input--panel .vxe-input--date-picker-btn,.vxe-input--panel .vxe-input--date-picker-label{height:30px;line-height:30px}.vxe-input--panel .vxe-input--date-picker-btn-wrapper .vxe-input--date-picker-btn{margin-left:8px}.vxe-input--panel .vxe-input--date-picker-btn-wrapper .vxe-input--date-picker-current-btn,.vxe-input--panel .vxe-input--date-picker-btn-wrapper .vxe-input--date-picker-next-btn,.vxe-input--panel .vxe-input--date-picker-btn-wrapper .vxe-input--date-picker-prev-btn{width:30px;border-radius:var(--vxe-ui-base-border-radius);border:1px solid var(--vxe-ui-input-border-color)}.vxe-input--panel .vxe-input--date-picker-type-wrapper .vxe-input--date-picker-btn,.vxe-input--panel .vxe-input--date-picker-type-wrapper .vxe-input--date-picker-label{padding:0 9px}.vxe-input--panel .vxe-input--date-picker-header,.vxe-input--panel .vxe-input--time-picker-header{padding-bottom:8px}.vxe-input--panel .vxe-input--date-picker-body table,.vxe-input--panel .vxe-input--time-picker-body{height:calc(var(--vxe-ui-input-date-time-week-row-height-default) * 6 + var(--vxe-ui-input-date-title-height-default))}.vxe-input--panel .vxe-input--time-picker-body>ul{width:48px}.vxe-input--panel .vxe-input--time-picker-body>ul:after,.vxe-input--panel .vxe-input--time-picker-body>ul:before{height:120px}.vxe-input--panel .vxe-input--time-picker-body>ul>li{height:26px;padding-left:9px}.vxe-input--panel .vxe-input--time-picker-body .vxe-input--time-picker-minute-list{left:48px}.vxe-input--panel .vxe-input--time-picker-body .vxe-input--time-picker-second-list{left:96px}.vxe-input--panel .vxe-input--date-day-view td,.vxe-input--panel .vxe-input--date-week-view td{height:var(--vxe-ui-input-date-time-week-row-height-default)}.vxe-input--panel .vxe-input--date-quarter-view td{height:var(--vxe-ui-input-date-quarter-row-height-default)}.vxe-input--panel .vxe-input--date-month-view td,.vxe-input--panel .vxe-input--date-year-view td{height:var(--vxe-ui-input-date-month-year-row-height-default)}.vxe-input--panel .vxe-input--date-picker-body th{height:var(--vxe-ui-input-date-title-height-default)}.vxe-input--panel .vxe-input--date-picker-confirm,.vxe-input--panel .vxe-input--time-picker-confirm{height:30px}.vxe-input--panel .vxe-input--date-label{line-height:calc(var(--vxe-ui-font-size-default) + 1px)}.vxe-input--panel.size--medium{font-size:var(--vxe-ui-font-size-medium)}.vxe-input--panel.size--medium .vxe-input--panel-wrapper{max-height:360px}.vxe-input--panel.size--medium.type--date .vxe-input--panel-wrapper,.vxe-input--panel.size--medium.type--month .vxe-input--panel-wrapper,.vxe-input--panel.size--medium.type--quarter .vxe-input--panel-wrapper,.vxe-input--panel.size--medium.type--time .vxe-input--panel-wrapper,.vxe-input--panel.size--medium.type--week .vxe-input--panel-wrapper,.vxe-input--panel.size--medium.type--year .vxe-input--panel-wrapper{padding:10px}.vxe-input--panel.size--medium.type--date .vxe-input--panel-wrapper,.vxe-input--panel.size--medium.type--month .vxe-input--panel-wrapper,.vxe-input--panel.size--medium.type--quarter .vxe-input--panel-wrapper,.vxe-input--panel.size--medium.type--year .vxe-input--panel-wrapper{width:336px}.vxe-input--panel.size--medium.type--week .vxe-input--panel-wrapper{width:380px}.vxe-input--panel.size--medium.type--time .vxe-input--panel-wrapper{display:inline-flex;flex-direction:column}.vxe-input--panel.size--medium.type--datetime .vxe-input--panel-left-wrapper{width:336px}.vxe-input--panel.size--medium.type--datetime .vxe-input--panel-left-wrapper,.vxe-input--panel.size--medium.type--datetime .vxe-input--panel-right-wrapper{padding:10px}.vxe-input--panel.size--medium .vxe-input--time-picker-title{height:29px;line-height:29px}.vxe-input--panel.size--medium .vxe-input--date-picker-btn,.vxe-input--panel.size--medium .vxe-input--date-picker-label{height:29px;line-height:29px}.vxe-input--panel.size--medium .vxe-input--date-picker-btn-wrapper .vxe-input--date-picker-btn{margin-left:7px}.vxe-input--panel.size--medium .vxe-input--date-picker-btn-wrapper .vxe-input--date-picker-current-btn,.vxe-input--panel.size--medium .vxe-input--date-picker-btn-wrapper .vxe-input--date-picker-next-btn,.vxe-input--panel.size--medium .vxe-input--date-picker-btn-wrapper .vxe-input--date-picker-prev-btn{width:29px;border-radius:var(--vxe-ui-base-border-radius);border:1px solid var(--vxe-ui-input-border-color)}.vxe-input--panel.size--medium .vxe-input--date-picker-type-wrapper .vxe-input--date-picker-btn,.vxe-input--panel.size--medium .vxe-input--date-picker-type-wrapper .vxe-input--date-picker-label{padding:0 8px}.vxe-input--panel.size--medium .vxe-input--date-picker-header,.vxe-input--panel.size--medium .vxe-input--time-picker-header{padding-bottom:7px}.vxe-input--panel.size--medium .vxe-input--date-picker-body table,.vxe-input--panel.size--medium .vxe-input--time-picker-body{height:calc(var(--vxe-ui-input-date-time-week-row-height-medium) * 6 + var(--vxe-ui-input-date-title-height-medium))}.vxe-input--panel.size--medium .vxe-input--time-picker-body>ul{width:48px}.vxe-input--panel.size--medium .vxe-input--time-picker-body>ul:after,.vxe-input--panel.size--medium .vxe-input--time-picker-body>ul:before{height:120px}.vxe-input--panel.size--medium .vxe-input--time-picker-body>ul>li{height:26px;padding-left:8px}.vxe-input--panel.size--medium .vxe-input--time-picker-body .vxe-input--time-picker-minute-list{left:48px}.vxe-input--panel.size--medium .vxe-input--time-picker-body .vxe-input--time-picker-second-list{left:96px}.vxe-input--panel.size--medium .vxe-input--date-day-view td,.vxe-input--panel.size--medium .vxe-input--date-week-view td{height:var(--vxe-ui-input-date-time-week-row-height-medium)}.vxe-input--panel.size--medium .vxe-input--date-quarter-view td{height:var(--vxe-ui-input-date-quarter-row-height-medium)}.vxe-input--panel.size--medium .vxe-input--date-month-view td,.vxe-input--panel.size--medium .vxe-input--date-year-view td{height:var(--vxe-ui-input-date-month-year-row-height-medium)}.vxe-input--panel.size--medium .vxe-input--date-picker-body th{height:var(--vxe-ui-input-date-title-height-medium)}.vxe-input--panel.size--medium .vxe-input--date-picker-confirm,.vxe-input--panel.size--medium .vxe-input--time-picker-confirm{height:29px}.vxe-input--panel.size--medium .vxe-input--date-label{line-height:calc(var(--vxe-ui-font-size-medium) + 1px)}.vxe-input--panel.size--small{font-size:var(--vxe-ui-font-size-small)}.vxe-input--panel.size--small .vxe-input--panel-wrapper{max-height:340px}.vxe-input--panel.size--small.type--date .vxe-input--panel-wrapper,.vxe-input--panel.size--small.type--month .vxe-input--panel-wrapper,.vxe-input--panel.size--small.type--quarter .vxe-input--panel-wrapper,.vxe-input--panel.size--small.type--time .vxe-input--panel-wrapper,.vxe-input--panel.size--small.type--week .vxe-input--panel-wrapper,.vxe-input--panel.size--small.type--year .vxe-input--panel-wrapper{padding:9px}.vxe-input--panel.size--small.type--date .vxe-input--panel-wrapper,.vxe-input--panel.size--small.type--month .vxe-input--panel-wrapper,.vxe-input--panel.size--small.type--quarter .vxe-input--panel-wrapper,.vxe-input--panel.size--small.type--year .vxe-input--panel-wrapper{width:312px}.vxe-input--panel.size--small.type--week .vxe-input--panel-wrapper{width:354px}.vxe-input--panel.size--small.type--time .vxe-input--panel-wrapper{display:inline-flex;flex-direction:column}.vxe-input--panel.size--small.type--datetime .vxe-input--panel-left-wrapper{width:312px}.vxe-input--panel.size--small.type--datetime .vxe-input--panel-left-wrapper,.vxe-input--panel.size--small.type--datetime .vxe-input--panel-right-wrapper{padding:9px}.vxe-input--panel.size--small .vxe-input--time-picker-title{height:28px;line-height:28px}.vxe-input--panel.size--small .vxe-input--date-picker-btn,.vxe-input--panel.size--small .vxe-input--date-picker-label{height:28px;line-height:28px}.vxe-input--panel.size--small .vxe-input--date-picker-btn-wrapper .vxe-input--date-picker-btn{margin-left:6px}.vxe-input--panel.size--small .vxe-input--date-picker-btn-wrapper .vxe-input--date-picker-current-btn,.vxe-input--panel.size--small .vxe-input--date-picker-btn-wrapper .vxe-input--date-picker-next-btn,.vxe-input--panel.size--small .vxe-input--date-picker-btn-wrapper .vxe-input--date-picker-prev-btn{width:28px;border-radius:var(--vxe-ui-base-border-radius);border:1px solid var(--vxe-ui-input-border-color)}.vxe-input--panel.size--small .vxe-input--date-picker-type-wrapper .vxe-input--date-picker-btn,.vxe-input--panel.size--small .vxe-input--date-picker-type-wrapper .vxe-input--date-picker-label{padding:0 7px}.vxe-input--panel.size--small .vxe-input--date-picker-header,.vxe-input--panel.size--small .vxe-input--time-picker-header{padding-bottom:6px}.vxe-input--panel.size--small .vxe-input--date-picker-body table,.vxe-input--panel.size--small .vxe-input--time-picker-body{height:calc(var(--vxe-ui-input-date-time-week-row-height-small) * 6 + var(--vxe-ui-input-date-title-height-small))}.vxe-input--panel.size--small .vxe-input--time-picker-body>ul{width:44px}.vxe-input--panel.size--small .vxe-input--time-picker-body>ul:after,.vxe-input--panel.size--small .vxe-input--time-picker-body>ul:before{height:110px}.vxe-input--panel.size--small .vxe-input--time-picker-body>ul>li{height:26px;padding-left:7px}.vxe-input--panel.size--small .vxe-input--time-picker-body .vxe-input--time-picker-minute-list{left:44px}.vxe-input--panel.size--small .vxe-input--time-picker-body .vxe-input--time-picker-second-list{left:88px}.vxe-input--panel.size--small .vxe-input--date-day-view td,.vxe-input--panel.size--small .vxe-input--date-week-view td{height:var(--vxe-ui-input-date-time-week-row-height-small)}.vxe-input--panel.size--small .vxe-input--date-quarter-view td{height:var(--vxe-ui-input-date-quarter-row-height-small)}.vxe-input--panel.size--small .vxe-input--date-month-view td,.vxe-input--panel.size--small .vxe-input--date-year-view td{height:var(--vxe-ui-input-date-month-year-row-height-small)}.vxe-input--panel.size--small .vxe-input--date-picker-body th{height:var(--vxe-ui-input-date-title-height-small)}.vxe-input--panel.size--small .vxe-input--date-picker-confirm,.vxe-input--panel.size--small .vxe-input--time-picker-confirm{height:28px}.vxe-input--panel.size--small .vxe-input--date-label{line-height:calc(var(--vxe-ui-font-size-small) + 1px)}.vxe-input--panel.size--mini{font-size:var(--vxe-ui-font-size-mini)}.vxe-input--panel.size--mini .vxe-input--panel-wrapper{max-height:320px}.vxe-input--panel.size--mini.type--date .vxe-input--panel-wrapper,.vxe-input--panel.size--mini.type--month .vxe-input--panel-wrapper,.vxe-input--panel.size--mini.type--quarter .vxe-input--panel-wrapper,.vxe-input--panel.size--mini.type--time .vxe-input--panel-wrapper,.vxe-input--panel.size--mini.type--week .vxe-input--panel-wrapper,.vxe-input--panel.size--mini.type--year .vxe-input--panel-wrapper{padding:8px}.vxe-input--panel.size--mini.type--date .vxe-input--panel-wrapper,.vxe-input--panel.size--mini.type--month .vxe-input--panel-wrapper,.vxe-input--panel.size--mini.type--quarter .vxe-input--panel-wrapper,.vxe-input--panel.size--mini.type--year .vxe-input--panel-wrapper{width:288px}.vxe-input--panel.size--mini.type--week .vxe-input--panel-wrapper{width:326px}.vxe-input--panel.size--mini.type--time .vxe-input--panel-wrapper{display:inline-flex;flex-direction:column}.vxe-input--panel.size--mini.type--datetime .vxe-input--panel-left-wrapper{width:288px}.vxe-input--panel.size--mini.type--datetime .vxe-input--panel-left-wrapper,.vxe-input--panel.size--mini.type--datetime .vxe-input--panel-right-wrapper{padding:8px}.vxe-input--panel.size--mini .vxe-input--time-picker-title{height:27px;line-height:27px}.vxe-input--panel.size--mini .vxe-input--date-picker-btn,.vxe-input--panel.size--mini .vxe-input--date-picker-label{height:27px;line-height:27px}.vxe-input--panel.size--mini .vxe-input--date-picker-btn-wrapper .vxe-input--date-picker-btn{margin-left:5px}.vxe-input--panel.size--mini .vxe-input--date-picker-btn-wrapper .vxe-input--date-picker-current-btn,.vxe-input--panel.size--mini .vxe-input--date-picker-btn-wrapper .vxe-input--date-picker-next-btn,.vxe-input--panel.size--mini .vxe-input--date-picker-btn-wrapper .vxe-input--date-picker-prev-btn{width:27px;border-radius:var(--vxe-ui-base-border-radius);border:1px solid var(--vxe-ui-input-border-color)}.vxe-input--panel.size--mini .vxe-input--date-picker-type-wrapper .vxe-input--date-picker-btn,.vxe-input--panel.size--mini .vxe-input--date-picker-type-wrapper .vxe-input--date-picker-label{padding:0 6px}.vxe-input--panel.size--mini .vxe-input--date-picker-header,.vxe-input--panel.size--mini .vxe-input--time-picker-header{padding-bottom:5px}.vxe-input--panel.size--mini .vxe-input--date-picker-body table,.vxe-input--panel.size--mini .vxe-input--time-picker-body{height:calc(var(--vxe-ui-input-date-time-week-row-height-mini) * 6 + var(--vxe-ui-input-date-title-height-mini))}.vxe-input--panel.size--mini .vxe-input--time-picker-body>ul{width:42px}.vxe-input--panel.size--mini .vxe-input--time-picker-body>ul:after,.vxe-input--panel.size--mini .vxe-input--time-picker-body>ul:before{height:100px}.vxe-input--panel.size--mini .vxe-input--time-picker-body>ul>li{height:26px;padding-left:6px}.vxe-input--panel.size--mini .vxe-input--time-picker-body .vxe-input--time-picker-minute-list{left:42px}.vxe-input--panel.size--mini .vxe-input--time-picker-body .vxe-input--time-picker-second-list{left:84px}.vxe-input--panel.size--mini .vxe-input--date-day-view td,.vxe-input--panel.size--mini .vxe-input--date-week-view td{height:var(--vxe-ui-input-date-time-week-row-height-mini)}.vxe-input--panel.size--mini .vxe-input--date-quarter-view td{height:var(--vxe-ui-input-date-quarter-row-height-mini)}.vxe-input--panel.size--mini .vxe-input--date-month-view td,.vxe-input--panel.size--mini .vxe-input--date-year-view td{height:var(--vxe-ui-input-date-month-year-row-height-mini)}.vxe-input--panel.size--mini .vxe-input--date-picker-body th{height:var(--vxe-ui-input-date-title-height-mini)}.vxe-input--panel.size--mini .vxe-input--date-picker-confirm,.vxe-input--panel.size--mini .vxe-input--time-picker-confirm{height:27px}.vxe-input--panel.size--mini .vxe-input--date-label{line-height:calc(var(--vxe-ui-font-size-mini) + 1px)}
+.vxe-input--readonly{color:var(--vxe-ui-font-color);display:inline-flex}.vxe-input--wrapper{flex-grow:1;overflow:hidden}.vxe-input--inner{display:block;width:100%;height:100%;outline:0;margin:0;font-size:inherit;font-family:inherit;line-height:inherit;padding:0 .5em;color:var(--vxe-ui-font-color);border:0;border-radius:var(--vxe-ui-base-border-radius);background-color:inherit;box-shadow:none}.vxe-input{background-color:var(--vxe-ui-layout-background-color)}.vxe-input .vxe-input--inner::-moz-placeholder{color:var(--vxe-ui-input-placeholder-color)}.vxe-input .vxe-input--inner::placeholder{color:var(--vxe-ui-input-placeholder-color)}.vxe-input .vxe-input--inner::-webkit-autofill{background-color:var(--vxe-ui-layout-background-color)}.vxe-input .vxe-input--inner[type=number]{-webkit-appearance:none;appearance:none;-moz-appearance:textfield}.vxe-input .vxe-input--inner[type=number]::-webkit-inner-spin-button,.vxe-input .vxe-input--inner[type=number]::-webkit-outer-spin-button,.vxe-input .vxe-input--inner[type=search],.vxe-input .vxe-input--inner[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}.vxe-input .vxe-input--inner[disabled]{cursor:not-allowed;color:var(--vxe-ui-font-disabled-color);background-color:var(--vxe-ui-input-disabled-background-color)}.vxe-input.is--disabled{background-color:var(--vxe-ui-input-disabled-background-color)}.vxe-input.is--disabled .vxe-input--clear-icon,.vxe-input.is--disabled .vxe-input--control-icon,.vxe-input.is--disabled .vxe-input--prefix,.vxe-input.is--disabled .vxe-input--suffix{cursor:not-allowed}.vxe-input.is--disabled .vxe-input--prefix,.vxe-input.is--disabled .vxe-input--suffix{background-color:var(--vxe-ui-input-disabled-background-color)}.vxe-input{display:inline-flex;flex-direction:row;position:relative;border-radius:var(--vxe-ui-base-border-radius);width:180px;border:1px solid var(--vxe-ui-input-border-color)}.vxe-input.is--active{border:1px solid var(--vxe-ui-font-primary-color)}.vxe-input.show--clear:hover .vxe-input--clear-icon{display:block}.vxe-input--prefix{border-radius:var(--vxe-ui-base-border-radius) 0 0 var(--vxe-ui-base-border-radius)}.vxe-input--suffix{border-radius:0 var(--vxe-ui-base-border-radius) var(--vxe-ui-base-border-radius) 0}.vxe-input--prefix,.vxe-input--suffix{display:flex;flex-direction:row;align-items:center;flex-shrink:0;background-color:var(--vxe-ui-layout-background-color)}.vxe-input--prefix-icon{padding-left:.5em}.vxe-input--clear-icon,.vxe-input--control-icon,.vxe-input--suffix-icon{padding-right:.5em}.vxe-input--prefix-icon,.vxe-input--suffix-icon{color:var(--vxe-ui-input-placeholder-color)}.vxe-input--clear-icon,.vxe-input--control-icon{height:100%;color:var(--vxe-ui-input-placeholder-color);cursor:pointer}.vxe-input--clear-icon{display:none}.vxe-input--clear-icon:hover{color:var(--vxe-ui-font-color)}.vxe-input--clear-icon:active{color:var(--vxe-ui-font-primary-color)}.vxe-input--number-btn{height:50%;display:flex;align-items:center;justify-content:center}.vxe-input--number-btn:hover{color:var(--vxe-ui-font-color)}.vxe-input--number-btn:active{color:var(--vxe-ui-font-primary-color)}.vxe-input--number-icon{display:flex;flex-direction:column;height:100%}.vxe-input--number-icon .vxe-input--number-btn.is--disabled{cursor:no-drop;color:var(--vxe-ui-font-disabled-color)}.vxe-input--count{flex-shrink:0;color:var(--vxe-ui-input-count-color);background-color:var(--vxe-ui-layout-background-color);padding-right:.6em}.vxe-input--count.is--error{color:var(--vxe-ui-input-count-error-color)}.vxe-input.is--left .vxe-input--inner{text-align:left}.vxe-input.is--center .vxe-input--inner{text-align:center}.vxe-input.is--right .vxe-input--inner{text-align:right}.vxe-input--panel{display:none;position:absolute;left:0;padding:4px 0;color:var(--vxe-ui-font-color);font-size:var(--vxe-ui-font-size-default);text-align:left}.vxe-input--panel.is--transfer{position:fixed}.vxe-input--panel.ani--leave{display:block;opacity:0;transform:scaleY(.5);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1);transform-origin:center top;backface-visibility:hidden;transform-style:preserve-3d}.vxe-input--panel.ani--leave[placement=top]{transform-origin:center bottom}.vxe-input--panel.ani--enter{opacity:1;transform:scaleY(1)}.vxe-input--panel{pointer-events:none}.vxe-input--panel-layout-wrapper,.vxe-input--panel-wrapper{pointer-events:auto;background-color:var(--vxe-ui-layout-background-color);border:1px solid var(--vxe-ui-base-popup-border-color);box-shadow:0 0 6px 2px rgba(0,0,0,.1);border-radius:var(--vxe-ui-base-border-radius)}.vxe-input--panel-wrapper{overflow-x:hidden;overflow-y:auto}.vxe-input--panel-layout-wrapper{display:inline-flex;flex-direction:row}.vxe-input--panel.type--date,.vxe-input--panel.type--month,.vxe-input--panel.type--quarter,.vxe-input--panel.type--week,.vxe-input--panel.type--year{-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxe-input--panel.type--datetime .vxe-input--panel-right-wrapper{display:flex;flex-direction:column;border-left:1px solid var(--vxe-ui-input-border-color)}.vxe-input--panel.type--date .vxe-input--date-picker-body th,.vxe-input--panel.type--datetime .vxe-input--date-picker-body th{width:14.28571%}.vxe-input--panel.type--week .vxe-input--date-picker-body table th{width:12%}.vxe-input--panel.type--week .vxe-input--date-picker-body table th:first-child{width:14%}.vxe-input--panel.type--quarter .vxe-input--date-picker-body table th{width:50%}.vxe-input--panel.type--month .vxe-input--date-picker-body td,.vxe-input--panel.type--year .vxe-input--date-picker-body td{width:25%}.vxe-input--time-picker-title{flex-grow:1;text-align:center;border:1px solid var(--vxe-ui-input-border-color);border-radius:var(--vxe-ui-base-border-radius);padding:0 .1em;margin-right:.5em}.vxe-input--time-picker-btn{display:flex;flex-shrink:0}.vxe-input--time-picker-btn:active{transform:scale(.9)}.vxe-input--date-picker-confirm,.vxe-input--time-picker-confirm{outline:0;border:1px solid var(--vxe-ui-input-border-color);border-radius:var(--vxe-ui-base-border-radius);cursor:pointer;color:var(--vxe-ui-input-date-time-confirm-button-color);border-color:var(--vxe-ui-font-primary-color);background-color:var(--vxe-ui-font-primary-color);padding:0 .5em}.vxe-input--date-picker-confirm:hover,.vxe-input--time-picker-confirm:hover{background-color:var(--vxe-ui-font-primary-lighten-color);border-color:var(--vxe-ui-font-primary-lighten-color)}.vxe-input--date-picker-confirm:active,.vxe-input--time-picker-confirm:active{background-color:var(--vxe-ui-font-primary-darken-color);border-color:var(--vxe-ui-font-primary-darken-color)}.vxe-input--time-picker-header{display:flex;flex-direction:row;position:relative;flex-shrink:0}.vxe-input--date-picker-header{display:flex;flex-direction:row;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxe-input--date-picker-header .vxe-input--date-picker-type-wrapper{flex-grow:1}.vxe-input--date-picker-header .vxe-input--date-picker-btn-wrapper{flex-shrink:0;text-align:center}.vxe-input--date-picker-type-wrapper .vxe-input--date-picker-btn,.vxe-input--date-picker-type-wrapper .vxe-input--date-picker-label{display:inline-block}.vxe-input--date-picker-btn-wrapper{display:flex;flex-direction:row}.vxe-input--date-picker-btn,.vxe-input--date-picker-label{display:flex;align-items:center;justify-content:center;background-color:var(--vxe-ui-layout-background-color)}.vxe-input--date-picker-btn.is--disabled{color:var(--vxe-ui-font-disabled-color);cursor:no-drop}.vxe-input--date-picker-btn:not(.is--disabled){cursor:pointer}.vxe-input--date-picker-btn:not(.is--disabled):hover{background-color:#fff}.vxe-input--date-picker-btn:not(.is--disabled):active{background-color:#fff}.vxe-input--date-picker-btns .vxe-input--date-picker-btn{margin-left:.6em}.vxe-input--date-picker-btns .vxe-input--date-picker-btn:first-child{margin-left:0}.vxe-input--date-picker-body{border-radius:var(--vxe-ui-base-border-radius);border:1px solid var(--vxe-ui-base-popup-border-color);-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxe-input--date-picker-body table{border:0;width:100%;border-spacing:0;border-collapse:separate;text-align:center;table-layout:fixed}.vxe-input--date-picker-body td,.vxe-input--date-picker-body th{font-weight:400}.vxe-input--date-picker-body th{box-shadow:inset 0 -1px 0 0 var(--vxe-ui-base-popup-border-color)}.vxe-input--date-picker-body td.is--next,.vxe-input--date-picker-body td.is--prev{color:var(--vxe-ui-font-disabled-color)}.vxe-input--date-picker-body td.is--next .vxe-input--date-festival,.vxe-input--date-picker-body td.is--next .vxe-input--date-label,.vxe-input--date-picker-body td.is--prev .vxe-input--date-festival,.vxe-input--date-picker-body td.is--prev .vxe-input--date-label{color:var(--vxe-ui-font-disabled-color)}.vxe-input--date-picker-body td.is--now{box-shadow:inset 0 0 0 1px var(--vxe-ui-base-popup-border-color)}.vxe-input--date-picker-body td.is--now:not(.is--selected).is--current{color:var(--vxe-ui-font-primary-color)}.vxe-input--date-picker-body td.is--now:not(.is--selected).is--current .vxe-input--date-festival,.vxe-input--date-picker-body td.is--now:not(.is--selected).is--current .vxe-input--date-label{color:var(--vxe-ui-font-primary-color)}.vxe-input--date-picker-body td.is--hover{background-color:var(--vxe-ui-input-date-picker-hover-background-color)}.vxe-input--date-picker-body td.is--selected{color:var(--vxe-ui-input-date-picker-selected-color);background-color:var(--vxe-ui-font-primary-color)}.vxe-input--date-picker-body td.is--selected.is--next,.vxe-input--date-picker-body td.is--selected.is--prev{background-color:var(--vxe-ui-font-primary-lighten-color)}.vxe-input--date-picker-body td.is--selected .vxe-input--date-festival,.vxe-input--date-picker-body td.is--selected .vxe-input--date-label{color:var(--vxe-ui-input-date-picker-festival-selected-color)}.vxe-input--date-picker-body td.is--selected .vxe-input--date-label.is-notice:before{background-color:var(--vxe-ui-input-date-picker-notice-selected-background-color)}.vxe-input--date-picker-body td:not(.is--disabled){cursor:pointer}.vxe-input--date-picker-body td.is--disabled{cursor:no-drop;color:var(--vxe-ui-input-disabled-color);background-color:var(--vxe-ui-input-disabled-background-color)}.vxe-input--date-picker-body td.is--disabled .vxe-input--date-festival,.vxe-input--date-picker-body td.is--disabled .vxe-input--date-label{color:var(--vxe-ui-input-disabled-color)}.vxe-input--date-week-view th:first-child{box-shadow:inset -1px -1px 0 0 var(--vxe-ui-base-popup-border-color)}.vxe-input--date-week-view td:first-child{box-shadow:inset -1px 0 0 0 var(--vxe-ui-base-popup-border-color)}.vxe-input--date-festival,.vxe-input--date-label{display:block;overflow:hidden}.vxe-input--date-label{position:relative}.vxe-input--date-label.is-notice:before{content:"";position:absolute;width:4px;height:4px;left:.8em;top:.1em;transform:translateX(-50%);border-radius:100%;background-color:var(--vxe-ui-input-date-notice-background-color)}.vxe-input--date-label--extra{position:absolute;right:.1em;top:-.2em;font-size:12px;line-height:12px;transform:scale(.7);color:var(--vxe-ui-input-date-extra-color)}.vxe-input--date-label--extra.is-important{color:var(--vxe-ui-input-date-extra-important-color)}.vxe-input--date-festival{color:var(--vxe-ui-input-date-festival-color);height:14px;line-height:1;overflow:hidden}.vxe-input--date-festival.is-important{color:var(--vxe-ui-input-date-festival-important-color)}.vxe-input--date-festival--label{display:block;font-size:12px;transform:scale(.8)}@keyframes festivalOverlap2{0%,100%,45%{transform:translateY(0)}50%,95%{transform:translateY(-14px)}}@keyframes festivalOverlap3{0%,100%,20%{transform:translateY(0)}25%,45%,75%,95%{transform:translateY(-14px)}50%,70%{transform:translateY(-28px)}}.vxe-input--date-festival--overlap{display:block;font-size:12px}.vxe-input--date-festival--overlap.overlap--2{animation:festivalOverlap2 6s infinite ease-in-out}.vxe-input--date-festival--overlap.overlap--3{animation:festivalOverlap3 9s infinite ease-in-out}.vxe-input--date-festival--overlap>span{height:14px;display:block;transform:scale(.8)}.vxe-input--time-picker-body{position:relative;display:flex;flex-direction:row;border:1px solid var(--vxe-ui-base-popup-border-color);flex-grow:1;border-radius:var(--vxe-ui-base-border-radius);-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxe-input--time-picker-body>ul{height:100%;overflow:hidden;margin:0;padding:0}.vxe-input--time-picker-body>ul:after,.vxe-input--time-picker-body>ul:before{content:" ";display:block}.vxe-input--time-picker-body>ul:hover{overflow-y:auto}.vxe-input--time-picker-body>ul>li{display:block}.vxe-input--time-picker-body>ul>li:hover{background-color:var(--vxe-ui-input-date-picker-hover-background-color);cursor:pointer}.vxe-input--time-picker-body>ul>li.is--selected{font-weight:700;color:var(--vxe-ui-font-primary-color)}.vxe-input--time-picker-body .vxe-input--time-picker-minute-list{border-left:1px solid var(--vxe-ui-base-popup-border-color)}.vxe-input--time-picker-body .vxe-input--time-picker-second-list{border-left:1px solid var(--vxe-ui-base-popup-border-color)}.vxe-input{font-size:var(--vxe-ui-font-size-default);height:var(--vxe-ui-input-height-default);line-height:var(--vxe-ui-input-height-default)}.vxe-input .vxe-input--inner[type=date]::-webkit-inner-spin-button,.vxe-input .vxe-input--inner[type=month]::-webkit-inner-spin-button,.vxe-input .vxe-input--inner[type=week]::-webkit-inner-spin-button{margin-top:6px}.vxe-input .vxe-input--inner[type=date]::-webkit-inner-spin-button,.vxe-input .vxe-input--inner[type=month]::-webkit-inner-spin-button,.vxe-input .vxe-input--inner[type=number]::-webkit-inner-spin-button,.vxe-input .vxe-input--inner[type=week]::-webkit-inner-spin-button{height:24px}.vxe-input.size--medium{font-size:var(--vxe-ui-font-size-medium);height:var(--vxe-ui-input-height-medium);line-height:var(--vxe-ui-input-height-medium)}.vxe-input.size--medium .vxe-input--inner[type=date]::-webkit-inner-spin-button,.vxe-input.size--medium .vxe-input--inner[type=month]::-webkit-inner-spin-button,.vxe-input.size--medium .vxe-input--inner[type=week]::-webkit-inner-spin-button{margin-top:4px}.vxe-input.size--small{font-size:var(--vxe-ui-font-size-small);height:var(--vxe-ui-input-height-small);line-height:var(--vxe-ui-input-height-small)}.vxe-input.size--small .vxe-input--inner[type=date]::-webkit-inner-spin-button,.vxe-input.size--small .vxe-input--inner[type=month]::-webkit-inner-spin-button,.vxe-input.size--small .vxe-input--inner[type=week]::-webkit-inner-spin-button{margin-top:2px}.vxe-input.size--mini{font-size:var(--vxe-ui-font-size-mini);height:var(--vxe-ui-input-height-mini);line-height:var(--vxe-ui-input-height-mini)}.vxe-input.size--mini .vxe-input--inner[type=date]::-webkit-inner-spin-button,.vxe-input.size--mini .vxe-input--inner[type=month]::-webkit-inner-spin-button,.vxe-input.size--mini .vxe-input--inner[type=week]::-webkit-inner-spin-button{margin-top:0}.vxe-input--panel{font-size:var(--vxe-ui-font-size-default)}.vxe-input--panel .vxe-input--panel-wrapper{max-height:380px}.vxe-input--panel.type--date .vxe-input--panel-wrapper,.vxe-input--panel.type--month .vxe-input--panel-wrapper,.vxe-input--panel.type--quarter .vxe-input--panel-wrapper,.vxe-input--panel.type--time .vxe-input--panel-wrapper,.vxe-input--panel.type--week .vxe-input--panel-wrapper,.vxe-input--panel.type--year .vxe-input--panel-wrapper{padding:11px}.vxe-input--panel.type--date .vxe-input--panel-wrapper,.vxe-input--panel.type--month .vxe-input--panel-wrapper,.vxe-input--panel.type--quarter .vxe-input--panel-wrapper,.vxe-input--panel.type--year .vxe-input--panel-wrapper{width:336px}.vxe-input--panel.type--week .vxe-input--panel-wrapper{width:380px}.vxe-input--panel.type--time .vxe-input--panel-wrapper{display:inline-flex;flex-direction:column}.vxe-input--panel.type--datetime .vxe-input--panel-left-wrapper{width:336px}.vxe-input--panel.type--datetime .vxe-input--panel-left-wrapper,.vxe-input--panel.type--datetime .vxe-input--panel-right-wrapper{padding:11px}.vxe-input--panel .vxe-input--time-picker-title{height:30px;line-height:30px}.vxe-input--panel .vxe-input--date-picker-btn,.vxe-input--panel .vxe-input--date-picker-label{height:30px;line-height:30px}.vxe-input--panel .vxe-input--date-picker-btn-wrapper .vxe-input--date-picker-btn{margin-left:8px}.vxe-input--panel .vxe-input--date-picker-btn-wrapper .vxe-input--date-picker-btn:active{transform:scale(.9)}.vxe-input--panel .vxe-input--date-picker-btn-wrapper .vxe-input--date-picker-current-btn,.vxe-input--panel .vxe-input--date-picker-btn-wrapper .vxe-input--date-picker-next-btn,.vxe-input--panel .vxe-input--date-picker-btn-wrapper .vxe-input--date-picker-prev-btn{width:30px;border-radius:var(--vxe-ui-base-border-radius);border:1px solid var(--vxe-ui-input-border-color)}.vxe-input--panel .vxe-input--date-picker-type-wrapper .vxe-input--date-picker-btns,.vxe-input--panel .vxe-input--date-picker-type-wrapper .vxe-input--date-picker-label{padding:0 9px}.vxe-input--panel .vxe-input--date-picker-header,.vxe-input--panel .vxe-input--time-picker-header{padding-bottom:8px}.vxe-input--panel .vxe-input--date-picker-body table,.vxe-input--panel .vxe-input--time-picker-body{height:calc(var(--vxe-ui-input-date-time-week-row-height-default) * 6 + var(--vxe-ui-input-date-title-height-default))}.vxe-input--panel .vxe-input--time-picker-body>ul{width:48px}.vxe-input--panel .vxe-input--time-picker-body>ul:after,.vxe-input--panel .vxe-input--time-picker-body>ul:before{height:120px}.vxe-input--panel .vxe-input--time-picker-body>ul>li{height:26px;padding-left:9px}.vxe-input--panel .vxe-input--time-picker-body .vxe-input--time-picker-minute-list{left:48px}.vxe-input--panel .vxe-input--time-picker-body .vxe-input--time-picker-second-list{left:96px}.vxe-input--panel .vxe-input--date-day-view td,.vxe-input--panel .vxe-input--date-week-view td{height:var(--vxe-ui-input-date-time-week-row-height-default)}.vxe-input--panel .vxe-input--date-quarter-view td{height:var(--vxe-ui-input-date-quarter-row-height-default)}.vxe-input--panel .vxe-input--date-month-view td,.vxe-input--panel .vxe-input--date-year-view td{height:var(--vxe-ui-input-date-month-year-row-height-default)}.vxe-input--panel .vxe-input--date-picker-body th{height:var(--vxe-ui-input-date-title-height-default)}.vxe-input--panel .vxe-input--date-picker-confirm,.vxe-input--panel .vxe-input--time-picker-confirm{height:30px}.vxe-input--panel .vxe-input--date-label{line-height:calc(var(--vxe-ui-font-size-default) + 1px)}.vxe-input--panel.size--medium{font-size:var(--vxe-ui-font-size-medium)}.vxe-input--panel.size--medium .vxe-input--panel-wrapper{max-height:360px}.vxe-input--panel.size--medium.type--date .vxe-input--panel-wrapper,.vxe-input--panel.size--medium.type--month .vxe-input--panel-wrapper,.vxe-input--panel.size--medium.type--quarter .vxe-input--panel-wrapper,.vxe-input--panel.size--medium.type--time .vxe-input--panel-wrapper,.vxe-input--panel.size--medium.type--week .vxe-input--panel-wrapper,.vxe-input--panel.size--medium.type--year .vxe-input--panel-wrapper{padding:10px}.vxe-input--panel.size--medium.type--date .vxe-input--panel-wrapper,.vxe-input--panel.size--medium.type--month .vxe-input--panel-wrapper,.vxe-input--panel.size--medium.type--quarter .vxe-input--panel-wrapper,.vxe-input--panel.size--medium.type--year .vxe-input--panel-wrapper{width:336px}.vxe-input--panel.size--medium.type--week .vxe-input--panel-wrapper{width:380px}.vxe-input--panel.size--medium.type--time .vxe-input--panel-wrapper{display:inline-flex;flex-direction:column}.vxe-input--panel.size--medium.type--datetime .vxe-input--panel-left-wrapper{width:336px}.vxe-input--panel.size--medium.type--datetime .vxe-input--panel-left-wrapper,.vxe-input--panel.size--medium.type--datetime .vxe-input--panel-right-wrapper{padding:10px}.vxe-input--panel.size--medium .vxe-input--time-picker-title{height:29px;line-height:29px}.vxe-input--panel.size--medium .vxe-input--date-picker-btn,.vxe-input--panel.size--medium .vxe-input--date-picker-label{height:29px;line-height:29px}.vxe-input--panel.size--medium .vxe-input--date-picker-btn-wrapper .vxe-input--date-picker-btn{margin-left:7px}.vxe-input--panel.size--medium .vxe-input--date-picker-btn-wrapper .vxe-input--date-picker-btn:active{transform:scale(.9)}.vxe-input--panel.size--medium .vxe-input--date-picker-btn-wrapper .vxe-input--date-picker-current-btn,.vxe-input--panel.size--medium .vxe-input--date-picker-btn-wrapper .vxe-input--date-picker-next-btn,.vxe-input--panel.size--medium .vxe-input--date-picker-btn-wrapper .vxe-input--date-picker-prev-btn{width:29px;border-radius:var(--vxe-ui-base-border-radius);border:1px solid var(--vxe-ui-input-border-color)}.vxe-input--panel.size--medium .vxe-input--date-picker-type-wrapper .vxe-input--date-picker-btns,.vxe-input--panel.size--medium .vxe-input--date-picker-type-wrapper .vxe-input--date-picker-label{padding:0 8px}.vxe-input--panel.size--medium .vxe-input--date-picker-header,.vxe-input--panel.size--medium .vxe-input--time-picker-header{padding-bottom:7px}.vxe-input--panel.size--medium .vxe-input--date-picker-body table,.vxe-input--panel.size--medium .vxe-input--time-picker-body{height:calc(var(--vxe-ui-input-date-time-week-row-height-medium) * 6 + var(--vxe-ui-input-date-title-height-medium))}.vxe-input--panel.size--medium .vxe-input--time-picker-body>ul{width:48px}.vxe-input--panel.size--medium .vxe-input--time-picker-body>ul:after,.vxe-input--panel.size--medium .vxe-input--time-picker-body>ul:before{height:120px}.vxe-input--panel.size--medium .vxe-input--time-picker-body>ul>li{height:26px;padding-left:8px}.vxe-input--panel.size--medium .vxe-input--time-picker-body .vxe-input--time-picker-minute-list{left:48px}.vxe-input--panel.size--medium .vxe-input--time-picker-body .vxe-input--time-picker-second-list{left:96px}.vxe-input--panel.size--medium .vxe-input--date-day-view td,.vxe-input--panel.size--medium .vxe-input--date-week-view td{height:var(--vxe-ui-input-date-time-week-row-height-medium)}.vxe-input--panel.size--medium .vxe-input--date-quarter-view td{height:var(--vxe-ui-input-date-quarter-row-height-medium)}.vxe-input--panel.size--medium .vxe-input--date-month-view td,.vxe-input--panel.size--medium .vxe-input--date-year-view td{height:var(--vxe-ui-input-date-month-year-row-height-medium)}.vxe-input--panel.size--medium .vxe-input--date-picker-body th{height:var(--vxe-ui-input-date-title-height-medium)}.vxe-input--panel.size--medium .vxe-input--date-picker-confirm,.vxe-input--panel.size--medium .vxe-input--time-picker-confirm{height:29px}.vxe-input--panel.size--medium .vxe-input--date-label{line-height:calc(var(--vxe-ui-font-size-medium) + 1px)}.vxe-input--panel.size--small{font-size:var(--vxe-ui-font-size-small)}.vxe-input--panel.size--small .vxe-input--panel-wrapper{max-height:340px}.vxe-input--panel.size--small.type--date .vxe-input--panel-wrapper,.vxe-input--panel.size--small.type--month .vxe-input--panel-wrapper,.vxe-input--panel.size--small.type--quarter .vxe-input--panel-wrapper,.vxe-input--panel.size--small.type--time .vxe-input--panel-wrapper,.vxe-input--panel.size--small.type--week .vxe-input--panel-wrapper,.vxe-input--panel.size--small.type--year .vxe-input--panel-wrapper{padding:9px}.vxe-input--panel.size--small.type--date .vxe-input--panel-wrapper,.vxe-input--panel.size--small.type--month .vxe-input--panel-wrapper,.vxe-input--panel.size--small.type--quarter .vxe-input--panel-wrapper,.vxe-input--panel.size--small.type--year .vxe-input--panel-wrapper{width:312px}.vxe-input--panel.size--small.type--week .vxe-input--panel-wrapper{width:354px}.vxe-input--panel.size--small.type--time .vxe-input--panel-wrapper{display:inline-flex;flex-direction:column}.vxe-input--panel.size--small.type--datetime .vxe-input--panel-left-wrapper{width:312px}.vxe-input--panel.size--small.type--datetime .vxe-input--panel-left-wrapper,.vxe-input--panel.size--small.type--datetime .vxe-input--panel-right-wrapper{padding:9px}.vxe-input--panel.size--small .vxe-input--time-picker-title{height:28px;line-height:28px}.vxe-input--panel.size--small .vxe-input--date-picker-btn,.vxe-input--panel.size--small .vxe-input--date-picker-label{height:28px;line-height:28px}.vxe-input--panel.size--small .vxe-input--date-picker-btn-wrapper .vxe-input--date-picker-btn{margin-left:6px}.vxe-input--panel.size--small .vxe-input--date-picker-btn-wrapper .vxe-input--date-picker-btn:active{transform:scale(.9)}.vxe-input--panel.size--small .vxe-input--date-picker-btn-wrapper .vxe-input--date-picker-current-btn,.vxe-input--panel.size--small .vxe-input--date-picker-btn-wrapper .vxe-input--date-picker-next-btn,.vxe-input--panel.size--small .vxe-input--date-picker-btn-wrapper .vxe-input--date-picker-prev-btn{width:28px;border-radius:var(--vxe-ui-base-border-radius);border:1px solid var(--vxe-ui-input-border-color)}.vxe-input--panel.size--small .vxe-input--date-picker-type-wrapper .vxe-input--date-picker-btns,.vxe-input--panel.size--small .vxe-input--date-picker-type-wrapper .vxe-input--date-picker-label{padding:0 7px}.vxe-input--panel.size--small .vxe-input--date-picker-header,.vxe-input--panel.size--small .vxe-input--time-picker-header{padding-bottom:6px}.vxe-input--panel.size--small .vxe-input--date-picker-body table,.vxe-input--panel.size--small .vxe-input--time-picker-body{height:calc(var(--vxe-ui-input-date-time-week-row-height-small) * 6 + var(--vxe-ui-input-date-title-height-small))}.vxe-input--panel.size--small .vxe-input--time-picker-body>ul{width:44px}.vxe-input--panel.size--small .vxe-input--time-picker-body>ul:after,.vxe-input--panel.size--small .vxe-input--time-picker-body>ul:before{height:110px}.vxe-input--panel.size--small .vxe-input--time-picker-body>ul>li{height:26px;padding-left:7px}.vxe-input--panel.size--small .vxe-input--time-picker-body .vxe-input--time-picker-minute-list{left:44px}.vxe-input--panel.size--small .vxe-input--time-picker-body .vxe-input--time-picker-second-list{left:88px}.vxe-input--panel.size--small .vxe-input--date-day-view td,.vxe-input--panel.size--small .vxe-input--date-week-view td{height:var(--vxe-ui-input-date-time-week-row-height-small)}.vxe-input--panel.size--small .vxe-input--date-quarter-view td{height:var(--vxe-ui-input-date-quarter-row-height-small)}.vxe-input--panel.size--small .vxe-input--date-month-view td,.vxe-input--panel.size--small .vxe-input--date-year-view td{height:var(--vxe-ui-input-date-month-year-row-height-small)}.vxe-input--panel.size--small .vxe-input--date-picker-body th{height:var(--vxe-ui-input-date-title-height-small)}.vxe-input--panel.size--small .vxe-input--date-picker-confirm,.vxe-input--panel.size--small .vxe-input--time-picker-confirm{height:28px}.vxe-input--panel.size--small .vxe-input--date-label{line-height:calc(var(--vxe-ui-font-size-small) + 1px)}.vxe-input--panel.size--mini{font-size:var(--vxe-ui-font-size-mini)}.vxe-input--panel.size--mini .vxe-input--panel-wrapper{max-height:320px}.vxe-input--panel.size--mini.type--date .vxe-input--panel-wrapper,.vxe-input--panel.size--mini.type--month .vxe-input--panel-wrapper,.vxe-input--panel.size--mini.type--quarter .vxe-input--panel-wrapper,.vxe-input--panel.size--mini.type--time .vxe-input--panel-wrapper,.vxe-input--panel.size--mini.type--week .vxe-input--panel-wrapper,.vxe-input--panel.size--mini.type--year .vxe-input--panel-wrapper{padding:8px}.vxe-input--panel.size--mini.type--date .vxe-input--panel-wrapper,.vxe-input--panel.size--mini.type--month .vxe-input--panel-wrapper,.vxe-input--panel.size--mini.type--quarter .vxe-input--panel-wrapper,.vxe-input--panel.size--mini.type--year .vxe-input--panel-wrapper{width:288px}.vxe-input--panel.size--mini.type--week .vxe-input--panel-wrapper{width:326px}.vxe-input--panel.size--mini.type--time .vxe-input--panel-wrapper{display:inline-flex;flex-direction:column}.vxe-input--panel.size--mini.type--datetime .vxe-input--panel-left-wrapper{width:288px}.vxe-input--panel.size--mini.type--datetime .vxe-input--panel-left-wrapper,.vxe-input--panel.size--mini.type--datetime .vxe-input--panel-right-wrapper{padding:8px}.vxe-input--panel.size--mini .vxe-input--time-picker-title{height:27px;line-height:27px}.vxe-input--panel.size--mini .vxe-input--date-picker-btn,.vxe-input--panel.size--mini .vxe-input--date-picker-label{height:27px;line-height:27px}.vxe-input--panel.size--mini .vxe-input--date-picker-btn-wrapper .vxe-input--date-picker-btn{margin-left:5px}.vxe-input--panel.size--mini .vxe-input--date-picker-btn-wrapper .vxe-input--date-picker-btn:active{transform:scale(.9)}.vxe-input--panel.size--mini .vxe-input--date-picker-btn-wrapper .vxe-input--date-picker-current-btn,.vxe-input--panel.size--mini .vxe-input--date-picker-btn-wrapper .vxe-input--date-picker-next-btn,.vxe-input--panel.size--mini .vxe-input--date-picker-btn-wrapper .vxe-input--date-picker-prev-btn{width:27px;border-radius:var(--vxe-ui-base-border-radius);border:1px solid var(--vxe-ui-input-border-color)}.vxe-input--panel.size--mini .vxe-input--date-picker-type-wrapper .vxe-input--date-picker-btns,.vxe-input--panel.size--mini .vxe-input--date-picker-type-wrapper .vxe-input--date-picker-label{padding:0 6px}.vxe-input--panel.size--mini .vxe-input--date-picker-header,.vxe-input--panel.size--mini .vxe-input--time-picker-header{padding-bottom:5px}.vxe-input--panel.size--mini .vxe-input--date-picker-body table,.vxe-input--panel.size--mini .vxe-input--time-picker-body{height:calc(var(--vxe-ui-input-date-time-week-row-height-mini) * 6 + var(--vxe-ui-input-date-title-height-mini))}.vxe-input--panel.size--mini .vxe-input--time-picker-body>ul{width:42px}.vxe-input--panel.size--mini .vxe-input--time-picker-body>ul:after,.vxe-input--panel.size--mini .vxe-input--time-picker-body>ul:before{height:100px}.vxe-input--panel.size--mini .vxe-input--time-picker-body>ul>li{height:26px;padding-left:6px}.vxe-input--panel.size--mini .vxe-input--time-picker-body .vxe-input--time-picker-minute-list{left:42px}.vxe-input--panel.size--mini .vxe-input--time-picker-body .vxe-input--time-picker-second-list{left:84px}.vxe-input--panel.size--mini .vxe-input--date-day-view td,.vxe-input--panel.size--mini .vxe-input--date-week-view td{height:var(--vxe-ui-input-date-time-week-row-height-mini)}.vxe-input--panel.size--mini .vxe-input--date-quarter-view td{height:var(--vxe-ui-input-date-quarter-row-height-mini)}.vxe-input--panel.size--mini .vxe-input--date-month-view td,.vxe-input--panel.size--mini .vxe-input--date-year-view td{height:var(--vxe-ui-input-date-month-year-row-height-mini)}.vxe-input--panel.size--mini .vxe-input--date-picker-body th{height:var(--vxe-ui-input-date-title-height-mini)}.vxe-input--panel.size--mini .vxe-input--date-picker-confirm,.vxe-input--panel.size--mini .vxe-input--time-picker-confirm{height:27px}.vxe-input--panel.size--mini .vxe-input--date-label{line-height:calc(var(--vxe-ui-font-size-mini) + 1px)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vxe-pc-ui",
-  "version": "4.4.6",
+  "version": "4.4.8",
   "description": "A vue based PC component library",
   "scripts": {
     "update": "npm install --legacy-peer-deps",

package/packages/calendar/src/calendar.ts

@@ -1,5 +1,5 @@
 import { defineComponent, h, ref, Ref, computed, reactive, watch, PropType, onMounted } from 'vue'
-import { getConfig, getI18n, createEvent, useSize } from '../../ui'
+import { getConfig, getI18n, createEvent, useSize, renderEmptyElement } from '../../ui'
 import { getDateQuarter } from '../../date-picker/src/util'
 import { toCssUnit } from '../..//ui/src/dom'
 import VxeButtonComponent from '../../button/src/button'
@@ -242,8 +242,10 @@ export default defineComponent({
       return years
     })
 
-    const computeSelectDatePanelLabel = computed(() => {
+    const computeSelectDatePanelObj = computed(() => {
       const isCalendarType = computeIsCalendarType.value
+      let y = ''
+      let m = ''
       if (isCalendarType) {
         const { datePanelType, selectMonth } = reactData
         const yearList = computeYearList.value
@@ -253,16 +255,19 @@ export default defineComponent({
           year = selectMonth.getFullYear()
           month = selectMonth.getMonth() + 1
         }
-        if (datePanelType === 'quarter') {
-          return getI18n('vxe.input.date.quarterLabel', [year])
-        } else if (datePanelType === 'month') {
-          return getI18n('vxe.input.date.monthLabel', [year])
+        if (datePanelType === 'quarter' || datePanelType === 'month') {
+          y = `${year}`
         } else if (datePanelType === 'year') {
-          return yearList.length ? `${yearList[0].year} - ${yearList[yearList.length - 1].year}` : ''
+          y = yearList.length ? `${yearList[0].year} - ${yearList[yearList.length - 1].year}` : ''
+        } else {
+          y = `${year}`
+          m = month ? getI18n(`vxe.input.date.m${month}`) : '-'
         }
-        return getI18n('vxe.input.date.dayLabel', [year, month ? getI18n(`vxe.input.date.m${month}`) : '-'])
       }
-      return ''
+      return {
+        y,
+        m
+      }
     })
 
     const computeFirstDayOfWeek = computed(() => {
@@ -546,7 +551,11 @@ export default defineComponent({
       dateMonthHandle(currentDate, 0)
     }
 
-    const dateToggleTypeEvent = (evnt: MouseEvent) => {
+    const dateToggleYearTypeEvent = () => {
+      reactData.datePanelType = 'year'
+    }
+
+    const dateToggleMonthTypeEvent = (evnt: MouseEvent) => {
       let { datePanelType } = reactData
       if (datePanelType === 'month' || datePanelType === 'quarter') {
         datePanelType = 'year'
@@ -1035,7 +1044,7 @@ export default defineComponent({
       const { datePanelType } = reactData
       const isDisabledPrevDateBtn = computeIsDisabledPrevDateBtn.value
       const isDisabledNextDateBtn = computeIsDisabledNextDateBtn.value
-      const selectDatePanelLabel = computeSelectDatePanelLabel.value
+      const selectDatePanelObj = computeSelectDatePanelObj.value
       return [
         h('div', {
           class: 'vxe-calendar--header'
@@ -1043,11 +1052,28 @@ export default defineComponent({
           h('div', {
             class: 'vxe-calendar--type-wrapper'
           }, [
-            h(VxeButtonComponent, {
-              disabled: datePanelType === 'year',
-              content: selectDatePanelLabel,
-              onClick: dateToggleTypeEvent
-            })
+            datePanelType === 'year'
+              ? h(VxeButtonComponent, {
+                class: 'vxe-calendar--date-picker-label',
+                disabled: datePanelType === 'year',
+                content: selectDatePanelObj.y
+              })
+              : h('span', {
+                class: 'vxe-calendar--date-picker-btns'
+              }, [
+                h(VxeButtonComponent, {
+                  class: 'vxe-calendar--date-picker-btn',
+                  content: selectDatePanelObj.y,
+                  onClick: dateToggleYearTypeEvent
+                }),
+                selectDatePanelObj.m
+                  ? h(VxeButtonComponent, {
+                    class: 'vxe-calendar--date-picker-btn',
+                    content: selectDatePanelObj.m,
+                    onClick: dateToggleMonthTypeEvent
+                  })
+                  : renderEmptyElement($xeCalendar)
+              ])
           ]),
           h('div', {
             class: 'vxe-calendar--btn-wrapper'

package/packages/date-picker/src/date-picker.ts

@@ -381,8 +381,10 @@ export default defineComponent({
       return years
     })
 
-    const computeSelectDatePanelLabel = computed(() => {
+    const computeSelectDatePanelObj = computed(() => {
       const isDatePickerType = computeIsDatePickerType.value
+      let y = ''
+      let m = ''
       if (isDatePickerType) {
         const { datePanelType, selectMonth } = reactData
         const yearList = computeYearList.value
@@ -392,16 +394,19 @@ export default defineComponent({
           year = selectMonth.getFullYear()
           month = selectMonth.getMonth() + 1
         }
-        if (datePanelType === 'quarter') {
-          return getI18n('vxe.input.date.quarterLabel', [year])
-        } else if (datePanelType === 'month') {
-          return getI18n('vxe.input.date.monthLabel', [year])
+        if (datePanelType === 'quarter' || datePanelType === 'month') {
+          y = getI18n('vxe.datePicker.yearTitle', [year])
         } else if (datePanelType === 'year') {
-          return yearList.length ? `${yearList[0].year} - ${yearList[yearList.length - 1].year}` : ''
+          y = yearList.length ? `${yearList[0].year} - ${yearList[yearList.length - 1].year}` : ''
+        } else {
+          y = getI18n('vxe.datePicker.yearTitle', [year])
+          m = month ? getI18n(`vxe.input.date.m${month}`) : '-'
         }
-        return getI18n('vxe.input.date.dayLabel', [year, month ? getI18n(`vxe.input.date.m${month}`) : '-'])
       }
-      return ''
+      return {
+        y,
+        m
+      }
     })
 
     const computeFirstDayOfWeek = computed(() => {
@@ -1001,7 +1006,11 @@ export default defineComponent({
       dateMonthHandle(currentDate, 0)
     }
 
-    const dateToggleTypeEvent = () => {
+    const dateToggleYearTypeEvent = () => {
+      reactData.datePanelType = 'year'
+    }
+
+    const dateToggleMonthTypeEvent = () => {
       let { datePanelType } = reactData
       if (datePanelType === 'month' || datePanelType === 'quarter') {
         datePanelType = 'year'
@@ -1949,7 +1958,7 @@ export default defineComponent({
       const { datePanelType } = reactData
       const isDisabledPrevDateBtn = computeIsDisabledPrevDateBtn.value
       const isDisabledNextDateBtn = computeIsDisabledNextDateBtn.value
-      const selectDatePanelLabel = computeSelectDatePanelLabel.value
+      const selectDatePanelObj = computeSelectDatePanelObj.value
       const supportMultiples = computeSupportMultiples.value
       return [
         h('div', {
@@ -1961,11 +1970,21 @@ export default defineComponent({
             datePanelType === 'year'
               ? h('span', {
                 class: 'vxe-date-picker--date-picker-label'
-              }, selectDatePanelLabel)
+              }, selectDatePanelObj.y)
               : h('span', {
-                class: 'vxe-date-picker--date-picker-btn',
-                onClick: dateToggleTypeEvent
-              }, selectDatePanelLabel)
+                class: 'vxe-date-picker--date-picker-btns'
+              }, [
+                h('span', {
+                  class: 'vxe-date-picker--date-picker-btn',
+                  onClick: dateToggleYearTypeEvent
+                }, selectDatePanelObj.y),
+                selectDatePanelObj.m
+                  ? h('span', {
+                    class: 'vxe-date-picker--date-picker-btn',
+                    onClick: dateToggleMonthTypeEvent
+                  }, selectDatePanelObj.m)
+                  : renderEmptyElement($xeDatePicker)
+              ])
           ]),
           h('div', {
             class: 'vxe-date-picker--date-picker-btn-wrapper'

package/packages/input/src/input.ts

@@ -1,13 +1,13 @@
 import { defineComponent, h, Teleport, ref, Ref, computed, reactive, onMounted, inject, nextTick, watch, onBeforeUnmount, PropType, createCommentVNode } from 'vue'
 import XEUtils from 'xe-utils'
-import { getConfig, getIcon, getI18n, globalEvents, GLOBAL_EVENT_KEYS, createEvent, useSize, VxeComponentStyleType } from '../../ui'
+import { getConfig, getIcon, getI18n, globalEvents, GLOBAL_EVENT_KEYS, createEvent, useSize, renderEmptyElement } from '../../ui'
 import { getFuncText, getLastZIndex, nextZIndex, eqEmptyValue } from '../../ui/src/utils'
 import { hasClass, getAbsolutePos, getEventTargetNode } from '../../ui/src/dom'
 import { toStringTimeDate, getDateQuarter } from '../../date-picker/src/util'
 import { handleNumber, toFloatValueFixed } from '../../number-input/src/util'
 import { getSlotVNs } from '../..//ui/src/vn'
 
-import type { VxeInputConstructor, VxeInputEmits, InputReactData, InputMethods, ValueOf, InputInternalData, VxeInputPropTypes, InputPrivateRef, VxeFormConstructor, VxeFormPrivateMethods, VxeFormDefines, VxeDrawerConstructor, VxeDrawerMethods, VxeModalConstructor, VxeModalMethods, VxeDatePickerDefines, VxeSelectConstructor, VxeSelectMethods, VxeTreeSelectConstructor, VxeTreeSelectMethods } from '../../../types'
+import type { VxeInputConstructor, VxeInputEmits, InputReactData, InputMethods, ValueOf, InputInternalData, VxeInputPropTypes, InputPrivateRef, VxeFormConstructor, VxeFormPrivateMethods, VxeFormDefines, VxeDrawerConstructor, VxeDrawerMethods, VxeModalConstructor, VxeModalMethods, VxeDatePickerDefines, VxeSelectConstructor, VxeSelectMethods, VxeTreeSelectConstructor, VxeTreeSelectMethods, VxeComponentStyleType } from '../../../types'
 import type { VxeTableConstructor, VxeTablePrivateMethods } from '../../../types/components/table'
 
 export default defineComponent({
@@ -475,8 +475,10 @@ export default defineComponent({
       return years
     })
 
-    const computeSelectDatePanelLabel = computed(() => {
+    const computeSelectDatePanelObj = computed(() => {
       const isDatePickerType = computeIsDatePickerType.value
+      let y = ''
+      let m = ''
       if (isDatePickerType) {
         const { datePanelType, selectMonth } = reactData
         const yearList = computeYearList.value
@@ -486,16 +488,19 @@ export default defineComponent({
           year = selectMonth.getFullYear()
           month = selectMonth.getMonth() + 1
         }
-        if (datePanelType === 'quarter') {
-          return getI18n('vxe.input.date.quarterLabel', [year])
-        } else if (datePanelType === 'month') {
-          return getI18n('vxe.input.date.monthLabel', [year])
+        if (datePanelType === 'quarter' || datePanelType === 'month') {
+          y = getI18n('vxe.datePicker.yearTitle', [year])
         } else if (datePanelType === 'year') {
-          return yearList.length ? `${yearList[0].year} - ${yearList[yearList.length - 1].year}` : ''
+          y = yearList.length ? `${yearList[0].year} - ${yearList[yearList.length - 1].year}` : ''
+        } else {
+          y = getI18n('vxe.datePicker.yearTitle', [year])
+          m = month ? getI18n(`vxe.input.date.m${month}`) : '-'
         }
-        return getI18n('vxe.input.date.dayLabel', [year, month ? getI18n(`vxe.input.date.m${month}`) : '-'])
       }
-      return ''
+      return {
+        y,
+        m
+      }
     })
 
     const computeFirstDayOfWeek = computed(() => {
@@ -1301,7 +1306,11 @@ export default defineComponent({
       dateMonthHandle(currentDate, 0)
     }
 
-    const dateToggleTypeEvent = () => {
+    const dateToggleYearTypeEvent = () => {
+      reactData.datePanelType = 'year'
+    }
+
+    const dateToggleMonthTypeEvent = () => {
       let { datePanelType } = reactData
       if (datePanelType === 'month' || datePanelType === 'quarter') {
         datePanelType = 'year'
@@ -2163,7 +2172,7 @@ export default defineComponent({
       const { datePanelType } = reactData
       const isDisabledPrevDateBtn = computeIsDisabledPrevDateBtn.value
       const isDisabledNextDateBtn = computeIsDisabledNextDateBtn.value
-      const selectDatePanelLabel = computeSelectDatePanelLabel.value
+      const selectDatePanelObj = computeSelectDatePanelObj.value
       return [
         h('div', {
           class: 'vxe-input--date-picker-header'
@@ -2174,11 +2183,21 @@ export default defineComponent({
             datePanelType === 'year'
               ? h('span', {
                 class: 'vxe-input--date-picker-label'
-              }, selectDatePanelLabel)
+              }, selectDatePanelObj.y)
               : h('span', {
-                class: 'vxe-input--date-picker-btn',
-                onClick: dateToggleTypeEvent
-              }, selectDatePanelLabel)
+                class: 'vxe-input--date-picker-btns'
+              }, [
+                h('span', {
+                  class: 'vxe-input--date-picker-btn',
+                  onClick: dateToggleYearTypeEvent
+                }, selectDatePanelObj.y),
+                selectDatePanelObj.m
+                  ? h('span', {
+                    class: 'vxe-input--date-picker-btn',
+                    onClick: dateToggleMonthTypeEvent
+                  }, selectDatePanelObj.m)
+                  : renderEmptyElement($xeInput)
+              ])
           ]),
           h('div', {
             class: 'vxe-input--date-picker-btn-wrapper'

package/packages/language/ar-EG.ts

@@ -237,6 +237,9 @@ export default {
       fixedRight: '冻结在右侧',
       cancelFixed: '取消冻结列'
     },
+    datePicker: {
+      yearTitle: '{0} 年'
+    },
     input: {
       date: {
         m1: '01 月',

package/packages/language/de-DE.ts

@@ -238,6 +238,9 @@ export default
       fixedRight: 'rechts eingefroren',
       cancelFixed: 'Spalte freigeben'
     },
+    datePicker: {
+      yearTitle: '{0} Jahre'
+    },
     input: {
       date: {
         m1: 'Januar',

package/packages/language/en-US.ts

@@ -237,6 +237,9 @@ export default {
       fixedRight: 'frozen on right',
       cancelFixed: 'Unfreeze column'
     },
+    datePicker: {
+      yearTitle: '{0} years'
+    },
     input: {
       date: {
         m1: 'January',

package/packages/language/es-ES.ts

@@ -237,6 +237,9 @@ export default {
       fixedRight: 'Freeze on the right',
       cancelFixed: 'Unfreeze column'
     },
+    datePicker: {
+      yearTitle: '{0}'
+    },
     input: {
       date: {
         m1: 'Enero',

package/packages/language/fr-FR.ts

@@ -237,6 +237,9 @@ export default {
       fixedRight: '冻结在右侧',
       cancelFixed: '取消冻结列'
     },
+    datePicker: {
+      yearTitle: '{0} 年'
+    },
     input: {
       date: {
         m1: '01 月',

package/packages/language/hu-HU.ts

@@ -237,6 +237,9 @@ export default {
       fixedRight: 'lefagyott a jobb oldalon',
       cancelFixed: 'Oldja fel az oszlopot'
     },
+    datePicker: {
+      yearTitle: '{0} év'
+    },
     input: {
       date: {
         m1: 'január',

package/packages/language/hy-AM.ts

@@ -237,6 +237,9 @@ export default {
       fixedRight: '冻结在右侧',
       cancelFixed: '取消冻结列'
     },
+    datePicker: {
+      yearTitle: '{0} 年'
+    },
     input: {
       date: {
         m1: '01 月',

package/packages/language/id-ID.ts

@@ -237,6 +237,9 @@ export default {
       fixedRight: '冻结在右侧',
       cancelFixed: '取消冻结列'
     },
+    datePicker: {
+      yearTitle: '{0} 年'
+    },
     input: {
       date: {
         m1: '01 月',

package/packages/language/it-IT.ts

@@ -237,6 +237,9 @@ export default {
       fixedRight: 'congelato a destra',
       cancelFixed: 'Sblocca colonna'
     },
+    datePicker: {
+      yearTitle: '{0} anni'
+    },
     input: {
       date: {
         m1: 'Gennaio',

package/packages/language/ja-JP.ts

@@ -237,6 +237,9 @@ export default {
       fixedRight: '右側に固定',
       cancelFixed: '列固定を取消'
     },
+    datePicker: {
+      yearTitle: '{0} 年'
+    },
     input: {
       date: {
         m1: '1月',

package/packages/language/ko-KR.ts

@@ -237,6 +237,9 @@ export default {
       fixedRight: '오른쪽에 고정',
       cancelFixed: '고정 해제'
     },
+    datePicker: {
+      yearTitle: '{0} 년'
+    },
     input: {
       date: {
         m1: '01 월',

package/packages/language/nb-NO.ts

@@ -237,6 +237,9 @@ export default {
       fixedRight: '冻结在右侧',
       cancelFixed: '取消冻结列'
     },
+    datePicker: {
+      yearTitle: '{0} 年'
+    },
     input: {
       date: {
         m1: '01 月',

package/packages/language/pt-BR.ts

@@ -237,6 +237,9 @@ export default {
       fixedRight: 'Freeze on the right',
       cancelFixed: 'Unfreeze column'
     },
+    datePicker: {
+      yearTitle: '{0} лет'
+    },
     input: {
       date: {
         m1: 'Janeiro',

package/packages/language/ru-RU.ts

@@ -237,6 +237,9 @@ export default {
       fixedRight: 'замер справа',
       cancelFixed: 'Разморозить столбец'
     },
+    datePicker: {
+      yearTitle: '{0} лет'
+    },
     input: {
       date: {
         m1: 'январь',

package/packages/language/th-TH.ts

@@ -237,6 +237,9 @@ export default {
       fixedRight: 'แช่แข็งทางด้านขวา',
       cancelFixed: 'เลิกตรึงคอลัมน์'
     },
+    datePicker: {
+      yearTitle: '{0} ปี'
+    },
     input: {
       date: {
         m1: 'มกราคม',

package/packages/language/ug-CN.ts

@@ -237,6 +237,9 @@ export default {
       fixedRight: 'ئوڭ ياندا توڭلىتىش',
       cancelFixed: 'قۇر توڭلىتىشنى ئەمەلدىن قالدۇرۇش'
     },
+    datePicker: {
+      yearTitle: '{0} يىل'
+    },
     input: {
       date: {
         m1: '01 ئاي',

package/packages/language/uk-UA.ts

@@ -237,6 +237,9 @@ export default {
       fixedRight: 'Зафіксувати праворуч',
       cancelFixed: 'Скасувати фіксацію стовпця'
     },
+    datePicker: {
+      yearTitle: '{0} 年'
+    },
     input: {
       date: {
         m1: '01 місяць',

package/packages/language/vi-VN.ts

@@ -237,6 +237,9 @@ export default {
       fixedRight: '冻结在右侧',
       cancelFixed: '取消冻结列'
     },
+    datePicker: {
+      yearTitle: '{0} 年'
+    },
     input: {
       date: {
         m1: '01 月',