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 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 207 <!--<template>-->
... ... @@ -246,3 +246,19 @@
246 246 <!--}-->
247 247 <!--}-->
248 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>
... ...