一、点击文本框,选择日期,把日期赋值到文本框中。
二、日期组件使用
1、安装vue2-datepick
npm install vue2-datepick --save
2、初始化,在main.js中加入以下:
import Calendar from 'vue2-datepick';
Vue.use(Calendar);
3、使用
<template>
<div>
<h5>截止时间:</h5>
<input type="text" @click = "setDate" v-bind:value="date" placeholder="请选择截止时间..."/>
</div>
</template>
<script>
export default{
data () {
return {
date:''
}
},
mounted:function(){
this.nowTimes();
},
methods:{
setDate(){
this.$picker.show({
type:'datePicker',
date:this.date, //初始化时间
endTime:'2020-02-11', //截至时间
startTime:'2010-02-11', //开始时间
onOk: (date) =>{
this.date = date;
}
});
},
timeFormate(timeStamp) {
let year = new Date(timeStamp).getFullYear();
let month =new Date(timeStamp).getMonth() + 1 < 10? "0" + (new Date(timeStamp).getMonth() + 1): new Date(timeStamp).getMonth() + 1;
let date =new Date(timeStamp).getDate() < 10? "0" + new Date(timeStamp).getDate(): new Date(timeStamp).getDate();
let hh =new Date(timeStamp).getHours() < 10? "0" + new Date(timeStamp).getHours(): new Date(timeStamp).getHours();
let mm =new Date(timeStamp).getMinutes() < 10? "0" + new Date(timeStamp).getMinutes(): new Date(timeStamp).getMinutes();
// let ss =new Date(timeStamp).getSeconds() < 10? "0" + new Date(timeStamp).getSeconds(): new Date(timeStamp).getSeconds();
// return year + "年" + month + "月" + date +"日"+" "+hh+":"+mm ;
//this.date = year + "年" + month + "月" + date +"日"+" "+hh+":"+mm ;
this.date = year + "-" + month + "-" + date ;
// console.log(this.nowTime);
},
// 定时器函数
nowTimes(){
this.timeFormate(new Date());
setInterval(this.nowTimes,30*1000);
}
}
}
</script>
其他信息:
基于vue2.0
修改了之前版本依赖vuex,插件化 支持npm
github地址 https://github.com/jamielhf/vue/tree/master/calendar
博客地址 http://jamielhf.cn
在线demo地址:https://jamielhf.github.io/vue/calendar/dist/
另一种风格:https://blog.csdn.net/qq_42396791/article/details/85676245