基于vuejs+webpack的日期选择插件


Posted in Javascript onMay 21, 2020

基于vuejs+webpack环境使用的日期选择插件,希望大家喜欢。

支持单选和多选日期
支持限定开始和结束日期范围选择。
支持小时分钟
需要引入fontawesome.io 的图标库。

基于vuejs+webpack的日期选择插件

基于vuejs+webpack的日期选择插件

Options

:show 是否显示
:type date|datetime
:value 默认值
:begin 可选开始时间
:end 可选结束时间
:x 显示x坐标
:y 显示y坐标
:range 是否多选

test.vue

<template>
 <input type="text" @click="showCalendar" v-model="value" placeholder="请输入日期">
 <calendar :show.sync="show" :value.sync="value" :x="x" :y="y" :begin="begin" :end="end" :range="range"></calendar>
</template>

<script>
module.exports = {
 data: function() {
 return {
  show:false,
  type:"date", //date datetime
  value:"2015-12-11",
  begin:"2015-12-20",
  end:"2015-12-25",
  x:0,
  y:0,
  range:true,//是否多选
 }
 },
 methods:{
 showCalendar:function(e){
  e.stopPropagation();
  var that=this;
  that.show=true;
  that.x=e.target.offsetLeft;
  that.y=e.target.offsetTop+e.target.offsetHeight+8;
  var bindHide=function(e){
  e.stopPropagation();
  that.show=false;
  document.removeEventListener('click',bindHide,false);
  };
  setTimeout(function(){
  document.addEventListener('click',bindHide,false);
  },500);
 }
 },
 components:{
 calendar: require('./calendar.vue')
 }
}
</script>

项目地址: https://github.com/jinzhe/vue-calendar

本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery + Flex 通过拖拽方式动态改变图片的代码
Aug 03 Javascript
js 获取计算后的样式写法及注意事项
Feb 25 Javascript
如何让DIV可编辑、可拖动示例代码
Sep 18 Javascript
验证控件与Button的OnClientClick事件详细解析
Dec 04 Javascript
JS小游戏之仙剑翻牌源码详解
Sep 25 Javascript
JavaScript中setUTCMilliseconds()方法的使用详解
Jun 12 Javascript
jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
Aug 21 Javascript
js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码
Sep 02 Javascript
jQuery实现获取table表格第一列值的方法
Mar 01 Javascript
基于js实现二级下拉联动
Dec 17 Javascript
React学习之事件绑定的几种方法对比
Sep 24 Javascript
js 执行上下文和作用域的相关总结
Feb 08 Javascript
Vue.js创建Calendar日历效果
Nov 03 #Javascript
AngularJS中transclude用法详解
Nov 03 #Javascript
基于Vue2的移动端开发环境搭建详解
Nov 03 #Javascript
AngularJS控制器之间的通信方式详解
Nov 03 #Javascript
最细致的vue.js基础语法 值得收藏!
Nov 03 #Javascript
AngularJS创建自定义指令的方法详解
Nov 03 #Javascript
JavaScript遍历Json串浏览器输出的结果不统一问题
Nov 03 #Javascript
You might like
PHP数据库开发知多少
2006/10/09 PHP
PHP模块化安装教程
2016/06/01 PHP
新浪刚打开页面出来的全屏广告代码
2007/04/02 Javascript
jQuery LigerUI 插件介绍及使用之ligerDrag和ligerResizable示例代码打包
2011/04/06 Javascript
js onkeypress与onkeydown 事件区别详细说明
2012/12/13 Javascript
漂亮的jquery提示效果(仿腾讯弹出层)
2013/02/05 Javascript
使用jQuery避免鼠标双击的解决方案
2013/08/21 Javascript
jQuery+ajax实现鼠标单击修改内容的思路
2014/06/29 Javascript
JavaScript中反正弦函数Math.asin()的使用简介
2015/06/14 Javascript
JavaScript实现动态添加,删除行的方法实例详解
2015/07/02 Javascript
jquery实现多条件筛选特效代码分享
2015/08/28 Javascript
AngularJS入门教程之双向绑定详解
2016/08/18 Javascript
解析微信JS-SDK配置授权,实现分享接口
2016/12/09 Javascript
javascript数组去重方法分析
2016/12/15 Javascript
JS实现碰撞检测的方法分析
2018/01/19 Javascript
vue父组件向子组件传递多个数据的实例
2018/03/01 Javascript
详解js跨域请求的两种方式,支持post请求
2018/05/05 Javascript
手把手15分钟搭一个企业级脚手架
2019/09/16 Javascript
vue多个元素的样式选择器问题
2019/11/29 Javascript
原生js无缝轮播插件使用详解
2020/03/09 Javascript
web.py获取上传文件名的正确方法
2014/08/26 Python
Python基于pygame实现的font游戏字体(附源码)
2015/11/11 Python
python用Pygal如何生成漂亮的SVG图像详解
2017/02/10 Python
Python闭包的两个注意事项(推荐)
2017/03/20 Python
python实现textrank关键词提取
2018/06/22 Python
关于pycharm中pip版本10.0无法使用的解决办法
2019/10/10 Python
Python判断三段线能否构成三角形的代码
2020/04/12 Python
Python解析微信dat文件的方法
2020/11/30 Python
HTML5 WebGL 实现民航客机飞行监控系统
2019/07/25 HTML / CSS
实习单位推荐信范文
2013/11/27 职场文书
员工培训协议书
2014/09/15 职场文书
2014年依法行政工作总结
2014/11/19 职场文书
会计求职自荐信
2015/03/26 职场文书
2015年收银工作总结范文
2015/04/01 职场文书
4种方法python批量修改替换列表中元素
2022/04/07 Python
win11怎么消除图标小盾牌?win11消除图标小盾牌解决方法
2022/08/05 数码科技