版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
ElementUI DatePicker 日期选择器日期区间选择
官方样例
<template>
<div class="block">
<span class="demonstration">默认</span>
<el-date-picker
v-model="value1"
type="date"
placeholder="选择日期">
</el-date-picker>
</div>
<div class="block">
<span class="demonstration">带快捷选项</span>
<el-date-picker
v-model="value2"
align="right"
type="date"
placeholder="选择日期"
:picker-options="pickerOptions">
</el-date-picker>
</div>
</template>
<script>
export default {
data() {
return {
pickerOptions: {
disabledDate(time) {
return time.getTime() > Date.now();
},
shortcuts: [{
text: '今天',
onClick(picker) {
picker.$emit('pick', new Date());
}
}, {
text: '昨天',
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24);
picker.$emit('pick', date);
}
}, {
text: '一周前',
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', date);
}
}]
},
value1: '',
value2: '',
};
}
};
</script>
链接: link.
怎么获取日期数值？
<!DOCTYPE html>
<html>
<head>
<!-- 页面meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>日期选择</title>
<meta name="description" content="日期选择">
<meta name="keywords" content="日期选择">
<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
<!-- 引入样式 -->
<link rel="stylesheet" href="../plugins/elementui/index.css">
<link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="../css/style.css">
<link rel="stylesheet" href="../css/orderset.css">
<!-- 引入组件库 -->
<script src="../js/vue.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script src="../js/axios-0.18.0.js"></script>
</head>
<body class="hold-transition">
<div id="app">
<div class="block">
<span class="demonstration">带快捷选项</span>
<el-date-picker
v-model="detailDate"
type="daterange"
align="right"
unlink-panels
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="yyyyMMdd"
@change="dateChange"
:picker-options="pickerOptions2">
</el-date-picker>
</div>
<el-button :plain="true" @click="open1">查询</el-button>
<el-button type="primary" @click="open2" icon="el-icon-search">搜索</el-button>
</div>
</body>
<!-- 引入组件库 -->
<script src="../js/vue.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script>
new Vue({
el: '#app',
created: function () {//在vue初始化时调用
},
data() {
return {
detailDate:'',
startTime: '',
endTime: '',
pickerOptions2: {
shortcuts: [
{
text: '最近一周',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 60 * 60 * 1000 * 24 * 7);
picker.$emit('pick', [start, end])
}
},
{
text: '最近一个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 30 * 24 * 60 * 60 * 1000);
picker.$emit('pick', [start, end])
}
},
{
text: '最近三个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3 * 30 * 24 * 60 * 60 * 1000);
picker.$emit('pick', [start, end])
}
}
]
}
}
},
methods: {
dateChange(val) {
this.startTime = val.toString().split(",")[0];
this.endTime = val.toString().split(",")[1];
alert("开始时间:"+this.startTime );
alert("结束时间:"+this.endTime)
},
}
})
</script>
</html>
实验结果
