Vuejs+webpack-based date selection plugin _javascript tips

Based on the Vuejs+webpack environment to use the date selection plug-ins, I hope you like.

Support for radio and multiple selection dates
Supports qualifying start and end date range selections.
Support Hour minutes
You need to introduce a Fontawesome.io icon library.

Options

: Show shows whether
: Type Date|datetime
: Value Defaults
: Begin optional Start time
: End Optional Ending time
: x shows x coordinates
: Y display y-coordinate
: Range whether multiple selections
Test.vue

 <template> <input type= "text" @click = "Showcalendar" v-model= "value" placeholder= " Please enter the date "> <calendar:show.sync=": 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,//multiple Selection}}, 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> 
 

Project Address: Https://github.com/jinzhe/vue-calendar

This article has been organized into the "Vue.js front-end component Learning course", welcome to learn to read.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.