improve dev examples
This commit is contained in:
Sergio Crisostomo
parent
d07b4f3301
commit
4c6836512e
1 changed files with 102 additions and 86 deletions
|
|
@ -1,43 +1,45 @@
|
||||||
<!--<template>-->
|
<!--
|
||||||
<!--<div>-->
|
<template>
|
||||||
<!--{{ value1 }}-->
|
<div>
|
||||||
<!--<Date-picker v-model="value1" type="datetimerange" placeholder="选择日期" style="width: 200px" @on-change="hc"></Date-picker>-->
|
{{ value1 }}
|
||||||
<!--<Button @click="setDate">set date</Button>-->
|
<Date-picker v-model="value1" type="datetimerange" placeholder="选择日期" style="width: 200px" @on-change="hc"></Date-picker>
|
||||||
<!--<Button @click="getDate">get date</Button>-->
|
<Button @click="setDate">set date</Button>
|
||||||
<!--<!–<Date-picker v-model="value2" type="daterange" placeholder="选择日期" style="width: 200px"></Date-picker>–>-->
|
<Button @click="getDate">get date</Button>
|
||||||
<!--<!–<Date-picker transfer type="datetimerange" placeholder="选择日期" style="width: 200px" @on-change="changeDate"></Date-picker>–>-->
|
<!–<Date-picker v-model="value2" type="daterange" placeholder="选择日期" style="width: 200px"></Date-picker>–>
|
||||||
<!--</div>-->
|
<!–<Date-picker transfer type="datetimerange" placeholder="选择日期" style="width: 200px" @on-change="changeDate"></Date-picker>–>
|
||||||
<!--</template>-->
|
</div>
|
||||||
<!--<script>-->
|
</template>
|
||||||
<!--export default {-->
|
<script>
|
||||||
<!--data () {-->
|
export default {
|
||||||
<!--return {-->
|
data () {
|
||||||
<!--value1: ['2014-10-10 10:00:01', '2017-10-10 10:00:00'],-->
|
return {
|
||||||
<!--value2: []-->
|
value1: ['2014-10-10 10:00:01', '2017-10-10 10:00:00'],
|
||||||
<!--}-->
|
value2: []
|
||||||
<!--},-->
|
}
|
||||||
<!--methods: {-->
|
},
|
||||||
<!--changeDate(date){-->
|
methods: {
|
||||||
<!--console.log(date);-->
|
changeDate(date){
|
||||||
<!--},-->
|
console.log(date);
|
||||||
<!--setDate () {-->
|
},
|
||||||
<!--this.value1 = ['2016-10-10', '2017-10-10'];-->
|
setDate () {
|
||||||
<!--},-->
|
this.value1 = ['2016-10-10', '2017-10-10'];
|
||||||
<!--getDate () {-->
|
},
|
||||||
<!--const date = new Date(this.value1);-->
|
getDate () {
|
||||||
<!--console.log(date.getMonth()+1)-->
|
const date = new Date(this.value1);
|
||||||
<!--},-->
|
console.log(date.getMonth()+1)
|
||||||
<!--hc (d) {-->
|
},
|
||||||
<!--console.log(d);-->
|
hc (d) {
|
||||||
<!--}-->
|
console.log(d);
|
||||||
<!--}-->
|
}
|
||||||
<!--}-->
|
}
|
||||||
<!--</script>-->
|
}
|
||||||
<!--<style>-->
|
</script>
|
||||||
<!--body{-->
|
<style>
|
||||||
<!--width: 100%;-->
|
body{
|
||||||
<!--}-->
|
width: 100%;
|
||||||
<!--</style>-->
|
}
|
||||||
|
</style>
|
||||||
|
-->
|
||||||
|
|
||||||
|
|
||||||
<!--<template>-->
|
<!--<template>-->
|
||||||
|
|
@ -148,22 +150,47 @@
|
||||||
<!--</script>-->
|
<!--</script>-->
|
||||||
|
|
||||||
|
|
||||||
<!--<template>-->
|
<template>
|
||||||
<!--<div>-->
|
<div>
|
||||||
<!--<Date-picker type="datetime" placeholder="选择日期和时间" style="width: 200px"></Date-picker>-->
|
<div style="width: 50%; float: left;">
|
||||||
<!--<br>-->
|
<Date-picker type="date" placeholder="选择日期和时间" style="width: 200px"></Date-picker> | Single date, no date
|
||||||
<!--<Date-picker type="datetime" format="yyyy-MM-dd HH:mm" placeholder="选择日期和时间（不含秒）" style="width: 200px"></Date-picker>-->
|
<br>
|
||||||
<!--<br>-->
|
<Date-picker type="datetime" placeholder="选择日期和时间" style="width: 200px"></Date-picker> | Single datetime, no date
|
||||||
<!--<Date-picker type="datetimerange" placeholder="选择日期和时间" style="width: 300px"></Date-picker>-->
|
<br>
|
||||||
<!--<br>-->
|
<Date-picker type="datetime" v-model="dateString" placeholder="选择日期和时间" style="width: 200px"></Date-picker> | Single datetime, string date
|
||||||
<!--<Date-picker type="datetimerange" format="yyyy-MM-dd HH:mm" placeholder="选择日期和时间（不含秒）" style="width: 300px"></Date-picker>-->
|
<br>
|
||||||
<!--</div>-->
|
<Date-picker type="datetime" v-model="singleDate" placeholder="选择日期和时间" style="width: 200px"></Date-picker> | Single datetime, date object
|
||||||
<!--</template>-->
|
<br>
|
||||||
<!--<script>-->
|
<Date-picker type="datetime" format="yyyy-MM-dd HH:mm" placeholder="选择日期和时间（不含秒）" style="width: 200px"></Date-picker> | Single datetime, format yyyy-MM-dd HH:mm
|
||||||
<!--export default {-->
|
<br>
|
||||||
|
<Date-picker type="date" multiple style="width: 200px"></Date-picker> | Single date, multiple
|
||||||
<!--}-->
|
<br>
|
||||||
<!--</script>-->
|
<Date-picker type="date" format="yyyy-MM-dd HH:mm" placeholder="选择日期和时间（不含秒）" style="width: 200px"></Date-picker> | Single date, format MM-dd HH:mm
|
||||||
|
<br>
|
||||||
|
</div>
|
||||||
|
<div style="width: 50%; float: right;">
|
||||||
|
<Date-picker type="datetimerange" :value="dateRange" placeholder="选择日期和时间" style="width: 300px"></Date-picker> | DateTimeRange, date objects
|
||||||
|
<br>
|
||||||
|
<Date-picker type="daterange" placeholder="选择日期和时间" style="width: 300px"></Date-picker> | Range, no dates
|
||||||
|
<br>
|
||||||
|
<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 style="width: 50%; float: right;">
|
||||||
|
<TimePicker type="timerange" placeholder="Select time" style="width: 168px"></TimePicker>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data(){
|
||||||
|
return {
|
||||||
|
dateString: '2018-01-03 20:52:59',
|
||||||
|
singleDate: new Date(1978, 4, 10),
|
||||||
|
dateRange: [new Date(2010, 0, 1), new Date()]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
<!--<template>-->
|
<!--<template>-->
|
||||||
|
|
@ -189,33 +216,22 @@
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<template>
|
<!--<template>-->
|
||||||
<div>
|
<!--<div>-->
|
||||||
<DatePicker v-model="value" @on-change="handleChange" type="datetimerange" placeholder="Select date" style="width: 400px"></DatePicker>
|
<!--<DatePicker v-model="value" @on-change="handleChange" type="daterange" placeholder="Select date" style="width: 200px"></DatePicker>-->
|
||||||
<DatePicker v-model="value2" type="datetime" @on-change="handleChange" style="width: 200px"></DatePicker>
|
<!--</div>-->
|
||||||
<TimePicker type="time" placeholder="Select time" style="width: 168px"></TimePicker>
|
<!--</template>-->
|
||||||
{{ value }}
|
<!--<script>-->
|
||||||
<br>
|
<!--export default {-->
|
||||||
{{ value2 }}
|
<!--data () {-->
|
||||||
<br><br>
|
<!--return {-->
|
||||||
<DatePicker type="year" v-model="value3" placeholder="Select year" style="width: 200px"></DatePicker>
|
<!--value: []-->
|
||||||
<DatePicker type="month" v-model="value4" placeholder="Select month" style="width: 200px"></DatePicker>
|
<!--}-->
|
||||||
</div>
|
<!--},-->
|
||||||
</template>
|
<!--methods: {-->
|
||||||
<script>
|
<!--handleChange (v) {-->
|
||||||
export default {
|
<!--console.log(v);-->
|
||||||
data () {
|
<!--}-->
|
||||||
return {
|
<!--}-->
|
||||||
value: ['2018-03-05 10:00:00', '2018-05-15 10:01:00'],
|
<!--}-->
|
||||||
value2: '2018-02-05 10:09:00',
|
<!--</script>-->
|
||||||
value3: '1978',
|
|
||||||
value4: '1978-05'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
handleChange (v) {
|
|
||||||
console.log(v);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue