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 | 64 | v-ref:time-picker |
| 65 | 65 | :date="date" |
| 66 | 66 | :value="value" |
| 67 | + :format="format" | |
| 67 | 68 | show-date |
| 68 | 69 | @on-pick="handleTimePick"></time-picker> |
| 69 | 70 | </div> |
| ... | ... | @@ -109,7 +110,8 @@ |
| 109 | 110 | year: null, |
| 110 | 111 | month: null, |
| 111 | 112 | confirm: false, |
| 112 | - isTime: false | |
| 113 | + isTime: false, | |
| 114 | + format: 'yyyy-MM-dd' | |
| 113 | 115 | }; |
| 114 | 116 | }, |
| 115 | 117 | computed: { | ... | ... |
src/components/date-picker/panel/time.vue
| ... | ... | @@ -49,13 +49,17 @@ |
| 49 | 49 | showDate: { |
| 50 | 50 | type: Boolean, |
| 51 | 51 | default: false |
| 52 | + }, | |
| 53 | + format: { | |
| 54 | + type: String, | |
| 55 | + default: 'HH:mm:ss' | |
| 52 | 56 | } |
| 53 | 57 | }, |
| 54 | 58 | data () { |
| 55 | 59 | return { |
| 56 | 60 | prefixCls: prefixCls, |
| 57 | 61 | timePrefixCls: timePrefixCls, |
| 58 | - format: 'HH:mm:ss', | |
| 62 | +// format: 'HH:mm:ss', | |
| 59 | 63 | hours: '', |
| 60 | 64 | minutes: '', |
| 61 | 65 | seconds: '', | ... | ... |
src/styles/components/time-picker.less
| ... | ... | @@ -129,12 +129,20 @@ |
| 129 | 129 | .@{picker-prefix-cls}-panel-content{ |
| 130 | 130 | .@{time-picker-prefix-cls}{ |
| 131 | 131 | &-cells{ |
| 132 | - min-width: @time-picker-cells-width-with-date; | |
| 132 | + min-width: @time-picker-cells-width-with-date-with-seconds; | |
| 133 | 133 | &-with-seconds{ |
| 134 | 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 | 144 | &-list { |
| 137 | - width: @time-picker-cells-width-with-date-base; | |
| 145 | + width: @time-picker-cells-width-with-date-with-seconds / 2; | |
| 138 | 146 | max-height: 216px; |
| 139 | 147 | &:first-child{ |
| 140 | 148 | border-radius: 0; |
| ... | ... | @@ -145,7 +153,7 @@ |
| 145 | 153 | ul{ |
| 146 | 154 | padding: 0 0 192px 0; |
| 147 | 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 | 24 | <!--style="width: 168px"></time-picker>--> |
| 25 | 25 | <!--</i-col>--> |
| 26 | 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 | 28 | <!--<time-picker--> |
| 29 | 29 | <!--:value="value2"--> |
| 30 | 30 | <!--type="timerange"--> |
| ... | ... | @@ -44,6 +44,7 @@ |
| 44 | 44 | data () { |
| 45 | 45 | return { |
| 46 | 46 | // value: '2016-12-12 03:03:03', |
| 47 | + value1: '2015-12-12 09:41', | |
| 47 | 48 | value: '03:12:01', |
| 48 | 49 | value2: ['08:40:00', '09:40:00'], |
| 49 | 50 | // value2: [new Date(), new Date()], | ... | ... |