vue-xdate v1.0.1
vue-xdate
a component to pick date in x-scroll mode;
install
npm install --save vue-xdate
demo
if you want to view the demo, you should clone this repo to local by git clone;
and then you should install vue-cli global:
npm install -g vue-cli
after that you watch the demo by
npm run serve
now you will see the demo in the browser;
useage
<template>
<div class="app">
<div class="demo">
<xdate class="demo-slot"
:date="date"
:min="min"
:max="max"
@select="select"
>
<template v-slot:default="{ item }">
<p>{{item.ymdw.y}}</p>
<p>{{getDateStr(item.id)}}</p>
<p>{{getWeekStr(item.id)}}</p>
</template>
</xdate>
</div>
</div>
</template>
<script>
import moment from 'moment';
import Xdate from "../src/xdate.vue";
export default {
components: {
Xdate
},
data () {
const mDate = moment();
return {
date: mDate.format('YYYY-MM-DD'),
max: mDate.add(20, 'days').format('YYYY-MM-DD'),
min: mDate.subtract(40, 'days').format('YYYY-MM-DD'),
}
},
methods: {
getDateStr (date) {
return moment(date).format('MM月DD日');
},
getWeekStr (date) {
return '周' + ('日一二三四五六')[moment(date).day()];
},
select (item) {
alert(`你选择了${item.id}`);
}
}
}
</script>
props
date
the date that is default selected.
type: String, it should be 'YYYY-MM-DD'.
default: today's 'YYYY-MM-DD'.
min
the min date loaded. if not specified, the date will always load when scroll right;
type: String, it should be 'YYYY-MM-DD'.
max
the max date loaded. if not specified, the date will always load when scroll left;
type: String, it should be 'YYYY-MM-DD'.
isDisable
a function that descide a date item is disable, if return true, the date item will not be select.
note: althrough it is disable, the select event will be emit, because maybe you want to do something when user click the item. you can use the arguments to confirm the disable state;
type: function
default: () => false;
slot
a date item data will pass to the slot you can use that data to render that date item you want;
in default, it will only show month and date, <p>MM-DD</p>
.
event
select
arguments: dateItemInfo;
dateItemInfo: {
id: 'YYYY-MM-DD',
ymdw: {
y: number, // year
m: number, // month
d: number, // date
w: number // week day
}
}