基于vuejs+webpack的日期選擇插件
更新時間：2020年05月21日 11:11:26 作者：jopen
這篇文章主要為大家詳細(xì)介紹了基于vuejs+webpack的日期選擇插件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
基于vuejs+webpack環(huán)境使用的日期選擇插件，希望大家喜歡。
支持單選和多選日期
支持限定開始和結(jié)束日期范圍選擇。
支持小時分鐘
需要引入fontawesome.io 的圖標(biāo)庫。
Options
:show 是否顯示
:type date|datetime
:value 默認(rèn)值
:begin 可選開始時間
:end 可選結(jié)束時間
:x 顯示x坐標(biāo)
:y 顯示y坐標(biāo)
: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前端組件學(xué)習(xí)教程》，歡迎大家學(xué)習(xí)閱讀。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue.js雙向綁定操作技巧(初級入門)的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-12-12
這篇文章主要介紹了vue3的動態(tài)組件是如何工作的，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-03-03
Laravel 如何在blade文件中使用Vue組件的示例代碼
這篇文章主要介紹了Laravel 如何在blade文件中使用Vue組件,本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-06-06
vue.js使用Element-ui實現(xiàn)導(dǎo)航菜單
這篇文章主要為大家詳細(xì)介紹了vue.js使用Element-ui中實現(xiàn)導(dǎo)航菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
vue 實現(xiàn)根據(jù)data中的屬性值來設(shè)置不同的樣式
這篇文章主要介紹了vue 實現(xiàn)根據(jù)data中的屬性值來設(shè)置不同的樣式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)穿梭框效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
vue轉(zhuǎn)react useEffect的全過程
這篇文章主要介紹了vue轉(zhuǎn)react useEffect的全過程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
在vue中獲取微信支付code及code被占用問題的解決方法
這篇文章主要介紹了在vue中獲取微信支付code及code被占用問題的解決方法。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-04-04
本文主要介紹一下Vue.js并附上在Node.js環(huán)境下搭建一個簡單的Demo實例代碼。條理清晰，有助于閱讀和理解。有需要的朋友可以看下2016-12-12
這篇文章主要介紹了vue點擊頁面空白處實現(xiàn)保存功能,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-11-11