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

support DatePicker & TimePicker

Browse source 
support DatePicker & TimePicker
This commit is contained in:
梁灏 2017-03-07 18:06:56 +08:00
parent 5b19b5f55f
commit 531cd1654b
19 changed files with 265 additions and 79 deletions
Download patch file Download diff file Expand all files Collapse all files

178
examples/routers/date.vue
View file

@ -1,14 +1,178 @@
<template>
<Date-picker type="datetime" placeholder="选择日期和时间" style="width: 200px"></Date-picker>
<br>
<Date-picker type="datetime" format="yyyy-MM-dd HH:mm" placeholder="选择日期和时间（不含秒）" style="width: 200px"></Date-picker>
<br>
<Date-picker type="datetimerange" placeholder="选择日期和时间" style="width: 300px"></Date-picker>
<br>
<Date-picker type="datetimerange" format="yyyy-MM-dd HH:mm" placeholder="选择日期和时间（不含秒）" style="width: 300px"></Date-picker>
<div>
{{ val1 }}
<Date-picker v-model="val1" type="daterange" placeholder="选择日期" style="width: 200px"></Date-picker>
<div @click="val1 = '2017-03-02'">change</div>
</div>
</template>
<script>
export default {
data () {
return {
val1: ''
}
},
computed: {
ddd () {
const date = new Date(this.val1);
const year = date.getFullYear();
const month = date.getMonth() + 1;
const day = date.getDate();
return `${year}-${month}-${day}`;
}
}
}
</script>
<!--<template>-->
<!--<row>-->
<!--<i-col span="12">-->
<!--<Date-picker type="date" :options="options1" placeholder="选择日期" style="width: 200px"></Date-picker>-->
<!--</i-col>-->
<!--<i-col span="12">-->
<!--<Date-picker type="daterange" :options="options2" placement="bottom-end" placeholder="选择日期" style="width: 200px"></Date-picker>-->
<!--</i-col>-->
<!--</row>-->
<!--</template>-->
<!--<script>-->
<!--export default {-->
<!--data () {-->
<!--return {-->
<!--options1: {-->
<!--shortcuts: [-->
<!--{-->
<!--text: '今天',-->
<!--value () {-->
<!--return new Date();-->
<!--},-->
<!--onClick: (picker) => {-->
<!--this.$Message.info('点击了今天');-->
<!--}-->
<!--},-->
<!--{-->
<!--text: '昨天',-->
<!--value () {-->
<!--const date = new Date();-->
<!--date.setTime(date.getTime() - 3600 * 1000 * 24);-->
<!--return date;-->
<!--},-->
<!--onClick: (picker) => {-->
<!--this.$Message.info('点击了昨天');-->
<!--}-->
<!--},-->
<!--{-->
<!--text: '一周前',-->
<!--value () {-->
<!--const date = new Date();-->
<!--date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);-->
<!--return date;-->
<!--},-->
<!--onClick: (picker) => {-->
<!--this.$Message.info('点击了一周前');-->
<!--}-->
<!--}-->
<!--]-->
<!--},-->
<!--options2: {-->
<!--shortcuts: [-->
<!--{-->
<!--text: '最近一周',-->
<!--value () {-->
<!--const end = new Date();-->
<!--const start = new Date();-->
<!--start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);-->
<!--return [start, end];-->
<!--}-->
<!--},-->
<!--{-->
<!--text: '最近一个月',-->
<!--value () {-->
<!--const end = new Date();-->
<!--const start = new Date();-->
<!--start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);-->
<!--return [start, end];-->
<!--}-->
<!--},-->
<!--{-->
<!--text: '最近三个月',-->
<!--value () {-->
<!--const end = new Date();-->
<!--const start = new Date();-->
<!--start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);-->
<!--return [start, end];-->
<!--}-->
<!--}-->
<!--]-->
<!--}-->
<!--}-->
<!--}-->
<!--}-->
<!--</script>-->
<!--<template>-->
<!--<row>-->
<!--<i-col span="12">-->
<!--<Date-picker :value="value1" format="yyyy年MM月dd日" type="date" placeholder="选择日期" style="width: 200px"></Date-picker>-->
<!--</i-col>-->
<!--<i-col span="12">-->
<!--<Date-picker :value="value2" format="yyyy/MM/dd" type="daterange" placement="bottom-end" placeholder="选择日期" style="width: 200px"></Date-picker>-->
<!--</i-col>-->
<!--</row>-->
<!--</template>-->
<!--<script>-->
<!--export default {-->
<!--data () {-->
<!--return {-->
<!--value1: '2016-01-01',-->
<!--value2: ['2016-01-01', '2016-02-15']-->
<!--}-->
<!--}-->
<!--}-->
<!--</script>-->
<!--<template>-->
<!--<div>-->
<!--<Date-picker type="datetime" placeholder="选择日期和时间" style="width: 200px"></Date-picker>-->
<!--<br>-->
<!--<Date-picker type="datetime" format="yyyy-MM-dd HH:mm" placeholder="选择日期和时间（不含秒）" style="width: 200px"></Date-picker>-->
<!--<br>-->
<!--<Date-picker type="datetimerange" placeholder="选择日期和时间" style="width: 300px"></Date-picker>-->
<!--<br>-->
<!--<Date-picker type="datetimerange" format="yyyy-MM-dd HH:mm" placeholder="选择日期和时间（不含秒）" style="width: 300px"></Date-picker>-->
<!--</div>-->
<!--</template>-->
<!--<script>-->
<!--export default {-->
<!--}-->
<!--</script>-->
<!--<template>-->
<!--<row>-->
<!--<i-col span="12">-->
<!--<Time-picker type="time" placeholder="选择时间" style="width: 168px"></Time-picker>-->
<!--</i-col>-->
<!--<i-col span="12">-->
<!--<Time-picker type="timerange" placement="bottom-end" placeholder="选择时间" style="width: 168px"></Time-picker>-->
<!--</i-col>-->
<!--</row>-->
<!--</template>-->
<!--<script>-->
<!--export default {-->
<!--data () {-->
<!--return {-->
<!--t1: ''-->
<!--}-->
<!--}-->
<!--}-->
<!--</script>-->