时间选择器datetimerpicker封装使用(非脚手架)
datePicker.vue 封装
picker v -model="currentTime" type="datetimerange" :picker-options="pickerOptions" range-separator="~" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" start-placeholder="开始日期" end-placeholder="结束日期" align="right" @change="getChorceTime">
注意:
value-format :一定要,否则选择的时间是带有英文月份的时间,不是想要的年月日时分秒
getChorceTime(val){
if(val == null){
bus.$emit('changeTimeValue',""); // 必要:当交互中清除已选时间时查询条件应该清空
}else{
bus.$emit('changeTimeValue',val) // 传递当前选择的时间
} }
使用
js.
module.exports = { name:'FileUpload', components: { 'date-picker': httpVueLoader('/template/default/pc/home/index/components/datePicker.vue'), },
}
" searchForm.time">
核心:
mounted(){
bus.$on('changeTimeValue',(val)=>{
if(val){
this.searchForm.time = val[0] + '~' + val[1];
}else{
this.searchForm.time = "";
}
})
}