Datepicker 日期选择器
选择或者输入日期
基本用法
<template>
<c-datepicker
v-model="date"
placeholder="请输入或者选择日期"
@change="dateChange"
></c-datepicker>
<c-datepicker
v-model="date"
:disabled="disabled"
></c-datepicker>
</template>
<script>
export default {
data () {
return {
date: '2017-01-25',
disabled: true
}
},
methods: {
dateChange (date) {
this.date = date
}
}
}
</script>
带快捷方式
支持两种方式：一种设置在名为dateSidebar的slot中进行设置，通过slot-scope获取datepicker对象，调用close方法进行弹窗关闭， $emit('change', date)修改日期；
另一种方式通过extra-option中设置optionList，具体查看示例
注：date是字符串，默认快捷键在左侧展现，可以通过复写css(flex-direction)来进行控制
通过extra-option的方式:
通过slot的方式:
<style scoped>
li {
padding-left: 12px;
}
</style>
<template>
<p>通过extra-option的方式:</p>
<c-datepicker
v-model="date"
placeholder="请输入或者选择日期"
@change="dateChange"
:format="format"
:extra-option="extraOption"
></c-datepicker>
<p>通过slot的方式:</p>
<c-datepicker
v-model="date"
placeholder="请输入或者选择日期"
@change="dateChange"
:format="format"
>
<ul slot="dateSideBar" slot-scope="{datepicker}">
<li
@click="testClick(datepicker)"
>close</li>
</ul>
</c-datepicker>
</template>
<script>
export default {
data () {
return {
date: '2017-01-25',
extraOption: {
optionList: [
{
text: '今天',
onClick(picker) {
const date = new Date().format('yyyy-MM-dd')
console.log(date)
picker.$emit('change', date)
picker.close()
}
}, {
text: '昨天',
onClick(picker) {
let date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24);
date = date.format('yyyy-MM-dd');
console.log(date)
picker.$emit('change', date);
}
}
]
}
}
},
methods: {
testClick (props) {
props.datepicker.close()
},
dateChange (date) {
this.date = date
}
}
}
</script>
设置日期的最大值，最小值
<template>
<c-datepicker
v-model="date"
placeholder="请输入或者选择日期"
size="lg"
:minDate="minDate"
:maxDate="maxDate"
@change="dateChange"
></c-datepicker>
</template>
<script>
export default {
data () {
return {
minDate: '2017-01-01',
maxDate: '2018-02-15',
date: ''
}
},
methods: {
dateChange (date) {
this.date = date
}
}
}
</script>
设置日期的范围
快捷方式支持两种方式：一种设置在名为dateSidebar的slot中进行设置，通过slot-scope获取datepicker对象，调用setDateRange方法进行日期修改并关闭弹窗；
另一种方式通过extra-option中设置optionList，具体查看示例
注：daterange是字符串数组
通过slot的方式:
通过extra-option的方式:
<style scoped>
li {
padding: 0 12px;
}
</style>
<template>
<c-datepicker
v-model="dateRange"
type="daterange"
:minDate="minDate"
:maxDate="maxDate"
placeholder="请选择日期"
@change="dateRangeChange"
></c-datepicker>
<p>通过slot的方式:</p>
<c-datepicker
v-model="daterange"
type="daterange"
placeholder="请选择日期"
:maxDate="today"
size="sm"
@change="dateChange"
>
<ul slot="dateSideBar" slot-scope="{datepicker}">
<li @click="nearMonth(datepicker)"
>近一个月</li>
</ul>
</c-datepicker>
<p>通过extra-option的方式:</p>
<c-datepicker
v-model="dateRange"
type="daterange"
placeholder="请选择日期"
@change="dateRangeChange"
:extra-option="extraOption"
></c-datepicker>
</template>
<script>
export default {
data () {
return {
daterange: [],
today: new Date().format('yyyy-MM-dd'),
minDate: '2018-01-01',
maxDate: '2019-02-15',
dateRange: ['2018-01-02', '2018-02-15'],
extraOption: {
optionList: [
{
text: '本周',
onClick(datepicker) {
let date = new Date();
const end = date.format('yyyy-MM-dd')
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
const dateRange = [date.format('yyyy-MM-dd'), end]
datepicker.setDateRange(dateRange)
}
}, {
text: '近一个月',
onClick(datepicker) {
let date = new Date();
const end = date.format('yyyy-MM-dd')
date.setTime(date.getTime() - 3600 * 1000 * 24 * 30)
const dateRange = [date.format('yyyy-MM-dd'), end]
datepicker.setDateRange(dateRange)
}
}
]
}
}
},
methods: {
nearMonth (datepicker) {
let date = new Date();
const end = date.format('yyyy-MM-dd')
date.setTime(date.getTime() - 3600 * 1000 * 24 * 30)
const dateRange = [date.format('yyyy-MM-dd'), end]
datepicker.setDateRange(dateRange)
},
dateChange (date) {
this.daterange = date
},
dateRangeChange (date) {
this.dateRange = date
}
}
}
</script>
月份选择
<template>
<c-datepicker
v-model="date"
type="month"
placeholder="请输入或者选择月份"
@change="dateChange"
></c-datepicker>
</template>
<script>
export default {
data () {
return {
date: '2017-01',
disabled: true
}
},
methods: {
dateChange (date) {
this.date = date
console.log('month change', date)
}
}
}
</script>
设置月份的范围
<template>
<c-datepicker
v-model="monthrange"
type="monthrange"
placeholder="请选择日期"
size="sm"
@change="monthChange"
></c-datepicker>
</template>
<script>
export default {
data () {
return {
monthrange: ['2018-01', '2018-02']
}
},
methods: {
monthChange (date) {
this.daterange = date
}
}
}
</script>
注：
父级可以通过$ref来获取当前组件，调用响应的方法。 resize 方法可以重新计算更新日历弹窗的位置； close 方法可以直接关闭日历弹窗
API
注意：当type为daterange时，v-model需要传递起始时间和终止时间的数组
属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| type | String | date | 日历类别：单日历（date），日期范围（daterange） |
| placeholder | String | '请选择日期' | 未进行选择时的提示 |
| disabled | Boolean | false | 日期框是否被禁用 |
| minDate | String | 1970-01-01 | 可选日期的最小值 |
| maxDate | String | 2099-12-31 | 可选日期的最大值 |
| extraOption | Array | [] | 快捷键设置显示文案及操作方法 |
方法
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| change | 时间发生变化的回调，发生在用户选择时间时 | function(String: date) | - |