一、disabled
disabled
选项可以使日期选择器不可用。默认值为false
<el-date-picker v-model="date" :disabled="true"></el-date-picker>
以上代码中,date
是在Vue实例中定义的数据,:disabled="true"
将日期选择器设置为不可用状态
二、editable
editable
选项允许我们手动输入日期(包括年、月、日)。默认值为true
<el-date-picker v-model="date" :editable="false"></el-date-picker>
以上代码中,date
是在Vue实例中定义的数据,:editable="false"
将日期选择器设置为不可编辑状态
三、clearable
clearable
选项允许我们清空日期选择器中的值。默认值为true
<el-date-picker v-model="date" :clearable="false"></el-date-picker>
以上代码中,date
是在Vue实例中定义的数据,:clearable="false"
将清空按钮隐藏
四、size
size
选项可以设置日期选择器的大小。默认值为medium
。可选值有:large
、medium
、small
、mini
<el-date-picker v-model="date" size="small"></el-date-picker>
以上代码中,date
是在Vue实例中定义的数据,size="small"
将日期选择器设置为小尺寸样式
五、picker-options
picker-options
选项是日期选择器的核心选项。它允许我们自定义日期选择器的外观和功能。我们可以在该选项中设置shortcuts
(快捷选择日期)、disabledDate
(禁止选择日期)等属性
<el-date-picker v-model="date" :picker-options="pickerOptions"></el-date-picker>
以上代码中,date
是在Vue实例中定义的数据,pickerOptions
是在Vue实例中定义的选项对象
data() { return { date: '', pickerOptions: { 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); } }], disabledDate(time) { return time.getTime() > Date.now(); } } } }
以上代码中,我们设置了三个快捷选择日期按钮(今天、昨天、一周前),我们还通过disabledDate
方法禁止了选择未来的日期。
六、format
format
选项是日期选择器显示的日期格式。默认值为yyyy-MM-dd
<el-date-picker v-model="date" format="yyyy/MM/dd"></el-date-picker>
以上代码中,date
是在Vue实例中定义的数据,format="yyyy/MM/dd"
将日期选择器的日期格式设置为年/月/日
七、value-format
value-format
选项是日期选择器提交的日期格式。默认值为yyyy-MM-dd
<el-date-picker v-model="date" value-format="yyyy/MM/dd"></el-date-picker>
以上代码中,date
是在Vue实例中定义的数据,value-format="yyyy/MM/dd"
将v-model
绑定的数据格式设置为年/月/日
八、range-separator、start-placeholder、end-placeholder
range-separator
选项是日期范围选择器的分隔符。默认值为~
start-placeholder
和end-placeholder
选项是日期范围选择器的占位符
<el-date-picker type="daterange" v-model="dateRange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
以上代码中,type="daterange"
表示我们使用日期范围选择器,v-model="dateRange"
表示我们使用v-model
来绑定数据,range-separator="至"
将分隔符设置为“至”,start-placeholder="开始日期"
和end-placeholder="结束日期"
分别设置了两个输入框的占位符
九、unlink-panels
unlink-panels
选项是日期范围选择器的特性。如果启用,则每个面板都可以单独选择日期;如果禁用,则必须通过“确定”按钮才能将选择的日期范围提交。默认值为false
<el-date-picker type="daterange" v-model="dateRange" unlink-panels></el-date-picker>
以上代码中,type="daterange"
表示我们使用日期范围选择器,v-model="dateRange"
表示我们使用v-model
来绑定数据,unlink-panels
设置日期范围选择器的unlink-panels
选项为true