基于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之一(对象的组成)
Jun 11 Javascript
Jquery之Ajax运用 学习运用篇
Sep 26 Javascript
Bootstrap编写导航栏和登陆框
May 30 Javascript
微信小程序组件 marquee实例详解
Jun 23 Javascript
Bootstrap + AngularJS 实现简单的数据过滤字符查找功能
Jul 27 Javascript
页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)
Aug 29 Javascript
JavaScript的数据类型转换原则(干货)
Mar 15 Javascript
angular6.0开发教程之如何安装angular6.0框架
Jun 29 Javascript
Vue中的作用域CSS和CSS模块的区别
Oct 09 Javascript
JS中的一些常用的函数式编程术语
Jun 15 Javascript
如何基于JS截获动态代码
Dec 25 Javascript
Openlayers实现地图全屏显示
Sep 28 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
动态生成gif格式的图像要注意?
2006/10/09 PHP
PHP屏蔽蜘蛛访问代码及常用搜索引擎的HTTP_USER_AGENT
2013/03/06 PHP
Linux php 中文乱码的快速解决方法
2016/05/13 PHP
CI框架实现cookie登陆的方法详解
2016/05/18 PHP
微信小程序 消息推送php服务器验证实例详解
2017/03/30 PHP
Yii2表单事件之Ajax提交实现方法
2017/05/04 PHP
php利用云片网实现短信验证码功能的示例代码
2017/11/18 PHP
php无限级评论嵌套实现代码
2018/04/18 PHP
PHP-FPM的配置与优化讲解
2019/03/15 PHP
jQuery随手笔记之常用的jQuery操作DOM事件
2015/11/29 Javascript
Express的路由详解
2015/12/10 Javascript
如何用JavaScript实现动态修改CSS样式表
2016/05/20 Javascript
jqGrid翻页时数据选中丢失问题的解决办法
2017/02/13 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(1)
2017/02/20 Javascript
jQuery实现动态加载select下拉列表项功能示例
2018/05/31 jQuery
vuex刷新后数据丢失的解决方法
2020/10/18 Javascript
[47:36]Optic vs Newbee 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
用Python实现一个简单的能够发送带附件的邮件程序的教程
2015/04/08 Python
python单元测试unittest实例详解
2015/05/11 Python
Python创建模块及模块导入的方法
2015/05/27 Python
python daemon守护进程实现
2016/08/27 Python
django 2.2和mysql使用的常见问题
2019/07/18 Python
python中for循环把字符串或者字典添加到列表的方法
2019/07/20 Python
如何在Windows中安装多个python解释器
2020/06/16 Python
keras的三种模型实现与区别说明
2020/07/03 Python
详解Python中如何将数据存储为json格式的文件
2020/11/18 Python
澳大利亚二手奢侈品网站:Modsie
2019/09/23 全球购物
幼儿教师寄语集锦
2014/04/03 职场文书
原料仓管员岗位职责
2014/04/12 职场文书
供货协议书
2014/04/22 职场文书
关于读书的演讲稿
2014/05/07 职场文书
2016领导干部廉洁自律心得体会
2016/01/13 职场文书
iPhone13 Pro外观确定,升级4800万镜头,4月20日发新品
2021/04/15 数码科技
用python实现监控视频人数统计
2021/05/21 Python
CSS极坐标的实例代码
2021/06/03 HTML / CSS
详解Java线程池是如何重复利用空闲线程的
2021/06/26 Java/Android