drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

update DatePicker demo

Browse source
This commit is contained in:
梁灏 2018-02-27 14:39:20 +08:00
parent c6c5551014
commit 09ba5efa6e
1 changed files with 67 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

118
examples/routers/date.vue
View file

@ -150,58 +150,58 @@
<!--</script>--> <!--</script>-->
<template> <!--<template>-->
<div> <!--<div>-->
<div style="width: 50%; float: left;"> <!--<div style="width: 50%; float: left;">-->
<Date-picker type="date" placeholder="选择日期和时间" style="width: 200px"></Date-picker> | Single date, no date <!--<Date-picker type="date" placeholder="选择日期和时间" style="width: 200px"></Date-picker> | Single date, no date-->
<br> <!--<br>-->
<Date-picker type="datetime" placeholder="选择日期和时间" style="width: 200px"></Date-picker> | Single datetime, no date <!--<Date-picker type="datetime" placeholder="选择日期和时间" style="width: 200px"></Date-picker> | Single datetime, no date-->
<br> <!--<br>-->
<Date-picker type="datetime" v-model="dateString" placeholder="选择日期和时间" style="width: 200px"></Date-picker> | Single datetime, string date <!--<Date-picker type="datetime" v-model="dateString" placeholder="选择日期和时间" style="width: 200px"></Date-picker> | Single datetime, string date-->
<br> <!--<br>-->
<Date-picker type="datetime" v-model="singleDate" placeholder="选择日期和时间" style="width: 200px"></Date-picker> | Single datetime, date object <!--<Date-picker type="datetime" v-model="singleDate" placeholder="选择日期和时间" style="width: 200px"></Date-picker> | Single datetime, date object-->
<br> <!--<br>-->
<Date-picker type="datetime" format="yyyy-MM-dd HH:mm" placeholder="选择日期和时间（不含秒）" style="width: 200px"></Date-picker> | Single datetime, format yyyy-MM-dd HH:mm <!--<Date-picker type="datetime" format="yyyy-MM-dd HH:mm" placeholder="选择日期和时间（不含秒）" style="width: 200px"></Date-picker> | Single datetime, format yyyy-MM-dd HH:mm-->
<br> <!--<br>-->
<Date-picker type="date" multiple style="width: 200px"></Date-picker> | Single date, multiple <!--<Date-picker type="date" multiple style="width: 200px"></Date-picker> | Single date, multiple-->
<br> <!--<br>-->
<Date-picker type="date" multiple style="width: 200px" show-week-numbers></Date-picker> | Single date, multiple, show week numbers <!--<Date-picker type="date" multiple style="width: 200px" show-week-numbers></Date-picker> | Single date, multiple, show week numbers-->
<br> <!--<br>-->
<Date-picker type="date" format="yyyy-MM-dd HH:mm" placeholder="选择日期和时间（不含秒）" style="width: 200px"></Date-picker> | Single date, format MM-dd HH:mm <!--<Date-picker type="date" format="yyyy-MM-dd HH:mm" placeholder="选择日期和时间（不含秒）" style="width: 200px"></Date-picker> | Single date, format MM-dd HH:mm-->
<br> <!--<br>-->
<Date-picker type="datetime" :start-date="minDate" v-model="singleDate" placeholder="选择日期和时间" style="width: 200px"></Date-picker> | Single datetime, date object, start date <!--<Date-picker type="datetime" :start-date="minDate" v-model="singleDate" placeholder="选择日期和时间" style="width: 200px"></Date-picker> | Single datetime, date object, start date-->
<br> <!--<br>-->
</div> <!--</div>-->
<div style="width: 50%; float: right;"> <!--<div style="width: 50%; float: right;">-->
<Date-picker type="datetimerange" :value="dateRange" placeholder="选择日期和时间" style="width: 300px"></Date-picker> | DateTimeRange, date objects <!--<Date-picker type="datetimerange" :value="dateRange" placeholder="选择日期和时间" style="width: 300px"></Date-picker> | DateTimeRange, date objects-->
<br> <!--<br>-->
<Date-picker type="daterange" placeholder="选择日期和时间" style="width: 300px"></Date-picker> | Range, no dates <!--<Date-picker type="daterange" placeholder="选择日期和时间" style="width: 300px"></Date-picker> | Range, no dates-->
<br> <!--<br>-->
<Date-picker type="daterange" split-panels placeholder="选择日期和时间" style="width: 300px"></Date-picker> | Range, no dates, split panels <!--<Date-picker type="daterange" split-panels placeholder="选择日期和时间" style="width: 300px"></Date-picker> | Range, no dates, split panels-->
<br> <!--<br>-->
<Date-picker type="datetimerange" format="yyyy-MM-dd HH:mm" placeholder="选择日期和时间（不含秒）" style="width: 300px"></Date-picker> | DateTimeRange, format yyyy-MM-dd HH:mm <!--<Date-picker type="datetimerange" format="yyyy-MM-dd HH:mm" placeholder="选择日期和时间（不含秒）" style="width: 300px"></Date-picker> | DateTimeRange, format yyyy-MM-dd HH:mm-->
</div> <!--</div>-->
<div style="width: 50%; float: right;"> <!--<div style="width: 50%; float: right;">-->
<TimePicker type="timerange" placeholder="Select time" style="width: 168px"></TimePicker> <!--<TimePicker type="timerange" placeholder="Select time" style="width: 168px"></TimePicker>-->
</div> <!--</div>-->
</div> <!--</div>-->
</template> <!--</template>-->
<script> <!--<script>-->
export default { <!--export default {-->
data(){ <!--data(){-->
const now = new Date().getTime(); <!--const now = new Date().getTime();-->
const oneMonth = 2592e6; <!--const oneMonth = 2592e6;-->
return { <!--return {-->
dateString: '2018-01-03 20:52:59', <!--dateString: '2018-01-03 20:52:59',-->
singleDate: new Date(1978, 4, 10), <!--singleDate: new Date(1978, 4, 10),-->
dateRange: [new Date(2010, 4, 1), new Date()], <!--dateRange: [new Date(2010, 4, 1), new Date()],-->
minDate: new Date(2010, 4, 1), <!--minDate: new Date(2010, 4, 1),-->
maxDate: new Date(now + oneMonth) <!--maxDate: new Date(now + oneMonth)-->
} <!--}-->
} <!--}-->
} <!--}-->
</script> <!--</script>-->
<!--<template>--> <!--<template>-->
@ -246,3 +246,19 @@
<!--}--> <!--}-->
<!--}--> <!--}-->
<!--</script>--> <!--</script>-->
<template>
<Row>
<Col span="12">
<DatePicker type="date" show-week-numbers placeholder="Select date" style="width: 200px"></DatePicker>
</Col>
<Col span="12">
<DatePicker type="daterange" show-week-numbers placement="bottom-end" placeholder="Select date" style="width: 200px"></DatePicker>
</Col>
</Row>
</template>
<script>
export default {
}
</script>