other / mew-iview

Commit 4c6836512ee758149394fc40dddb16a6bacd79c4

Authored by Sergio Crisostomo
1 parent d07b4f33

improve dev examples

Showing 1 changed file with 102 additions and 86 deletions   Show diff stats
Inline Side-by-side
examples/routers/date.vue
  Show/Hide comments   View file @4c68365
1 -<!--<template>-->  
2 - <!--<div>-->  
3 - <!--{{ value1 }}-->  
4 - <!--<Date-picker v-model="value1" type="datetimerange" placeholder="选择日期" style="width: 200px" @on-change="hc"></Date-picker>-->  
5 - <!--<Button @click="setDate">set date</Button>-->  
6 - <!--<Button @click="getDate">get date</Button>-->  
7 - <!--&lt;!&ndash;<Date-picker v-model="value2" type="daterange" placeholder="选择日期" style="width: 200px"></Date-picker>&ndash;&gt;-->  
8 - <!--&lt;!&ndash;<Date-picker transfer type="datetimerange" placeholder="选择日期" style="width: 200px" @on-change="changeDate"></Date-picker>&ndash;&gt;-->  
9 - <!--</div>-->  
10 -<!--</template>-->  
11 -<!--<script>-->  
12 - <!--export default {-->  
13 - <!--data () {-->  
14 - <!--return {-->  
15 - <!--value1: ['2014-10-10 10:00:01', '2017-10-10 10:00:00'],-->  
16 - <!--value2: []-->  
17 - <!--}-->  
18 - <!--},-->  
19 - <!--methods: {-->  
20 - <!--changeDate(date){-->  
21 - <!--console.log(date);-->  
22 - <!--},-->  
23 - <!--setDate () {-->  
24 - <!--this.value1 = ['2016-10-10', '2017-10-10'];-->  
25 - <!--},-->  
26 - <!--getDate () {-->  
27 - <!--const date = new Date(this.value1);-->  
28 - <!--console.log(date.getMonth()+1)-->  
29 - <!--},-->  
30 - <!--hc (d) {-->  
31 - <!--console.log(d);-->  
32 - <!--}-->  
33 - <!--}-->  
34 - <!--}-->  
35 -<!--</script>-->  
36 -<!--<style>-->  
37 - <!--body{-->  
38 - <!--width: 100%;-->  
39 - <!--}-->  
40 -<!--</style>--> 1 +<!--
  2 +<template>
  3 + <div>
  4 + {{ value1 }}
  5 + <Date-picker v-model="value1" type="datetimerange" placeholder="选择日期" style="width: 200px" @on-change="hc"></Date-picker>
  6 + <Button @click="setDate">set date</Button>
  7 + <Button @click="getDate">get date</Button>
  8 + &lt;!&ndash;<Date-picker v-model="value2" type="daterange" placeholder="选择日期" style="width: 200px"></Date-picker>&ndash;&gt;
  9 + &lt;!&ndash;<Date-picker transfer type="datetimerange" placeholder="选择日期" style="width: 200px" @on-change="changeDate"></Date-picker>&ndash;&gt;
  10 + </div>
  11 +</template>
  12 +<script>
  13 + export default {
  14 + data () {
  15 + return {
  16 + value1: ['2014-10-10 10:00:01', '2017-10-10 10:00:00'],
  17 + value2: []
  18 + }
  19 + },
  20 + methods: {
  21 + changeDate(date){
  22 + console.log(date);
  23 + },
  24 + setDate () {
  25 + this.value1 = ['2016-10-10', '2017-10-10'];
  26 + },
  27 + getDate () {
  28 + const date = new Date(this.value1);
  29 + console.log(date.getMonth()+1)
  30 + },
  31 + hc (d) {
  32 + console.log(d);
  33 + }
  34 + }
  35 + }
  36 +</script>
  37 +<style>
  38 + body{
  39 + width: 100%;
  40 + }
  41 +</style>
  42 +-->
41 43
42 44
43 <!--<template>--> 45 <!--<template>-->
@@ -148,22 +150,47 @@ @@ -148,22 +150,47 @@
148 <!--</script>--> 150 <!--</script>-->
149 151
150 152
151 -<!--<template>-->  
152 - <!--<div>-->  
153 - <!--<Date-picker type="datetime" placeholder="选择日期和时间" style="width: 200px"></Date-picker>-->  
154 - <!--<br>-->  
155 - <!--<Date-picker type="datetime" format="yyyy-MM-dd HH:mm" placeholder="选择日期和时间（不含秒）" style="width: 200px"></Date-picker>-->  
156 - <!--<br>-->  
157 - <!--<Date-picker type="datetimerange" placeholder="选择日期和时间" style="width: 300px"></Date-picker>-->  
158 - <!--<br>-->  
159 - <!--<Date-picker type="datetimerange" format="yyyy-MM-dd HH:mm" placeholder="选择日期和时间（不含秒）" style="width: 300px"></Date-picker>-->  
160 - <!--</div>-->  
161 -<!--</template>-->  
162 -<!--<script>-->  
163 - <!--export default {-->  
164 -  
165 - <!--}-->  
166 -<!--</script>--> 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" format="yyyy-MM-dd HH:mm" placeholder="选择日期和时间（不含秒）" style="width: 200px"></Date-picker> | Single date, format MM-dd HH:mm
  169 + <br>
  170 + </div>
  171 + <div style="width: 50%; float: right;">
  172 + <Date-picker type="datetimerange" :value="dateRange" placeholder="选择日期和时间" style="width: 300px"></Date-picker> | DateTimeRange, date objects
  173 + <br>
  174 + <Date-picker type="daterange" placeholder="选择日期和时间" style="width: 300px"></Date-picker> | Range, no dates
  175 + <br>
  176 + <Date-picker type="datetimerange" format="yyyy-MM-dd HH:mm" placeholder="选择日期和时间（不含秒）" style="width: 300px"></Date-picker> | DateTimeRange, format yyyy-MM-dd HH:mm
  177 + </div>
  178 + <div style="width: 50%; float: right;">
  179 + <TimePicker type="timerange" placeholder="Select time" style="width: 168px"></TimePicker>
  180 + </div>
  181 + </div>
  182 +</template>
  183 +<script>
  184 + export default {
  185 + data(){
  186 + return {
  187 + dateString: '2018-01-03 20:52:59',
  188 + singleDate: new Date(1978, 4, 10),
  189 + dateRange: [new Date(2010, 0, 1), new Date()]
  190 + }
  191 + }
  192 + }
  193 +</script>
167 194
168 195
169 <!--<template>--> 196 <!--<template>-->
@@ -189,33 +216,22 @@ @@ -189,33 +216,22 @@
189 216
190 217
191 218
192 -<template>  
193 - <div>  
194 - <DatePicker v-model="value" @on-change="handleChange" type="datetimerange" placeholder="Select date" style="width: 400px"></DatePicker>  
195 - <DatePicker v-model="value2" type="datetime" @on-change="handleChange" style="width: 200px"></DatePicker>  
196 - <TimePicker type="time" placeholder="Select time" style="width: 168px"></TimePicker>  
197 - {{ value }}  
198 - <br>  
199 - {{ value2 }}  
200 - <br><br>  
201 - <DatePicker type="year" v-model="value3" placeholder="Select year" style="width: 200px"></DatePicker>  
202 - <DatePicker type="month" v-model="value4" placeholder="Select month" style="width: 200px"></DatePicker>  
203 - </div>  
204 -</template>  
205 -<script>  
206 - export default {  
207 - data () {  
208 - return {  
209 - value: ['2018-03-05 10:00:00', '2018-05-15 10:01:00'],  
210 - value2: '2018-02-05 10:09:00',  
211 - value3: '1978',  
212 - value4: '1978-05'  
213 - }  
214 - },  
215 - methods: {  
216 - handleChange (v) {  
217 - console.log(v);  
218 - }  
219 - }  
220 - }  
221 -</script> 219 +<!--<template>-->
  220 + <!--<div>-->
  221 + <!--<DatePicker v-model="value" @on-change="handleChange" type="daterange" placeholder="Select date" style="width: 200px"></DatePicker>-->
  222 + <!--</div>-->
  223 +<!--</template>-->
  224 +<!--<script>-->
  225 + <!--export default {-->
  226 + <!--data () {-->
  227 + <!--return {-->
  228 + <!--value: []-->
  229 + <!--}-->
  230 + <!--},-->
  231 + <!--methods: {-->
  232 + <!--handleChange (v) {-->
  233 + <!--console.log(v);-->
  234 + <!--}-->
  235 + <!--}-->
  236 + <!--}-->
  237 +<!--</script>-->