欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-11-21 15:06:16
基于vuejs+webpack环境使用的日期选择插件,希望大家喜欢。 支持单选和多选日期 支持限定开始和结束日期范围选择。 支持小时分钟 需要引入fontaweso...

基于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>

项目地址:

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

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