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

二、日期组件使用

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

vue插件汇集

calendar vue日期选择组件基于 vue 2.0高性能日历组件（vue2-datepick）相关推荐

vxe-input vue 日期选择组件带农历节日、小圆点提醒
vxe-table vxe-input vue 日期选择组件带农历节日.小圆点提醒默认的日期选择是没有节日信息的可以通过 festival-method 方法自定义节日信息,接收一个对象,用于渲染 ...
vue日期选择组件_一个Vue组件，为波斯开发人员提供日期选择器
vue日期选择组件 Vue波斯日期选择器 (vue persian datepicker) This is a Jalali date picker component for Vue. 这是Vue的 ...
组件分享之前端组件——甘特图时间表时间线日历组件
组件分享之前端组件--甘特图时间表时间线日历组件背景近期正在探索前端.后端.系统端各类常用组件与工具,对其一些常见的组件进行再次整理一下,形成标准化组件专题,后续该专题将包含各类语言中的一些常用组 ...
vue canvas插件_基于vue.js 制作在线桌椅定制选择交互特效源码
码农那点事儿关注我们,一起学习进步基于vue.js写的在线桌子椅子垫子选择拼成的自己理想的书桌椅图像,这是一款交互式的课桌椅在线定制选择功能.非常不错,感兴趣的朋友前来下载使用. 下载源码(提取码 ...
使用Vue CLI 3将基于element-ui二次封装的组件发布到npm
前言:之前在网上找的好多都是基于vue-cli 2.x的,而使用vue-cli 3的文章比较少,Vue CLI 3 中文文档,所以我在自己尝试的时候把几篇文章结合了一下,调出来了我想要的模式,也就是V ...
android 仿飞猪日历,vue 日期选择类似飞猪
实现功能基本照抄ixc-page-calendar日历, 没有配置头部, 单一动画可自己扩展注意返回的iconFont可以自己的 GkA9rgFNsS.gif vue文件  选择日期 :key= ...
vue.js毕业设计，基于vue.js前后端分离订座预约系统（H5移动项目）开题报告
毕业论文基于Vue.js预约订座系统(H5) 开题报告学院: 专业: 年级: 学生姓名: 指导教师: 黄菊华 XXXX大学本科生毕业论文(设计)开题报告书姓 ...
vue.js毕业设计，基于vue.js前后端分离电影院售票系统（H5移动项目）开题报告
毕业论文基于Vue.js电影院售票系统(H5) 开题报告学院: 专业: 年级: 学生姓名: 指导教师: 黄菊华 XXXX大学本科生毕业论文(设计)开题报告书姓 ...
【vue后台管理系统】基于Vue+Element-UI+ECharts开发通用管理后台（中）
文章目录 Vuex实现左侧菜单栏折叠效果展示思路分析及代码实现漏洞完善 Home组件的实现名片部分 table数据展示部分订单统计部分实现首页可视化图表样式调整 ECharts基本使用折 ...

calendar vue日期选择组件基于 vue 2.0高性能日历组件（vue2-datepick）

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

二、日期组件使用

vue插件汇集

calendar vue日期选择组件基于 vue 2.0高性能日历组件（vue2-datepick）相关推荐

最新文章

热门文章

calendar vue日期选择组件 基于 vue 2.0高性能日历组件（vue2-datepick）

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

二、日期组件使用

vue插件汇集

calendar vue日期选择组件 基于 vue 2.0高性能日历组件（vue2-datepick）相关推荐

最新文章

热门文章

calendar vue日期选择组件基于 vue 2.0高性能日历组件（vue2-datepick）

calendar vue日期选择组件基于 vue 2.0高性能日历组件（vue2-datepick）相关推荐