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 45 <!--<template>-->
... ... @@ -148,22 +150,47 @@
148 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 196 <!--<template>-->
... ... @@ -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>-->
... ...