基于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 相关文章推荐
关于恒等于(===)和非恒等于(!==)
Aug 20 Javascript
javascript中的有名函数和无名函数
Oct 17 Javascript
Javascript 继承机制实例
Aug 12 Javascript
JQury slideToggle闪烁问题及解决办法
Jul 05 Javascript
深入理解JavaScript高级之词法作用域和作用域链
Dec 10 Javascript
JavaScript多线程详解
Aug 12 Javascript
JS 对java返回的json格式的数据处理方法
Dec 05 Javascript
Vue2.x中的父组件传递数据至子组件的方法
May 01 Javascript
详解Vue2中组件间通信的解决全方案
Jul 28 Javascript
vue.js框架实现表单排序和分页效果
Aug 09 Javascript
JS 音频可视化插件Wavesurfer.js的使用教程
Oct 31 Javascript
原生JS封装vue Tab切换效果
Apr 28 Vue.js
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 mysql_real_escape_string函数用法与实例教程
2013/09/30 PHP
PHP获取当前执行php文件名的代码
2017/03/02 PHP
PHP不使用内置函数实现字符串转整型的方法示例
2017/07/03 PHP
PHP安装BCMath扩展的方法
2019/02/13 PHP
ext 同步和异步示例代码
2009/09/18 Javascript
js相册效果代码(点击创建即可)
2013/04/16 Javascript
js获取视频时长代码
2014/04/10 Javascript
jQuery替换textarea中换行的方法
2015/06/10 Javascript
jQuery插件扩展实例【添加回调函数】
2016/11/26 Javascript
p5.js入门教程之平滑过渡(Easing)
2018/03/16 Javascript
解决vue刷新页面以后丢失store的数据问题
2020/08/11 Javascript
[03:59]DOTA2英雄梦之声_第07期_水晶室女
2014/06/23 DOTA
[05:10]2014DOTA2国际邀请赛 通往胜利之匙赛场探秘之旅
2014/07/18 DOTA
[01:36:19]Secret vs NB 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python中的闭包实例详解
2014/08/29 Python
使用IronPython把Python脚本集成到.NET程序中的教程
2015/03/31 Python
python魔法方法-属性访问控制详解
2016/07/25 Python
TensorFlow实现iris数据集线性回归
2018/09/07 Python
对numpy中向量式三目运算符详解
2018/10/31 Python
在Pandas中给多层索引降级的方法
2018/11/16 Python
为什么Python中没有&quot;a++&quot;这种写法
2018/11/27 Python
python字典一键多值实例代码分享
2019/06/14 Python
python3.6+selenium实现操作Frame中的页面元素
2019/07/16 Python
Python Collatz序列实现过程解析
2019/10/12 Python
在Pytorch中计算卷积方法的区别详解(conv2d的区别)
2020/01/03 Python
CSS3实现精美横向滚动菜单按钮
2017/04/14 HTML / CSS
利物浦足球俱乐部官方商店(美国):Liverpool FC US
2019/10/09 全球购物
Prototype中如何为一个元素添加一个方法
2014/12/08 面试题
就业自荐信
2013/12/04 职场文书
银行办理业务介绍信
2014/01/18 职场文书
环保倡议书范文
2014/05/12 职场文书
监理中标通知书
2015/04/16 职场文书
大学宣传委员竞选稿
2015/11/19 职场文书
护士爱岗敬业心得体会
2016/01/25 职场文书
为什么在foreach循环中JAVA集合不能添加或删除元素
2021/06/11 Java/Android
mysql查询结果实现多列拼接查询
2022/04/03 MySQL