chenhaodong / mew-iview

Commit 09ba5efa6e0d4065df3026209f91ad16a13edeb3

Authored by 梁灏
1 parent c6c55510

update DatePicker demo

Showing 1 changed file with 67 additions and 51 deletions   Show diff stats
Inline Side-by-side
examples/routers/date.vue
  Show/Hide comments   View file @09ba5ef
@@ -150,58 +150,58 @@ @@ -150,58 +150,58 @@
150 <!--</script>--> 150 <!--</script>-->
151 151
152 152
153 -<template>  
154 - <div>  
155 - <div style="width: 50%; float: left;">  
156 - <Date-picker type="date" placeholder="选择日期和时间" style="width: 200px"></Date-picker> | Single date, no date  
157 - <br>  
158 - <Date-picker type="datetime" placeholder="选择日期和时间" style="width: 200px"></Date-picker> | Single datetime, no date  
159 - <br>  
160 - <Date-picker type="datetime" v-model="dateString" placeholder="选择日期和时间" style="width: 200px"></Date-picker> | Single datetime, string date  
161 - <br>  
162 - <Date-picker type="datetime" v-model="singleDate" placeholder="选择日期和时间" style="width: 200px"></Date-picker> | Single datetime, date object  
163 - <br>  
164 - <Date-picker type="datetime" format="yyyy-MM-dd HH:mm" placeholder="选择日期和时间（不含秒）" style="width: 200px"></Date-picker> | Single datetime, format yyyy-MM-dd HH:mm  
165 - <br>  
166 - <Date-picker type="date" multiple style="width: 200px"></Date-picker> | Single date, multiple  
167 - <br>  
168 - <Date-picker type="date" multiple style="width: 200px" show-week-numbers></Date-picker> | Single date, multiple, show week numbers  
169 - <br>  
170 - <Date-picker type="date" format="yyyy-MM-dd HH:mm" placeholder="选择日期和时间（不含秒）" style="width: 200px"></Date-picker> | Single date, format MM-dd HH:mm  
171 - <br>  
172 - <Date-picker type="datetime" :start-date="minDate" v-model="singleDate" placeholder="选择日期和时间" style="width: 200px"></Date-picker> | Single datetime, date object, start date  
173 - <br> 153 +<!--<template>-->
  154 + <!--<div>-->
  155 + <!--<div style="width: 50%; float: left;">-->
  156 + <!--<Date-picker type="date" placeholder="选择日期和时间" style="width: 200px"></Date-picker> | Single date, no date-->
  157 + <!--<br>-->
  158 + <!--<Date-picker type="datetime" placeholder="选择日期和时间" style="width: 200px"></Date-picker> | Single datetime, no date-->
  159 + <!--<br>-->
  160 + <!--<Date-picker type="datetime" v-model="dateString" placeholder="选择日期和时间" style="width: 200px"></Date-picker> | Single datetime, string date-->
  161 + <!--<br>-->
  162 + <!--<Date-picker type="datetime" v-model="singleDate" placeholder="选择日期和时间" style="width: 200px"></Date-picker> | Single datetime, date object-->
  163 + <!--<br>-->
  164 + <!--<Date-picker type="datetime" format="yyyy-MM-dd HH:mm" placeholder="选择日期和时间（不含秒）" style="width: 200px"></Date-picker> | Single datetime, format yyyy-MM-dd HH:mm-->
  165 + <!--<br>-->
  166 + <!--<Date-picker type="date" multiple style="width: 200px"></Date-picker> | Single date, multiple-->
  167 + <!--<br>-->
  168 + <!--<Date-picker type="date" multiple style="width: 200px" show-week-numbers></Date-picker> | Single date, multiple, show week numbers-->
  169 + <!--<br>-->
  170 + <!--<Date-picker type="date" format="yyyy-MM-dd HH:mm" placeholder="选择日期和时间（不含秒）" style="width: 200px"></Date-picker> | Single date, format MM-dd HH:mm-->
  171 + <!--<br>-->
  172 + <!--<Date-picker type="datetime" :start-date="minDate" v-model="singleDate" placeholder="选择日期和时间" style="width: 200px"></Date-picker> | Single datetime, date object, start date-->
  173 + <!--<br>-->
174 174
175 - </div>  
176 - <div style="width: 50%; float: right;">  
177 - <Date-picker type="datetimerange" :value="dateRange" placeholder="选择日期和时间" style="width: 300px"></Date-picker> | DateTimeRange, date objects  
178 - <br>  
179 - <Date-picker type="daterange" placeholder="选择日期和时间" style="width: 300px"></Date-picker> | Range, no dates  
180 - <br>  
181 - <Date-picker type="daterange" split-panels placeholder="选择日期和时间" style="width: 300px"></Date-picker> | Range, no dates, split panels  
182 - <br>  
183 - <Date-picker type="datetimerange" format="yyyy-MM-dd HH:mm" placeholder="选择日期和时间（不含秒）" style="width: 300px"></Date-picker> | DateTimeRange, format yyyy-MM-dd HH:mm  
184 - </div>  
185 - <div style="width: 50%; float: right;">  
186 - <TimePicker type="timerange" placeholder="Select time" style="width: 168px"></TimePicker>  
187 - </div>  
188 - </div>  
189 -</template>  
190 -<script>  
191 - export default {  
192 - data(){  
193 - const now = new Date().getTime();  
194 - const oneMonth = 2592e6;  
195 - return {  
196 - dateString: '2018-01-03 20:52:59',  
197 - singleDate: new Date(1978, 4, 10),  
198 - dateRange: [new Date(2010, 4, 1), new Date()],  
199 - minDate: new Date(2010, 4, 1),  
200 - maxDate: new Date(now + oneMonth)  
201 - }  
202 - }  
203 - }  
204 -</script> 175 + <!--</div>-->
  176 + <!--<div style="width: 50%; float: right;">-->
  177 + <!--<Date-picker type="datetimerange" :value="dateRange" placeholder="选择日期和时间" style="width: 300px"></Date-picker> | DateTimeRange, date objects-->
  178 + <!--<br>-->
  179 + <!--<Date-picker type="daterange" placeholder="选择日期和时间" style="width: 300px"></Date-picker> | Range, no dates-->
  180 + <!--<br>-->
  181 + <!--<Date-picker type="daterange" split-panels placeholder="选择日期和时间" style="width: 300px"></Date-picker> | Range, no dates, split panels-->
  182 + <!--<br>-->
  183 + <!--<Date-picker type="datetimerange" format="yyyy-MM-dd HH:mm" placeholder="选择日期和时间（不含秒）" style="width: 300px"></Date-picker> | DateTimeRange, format yyyy-MM-dd HH:mm-->
  184 + <!--</div>-->
  185 + <!--<div style="width: 50%; float: right;">-->
  186 + <!--<TimePicker type="timerange" placeholder="Select time" style="width: 168px"></TimePicker>-->
  187 + <!--</div>-->
  188 + <!--</div>-->
  189 +<!--</template>-->
  190 +<!--<script>-->
  191 + <!--export default {-->
  192 + <!--data(){-->
  193 + <!--const now = new Date().getTime();-->
  194 + <!--const oneMonth = 2592e6;-->
  195 + <!--return {-->
  196 + <!--dateString: '2018-01-03 20:52:59',-->
  197 + <!--singleDate: new Date(1978, 4, 10),-->
  198 + <!--dateRange: [new Date(2010, 4, 1), new Date()],-->
  199 + <!--minDate: new Date(2010, 4, 1),-->
  200 + <!--maxDate: new Date(now + oneMonth)-->
  201 + <!--}-->
  202 + <!--}-->
  203 + <!--}-->
  204 +<!--</script>-->
205 205
206 206
207 <!--<template>--> 207 <!--<template>-->
@@ -246,3 +246,19 @@ @@ -246,3 +246,19 @@
246 <!--}--> 246 <!--}-->
247 <!--}--> 247 <!--}-->
248 <!--</script>--> 248 <!--</script>-->
  249 +
  250 +<template>
  251 + <Row>
  252 + <Col span="12">
  253 + <DatePicker type="date" show-week-numbers placeholder="Select date" style="width: 200px"></DatePicker>
  254 + </Col>
  255 + <Col span="12">
  256 + <DatePicker type="daterange" show-week-numbers placement="bottom-end" placeholder="Select date" style="width: 200px"></DatePicker>
  257 + </Col>
  258 + </Row>
  259 +</template>
  260 +<script>
  261 + export default {
  262 +
  263 + }
  264 +</script>