一、点击文本框，选择日期，把日期赋值到文本框中。

二、日期组件使用

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/

扫描二维码关注公众号，回复： 5934213 查看本文章