el-date-picker入门学习
代码效果图
知识点
el-time-picker的基础属性的应用v-model,placeholder,typetype的常见赋值：date,week,month,year,dates,daterange,monthrangepicker-options的赋值（难点）picker-options的关键方法：disabledDate(time){},关键属性：shortcuts:[{text:'',onClick(picker){picker.$emit('pick',...)}}]- 显示格式化属性：
format,值格式化属性：value-format,value-format的属性可以指定为timestamp - 默认时刻设置：
default-time="['starttime','endtime']"
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<title>Document</title>
</head>
<body>
<div id='app'>
<el-form label-width='150px'>
<el-form-item label='默认'>
<el-date-picker
v-model='value1'
type='date'
placeholder='选择日期'
></el-date-picker>
</el-form-item>
<el-form-item label='带快捷键选项'>
<el-date-picker
v-model='value2'
type='date'
placeholder='选择日期'
:picker-options='pickOptions'
></el-date-picker>
</el-form-item>
<el-form-item label='周'>
<el-date-picker
v-model='value3'
type='week'
format='yyyy 第 WW 周'
placeholder='选择周'
></el-date-picker>
</el-form-item>
<el-form-item label='月'>
<el-date-picker
v-model='value4'
type='month'
format='yyyy 第 MM 月'
placeholder='选择月'
></el-date-picker>
</el-form-item>
<el-form-item label='年'>
<el-date-picker
v-model='value5'
type='year'
placeholder='选择年'
></el-date-picker>
</el-form-item>
<el-form-item label='多个日期'>
<el-date-picker
v-model='value6'
type='dates'
placeholder='选择多个日期'
></el-date-picker>
</el-form-item>
<el-form-item label='选择日期范围'>
<el-date-picker
v-model='value7'
type='daterange'
range-separator='至'
start-placeholder='起始日期'
end-placeholder='结束日期'
>
</el-date-picker>
</el-form-item>
<el-form-item label='带快捷键'>
<el-date-picker
v-model='value8'
type='daterange'
range-separator='至'
start-placeholder='起始日期'
end-placeholder='结束日期'
:picker-options='pickerOptions2'
></el-date-picker>
</el-form-item>
<el-form-item label='月份范围'>
<el-date-picker
v-model='value9'
type='monthrange'
range-separator='至'
start-placeholder='起始日期'
end-placeholder='结束日期'
></el-date-picker>
</el-form-item>
<el-form-item label='带快捷选项'>
<el-date-picker
v-model='value10'
type='monthrange'
range-separator='至'
start-placeholder='起始日期'
end-placeholder='结束日期'
:picker-options='pickerOption3'
></el-date-picker>
</el-form-item>
<el-form-item label='默认Date对象'>
<el-button type='text'>{{value11}}</el-button>
<el-date-picker
v-model='value11'
type='date'
format='yyyy 年 MM 月 dd 日'
placeholder='选择日期'
></el-date-picker>
</el-form-item>
<el-form-item label='使用value-format'>
<el-button type='text'>{{value12}}</el-button>
<el-date-picker
v-model='value12'
type='date'
format='yyyy 年 MM 月 dd 日'
value-format='yyyy-MM-dd'
placeholder='选择日期'
></el-date-picker>
</el-form-item>
<el-form-item label='使用timestamp'>
<el-button type='text'>{{value13}}</el-button>
<el-date-picker
v-model='value13'
type='date'
format='yyyy 年 MM 月 dd 日'
value-format='timestamp'
placeholder='选择日期'
></el-date-picker>
</el-form-item>
<el-form-item label='设置默认时刻'>
<el-button type='text'>{{value14}}</el-button>
<el-date-picker
v-model='value14'
type='daterange'
format='yyyy 年 MM 月 dd 日'
value-format='yyyy-MM-dd HH:mm:ss'
start-placeholder='起始时间'
end-placeholder='结束时间'
:default-time="['00:00:00','23:59:59']"
></el-date-picker>
</el-form-item>
</el-form>
</div>
</body>
</html>
<script>
new Vue({
el:'#app',
data:{
value1:'',
value2:'',
value3:'',
value4:'',
value5:'',
value6:[],
value7:[],
value8:[],
value9:[],
value10:[],
value11:'',
value12:'',
value13:'',
value14:'',
pickOptions:{
disabledDate(time){
return time.getTime() > Date.now()
},
shortcuts:[
{text:'今天',onClick(picker){picker.$emit('pick',new Date())}},
{text:'昨日',onClick(picker){picker.$emit('pick',new Date(new Date().getTime()-24*3600*1000))}}
,{text:'一周前',onClick(picker){picker.$emit('pick',new Date(new Date().getTime()-24*3600*1000*7))}}
]
},
pickerOptions2:{
shortcuts:[
{text:'最近一周',onClick(picker){picker.$emit('pick',[new Date(new Date().getTime()-7*24*60*60*1000),new Date()])}},
{text:'最近一个月',onClick(picker){picker.$emit('pick',[new Date(new Date().getTime()-30*24*60*60*1000),new Date()])}},
{text:'最近三个月',onClick(picker){picker.$emit('pick',[new Date(new Date().getTime()-90*24*60*60*1000),new Date()])}}
]
},
pickerOption3:{
shortcuts:[
{text:'本月',onClick(picker){picker.$emit('pick',[new Date(),new Date()])}},
{text:'今年至今',onClick(picker){picker.$emit('pick',[new Date(new Date().getFullYear(),0),new Date()])}},
{text:'最近六个月',onClick(picker){
let start = new Date()
start.setMonth(start.getMonth()-6)
picker.$emit('pick',[start,new Date()]
)}
}
]
}
},
methods:{
}
})
</script>
学习链接
版权声明：本文为qq_40765784原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。