Commit acde7262ef92e464d8c33b5c79239aca58acf76f
1 parent
a8571a5f
update DateTimePicker
update DateTimePicker
Showing
4 changed files
with
21 additions
and
6 deletions
Show diff stats
src/components/date-picker/panel/date.vue
| @@ -64,6 +64,7 @@ | @@ -64,6 +64,7 @@ | ||
| 64 | v-ref:time-picker | 64 | v-ref:time-picker |
| 65 | :date="date" | 65 | :date="date" |
| 66 | :value="value" | 66 | :value="value" |
| 67 | + :format="format" | ||
| 67 | show-date | 68 | show-date |
| 68 | @on-pick="handleTimePick"></time-picker> | 69 | @on-pick="handleTimePick"></time-picker> |
| 69 | </div> | 70 | </div> |
| @@ -109,7 +110,8 @@ | @@ -109,7 +110,8 @@ | ||
| 109 | year: null, | 110 | year: null, |
| 110 | month: null, | 111 | month: null, |
| 111 | confirm: false, | 112 | confirm: false, |
| 112 | - isTime: false | 113 | + isTime: false, |
| 114 | + format: 'yyyy-MM-dd' | ||
| 113 | }; | 115 | }; |
| 114 | }, | 116 | }, |
| 115 | computed: { | 117 | computed: { |
src/components/date-picker/panel/time.vue
| @@ -49,13 +49,17 @@ | @@ -49,13 +49,17 @@ | ||
| 49 | showDate: { | 49 | showDate: { |
| 50 | type: Boolean, | 50 | type: Boolean, |
| 51 | default: false | 51 | default: false |
| 52 | + }, | ||
| 53 | + format: { | ||
| 54 | + type: String, | ||
| 55 | + default: 'HH:mm:ss' | ||
| 52 | } | 56 | } |
| 53 | }, | 57 | }, |
| 54 | data () { | 58 | data () { |
| 55 | return { | 59 | return { |
| 56 | prefixCls: prefixCls, | 60 | prefixCls: prefixCls, |
| 57 | timePrefixCls: timePrefixCls, | 61 | timePrefixCls: timePrefixCls, |
| 58 | - format: 'HH:mm:ss', | 62 | +// format: 'HH:mm:ss', |
| 59 | hours: '', | 63 | hours: '', |
| 60 | minutes: '', | 64 | minutes: '', |
| 61 | seconds: '', | 65 | seconds: '', |
src/styles/components/time-picker.less
| @@ -129,12 +129,20 @@ | @@ -129,12 +129,20 @@ | ||
| 129 | .@{picker-prefix-cls}-panel-content{ | 129 | .@{picker-prefix-cls}-panel-content{ |
| 130 | .@{time-picker-prefix-cls}{ | 130 | .@{time-picker-prefix-cls}{ |
| 131 | &-cells{ | 131 | &-cells{ |
| 132 | - min-width: @time-picker-cells-width-with-date; | 132 | + min-width: @time-picker-cells-width-with-date-with-seconds; |
| 133 | &-with-seconds{ | 133 | &-with-seconds{ |
| 134 | min-width: @time-picker-cells-width-with-date-with-seconds; | 134 | min-width: @time-picker-cells-width-with-date-with-seconds; |
| 135 | + .@{time-picker-prefix-cls}-cells-list{ | ||
| 136 | + width: @time-picker-cells-width-with-date-with-seconds / 3; | ||
| 137 | + ul{ | ||
| 138 | + li{ | ||
| 139 | + padding: 0 0 0 28px; | ||
| 140 | + } | ||
| 141 | + } | ||
| 142 | + } | ||
| 135 | } | 143 | } |
| 136 | &-list { | 144 | &-list { |
| 137 | - width: @time-picker-cells-width-with-date-base; | 145 | + width: @time-picker-cells-width-with-date-with-seconds / 2; |
| 138 | max-height: 216px; | 146 | max-height: 216px; |
| 139 | &:first-child{ | 147 | &:first-child{ |
| 140 | border-radius: 0; | 148 | border-radius: 0; |
| @@ -145,7 +153,7 @@ | @@ -145,7 +153,7 @@ | ||
| 145 | ul{ | 153 | ul{ |
| 146 | padding: 0 0 192px 0; | 154 | padding: 0 0 192px 0; |
| 147 | li{ | 155 | li{ |
| 148 | - padding: 0 0 0 28px; | 156 | + padding: 0 0 0 46px; |
| 149 | } | 157 | } |
| 150 | } | 158 | } |
| 151 | } | 159 | } |
test/routers/date.vue
| @@ -24,7 +24,7 @@ | @@ -24,7 +24,7 @@ | ||
| 24 | <!--style="width: 168px"></time-picker>--> | 24 | <!--style="width: 168px"></time-picker>--> |
| 25 | <!--</i-col>--> | 25 | <!--</i-col>--> |
| 26 | <i-col span="12"> | 26 | <i-col span="12"> |
| 27 | - <Date-picker type="datetime" placeholder="选择日期时间" style="width: 200px" @on-change="c"></Date-picker> | 27 | + <Date-picker :value="value1" format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择日期时间" style="width: 200px" @on-change="c"></Date-picker> |
| 28 | <!--<time-picker--> | 28 | <!--<time-picker--> |
| 29 | <!--:value="value2"--> | 29 | <!--:value="value2"--> |
| 30 | <!--type="timerange"--> | 30 | <!--type="timerange"--> |
| @@ -44,6 +44,7 @@ | @@ -44,6 +44,7 @@ | ||
| 44 | data () { | 44 | data () { |
| 45 | return { | 45 | return { |
| 46 | // value: '2016-12-12 03:03:03', | 46 | // value: '2016-12-12 03:03:03', |
| 47 | + value1: '2015-12-12 09:41', | ||
| 47 | value: '03:12:01', | 48 | value: '03:12:01', |
| 48 | value2: ['08:40:00', '09:40:00'], | 49 | value2: ['08:40:00', '09:40:00'], |
| 49 | // value2: [new Date(), new Date()], | 50 | // value2: [new Date(), new Date()], |