Browse Source
+ DatePicker showTime: 面板上的日期展示输入框统一为一个，格式和外面的输入框同步，并且支持手动修改。 面板上的 TimePicker + DatePicker showTime: 输入框不再展示，改造为『选择时间』，点击后不再展开浮层，直接盖住日期区域。 + RangePicker showTime : 只选中开始日期，“确定”和“选择时间”灰置。 如未选择日期直接选择时间，开始日期和结束日期默认选中当天。 + RangePicker showTime : 点击框外和确定均为确定操作。 + RangePicker showTime : 在时间页面，开始时间的默认状态为当前时间，结束时间的默认状态跟随开始时间。 + RangePicker showTime : 开始时间的选择范围没有限制，结束时间的选择范围必须大于等于开始时间。 + RangePicker showTime : 当开始时间选择了结束时间之后的时间（发生冲突），结束时间则自动切换到与开始时间相同的时间。pull/2416/head
RaoHai
8 years ago
9 changed files with 366 additions and 41 deletions
@ -1,32 +1,264 @@ |
|||
.@{calendar-prefix-cls}-time { |
|||
// Change display order in DOM |
|||
.@{calendar-prefix-cls}-input-wrap { |
|||
direction: rtl; |
|||
.@{calendar-prefix-cls}-date-input-wrap, |
|||
.@{calendar-prefix-cls}-time-picker-wrap { |
|||
direction: ltr; |
|||
|
|||
|
|||
.@{timepicker-prefix-cls} { |
|||
position: absolute; |
|||
width: 100%; |
|||
top: 34px; |
|||
background-color: white; |
|||
height: 206px; |
|||
|
|||
&-panel { |
|||
z-index: @zindex-picker; |
|||
position: absolute; |
|||
width: 100%; |
|||
} |
|||
|
|||
&-inner { |
|||
display: inline-block; |
|||
position: relative; |
|||
outline: none; |
|||
list-style: none; |
|||
font-size: 12px; |
|||
text-align: left; |
|||
background-color: #fff; |
|||
background-clip: padding-box; |
|||
line-height: 1.5; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
&-input { |
|||
margin: 0; |
|||
padding: 0; |
|||
border: 0; |
|||
width: 100%; |
|||
cursor: auto; |
|||
line-height: 1.5; |
|||
outline: 0; |
|||
|
|||
&-wrap { |
|||
display: none; |
|||
box-sizing: border-box; |
|||
position: relative; |
|||
padding: 6px; |
|||
border-bottom: 1px solid @border-color-split; |
|||
} |
|||
|
|||
&-invalid { |
|||
border-color: red; |
|||
} |
|||
} |
|||
|
|||
&-clear-btn { |
|||
position: absolute; |
|||
right: 5px; |
|||
cursor: pointer; |
|||
overflow: hidden; |
|||
width: 20px; |
|||
height: 20px; |
|||
text-align: center; |
|||
line-height: 20px; |
|||
top: 5px; |
|||
margin: 0; |
|||
} |
|||
|
|||
&-clear-btn:after { |
|||
content: "\e631"; |
|||
font-family: "anticon"; |
|||
font-size: 12px; |
|||
color: #ccc; |
|||
display: inline-block; |
|||
line-height: 1; |
|||
width: 20px; |
|||
transition: color 0.3s ease; |
|||
} |
|||
|
|||
&-clear-btn:hover:after { |
|||
color: #999; |
|||
} |
|||
|
|||
&-narrow &-input-wrap { |
|||
max-width: 111px; |
|||
} |
|||
|
|||
&-select { |
|||
float: left; |
|||
font-size: 12px; |
|||
border: 1px solid @border-color-split; |
|||
border-width: 0 1px; |
|||
margin-left: -1px; |
|||
box-sizing: border-box; |
|||
width: 77px; |
|||
overflow: hidden; |
|||
position: relative; // Fix chrome weird render bug |
|||
|
|||
&:hover { |
|||
overflow-y: auto; |
|||
} |
|||
|
|||
&:first-child { |
|||
border-left: 0; |
|||
margin-left: 0; |
|||
} |
|||
|
|||
&:last-child { |
|||
border-right: 0; |
|||
} |
|||
|
|||
ul { |
|||
list-style: none; |
|||
box-sizing: border-box; |
|||
margin: 0; |
|||
padding: 0; |
|||
width: 100%; |
|||
max-height: 206px; |
|||
} |
|||
|
|||
li { |
|||
text-align: center; |
|||
list-style: none; |
|||
box-sizing: content-box; |
|||
margin: 0; |
|||
width: 100%; |
|||
height: 24px; |
|||
line-height: 24px; |
|||
cursor: pointer; |
|||
user-select: none; |
|||
transition: background 0.3s ease; |
|||
} |
|||
|
|||
li:last-child:after { |
|||
content: ''; |
|||
height: 120px; |
|||
display: block; |
|||
} |
|||
|
|||
li:hover { |
|||
background: tint(@primary-color, 90%); |
|||
} |
|||
|
|||
li&-option-selected { |
|||
background: #f7f7f7; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
li&-option-disabled { |
|||
color: @btn-disable-color; |
|||
&:hover { |
|||
background: transparent; |
|||
cursor: @cursor-disabled; |
|||
} |
|||
} |
|||
.@{timepicker-prefix-cls}-panel, |
|||
.@{calendar-prefix-cls}-clear-btn { |
|||
direction: ltr; |
|||
} |
|||
|
|||
&.slide-up-enter.slide-up-enter-active&-placement-topLeft, |
|||
&.slide-up-enter.slide-up-enter-active&-placement-topRight, |
|||
&.slide-up-appear.slide-up-appear-active&-placement-topLeft, |
|||
&.slide-up-appear.slide-up-appear-active&-placement-topRight { |
|||
animation-name: antSlideDownIn; |
|||
} |
|||
.@{calendar-prefix-cls}-input, |
|||
.@{timepicker-prefix-cls}-input { |
|||
|
|||
&.slide-up-enter.slide-up-enter-active&-placement-bottomLeft, |
|||
&.slide-up-enter.slide-up-enter-active&-placement-bottomRight, |
|||
&.slide-up-appear.slide-up-appear-active&-placement-bottomLeft, |
|||
&.slide-up-appear.slide-up-appear-active&-placement-bottomRight { |
|||
animation-name: antSlideUpIn; |
|||
} |
|||
|
|||
&.slide-up-leave.slide-up-leave-active&-placement-topLeft, |
|||
&.slide-up-leave.slide-up-leave-active&-placement-topRight { |
|||
animation-name: antSlideDownOut; |
|||
} |
|||
|
|||
&.slide-up-leave.slide-up-leave-active&-placement-bottomLeft, |
|||
&.slide-up-leave.slide-up-leave-active&-placement-bottomRight { |
|||
animation-name: antSlideUpOut; |
|||
} |
|||
} |
|||
|
|||
.@{timepicker-prefix-cls} { |
|||
display: inline-block; |
|||
outline: none; |
|||
font-size: @font-size-base; |
|||
|
|||
&-input { |
|||
.input; |
|||
border-radius: @border-radius-sm; |
|||
height: @input-height-sm; |
|||
width: 96px; |
|||
margin-right: 6px; |
|||
width: 100px; |
|||
} |
|||
|
|||
&-large &-input { |
|||
.input-lg; |
|||
} |
|||
|
|||
&-small &-input { |
|||
.input-sm; |
|||
} |
|||
|
|||
&-open { |
|||
opacity: 0; |
|||
} |
|||
|
|||
&-icon { |
|||
position: absolute; |
|||
user-select: none; |
|||
transition: all .3s @ease-in-out; |
|||
width: 12px; |
|||
height: 12px; |
|||
line-height: 12px; |
|||
right: 8px; |
|||
color: #999; |
|||
top: 50%; |
|||
margin-top: -6px; |
|||
&:after { |
|||
content: "\e643"; |
|||
font-family: "anticon"; |
|||
font-size: 12px; |
|||
color: #999; |
|||
display: inline-block; |
|||
line-height: 1; |
|||
vertical-align: bottom; |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
.@{calendar-prefix-cls} { |
|||
&-time { |
|||
.@{calendar-prefix-cls}-day-select { |
|||
padding: 0 2px; |
|||
font-weight: bold; |
|||
display: inline-block; |
|||
color: #666; |
|||
line-height: 34px; |
|||
} |
|||
|
|||
.@{calendar-prefix-cls}-footer { |
|||
border-top: 1px solid #ccc; |
|||
padding: 10px 0; |
|||
text-align: right; |
|||
position: relative; |
|||
height: auto; |
|||
line-height: auto; |
|||
|
|||
&-btn { |
|||
line-height: 1.5; |
|||
text-align: right; |
|||
} |
|||
|
|||
.@{calendar-prefix-cls}-today-btn { |
|||
float: left; |
|||
margin: 0; |
|||
padding-left: 12px; |
|||
} |
|||
|
|||
.@{calendar-prefix-cls}-time-picker-btn { |
|||
display: inline-block; |
|||
text-align: center; |
|||
margin-right: 60px; |
|||
|
|||
&-disabled { |
|||
color: #ccc |
|||
} |
|||
.@{calendar-prefix-cls}-input { |
|||
padding-right: 21px; |
|||
} |
|||
.@{timepicker-prefix-cls}-panel { |
|||
min-width: 168px; |
|||
} |
|||
.@{timepicker-prefix-cls}-icon { |
|||
display: none; |
|||
} |
|||
} |
|||
Loading…
Reference in new issue