Vue自定義可以選擇日期區(qū)間段的日歷插件
本文實例為大家分享了Vue自定義日歷插件的具體代碼,供大家參考,具體內(nèi)容如下
由于網(wǎng)上的插件沒有符合項目的需求決定自己實現(xiàn)
圖示如下:
默認選擇今天的日期時間段
1.默認狀態(tài)(默認選擇當前日期的時間段(藍底背景色代表選中時間段),
2.當前日期之前的時間不可以選擇(禁用了點擊事件))
3.當日歷上的操作的年份月份小于當前時間的年份月份時禁止點擊上一月的按鈕
選中狀態(tài)
1.可以跨年分跨月份選擇
2.點擊取消按鈕時回復(fù)到默認的選擇時間
代碼如下
<template> ? <div class="biji"> ? ? ?<!-- <div>時間段:{{starttime}}至{{endtime}}</div> --> ? ? ? <div class="mobile-top"> ? ? ? <div class="sel-time"> ? ? ? ? <p>開始時間</p> ? ? ? ? <p class="start-date">{{starttime}}</p> ? ? ? </div> ? ? ? <div class="unsel-time"> ? ? ? ? <p>結(jié)束時間</p> ? ? ? ? <p class="end-date">{{endtime==''?'請選擇結(jié)束日期':endtime}}</p> ? ? ? </div> ? ? </div> ? ? ? <div class="title"> ? ? ? <div class="btn" @click="last()"? ? ? ? ?:class="(month<=nowmonth)&&(Year<=nowYear)?'noclick':'' ">上一月</div> ? ? ? <div class="text">{{Year}}年{{month}}月</div> ? ? ? <div class="btn" @click="next()">下一月</div> ? ? </div> ? ? ? <div class="head"> ? ? ? <div class="days" v-for="(item,index) in ['星期日','星期一','星期二','星期三','星期四','星期五','星期六']" :key="index"> ? ? ? ? {{item}} ? ? ? </div> ? ? </div> ? ? ? <div class="wrap"> ? ? ? <div class="span" v-for="(item,index) in calendarList" :key="index" @click="click(item.count)" :class="item==''?'kong' ? ? ? :item.count<nowtime?'noclick' ? ? ? :(item.count>=starttime&&item.count<=endtime)||item.count==starttime?'active':''"> ? ? ? ? {{item.value}} ? ? ? </div> ? ? </div> ? ? ? <div class="bottombtn"> ? ? ? <button class="cancle-btn" @click='cancle()'>取消</button> ? ? ? <button class="sure-btn" @click='firm()'>確定</button> ? ? </div> ? </div> </template> ? <script> ? export default { ? ? name: 'Biji', ? ? data() { ? ? ? return { ? ? ? ? nowtime: '', //當前日期的時間戳 ? ? ? ? ? clickitem: 0, //點擊的時間戳 ? ? ? ? clickcount: 0, //點擊次數(shù) ? ? ? ? starttime: '', //開始時間 數(shù)字 ? 默認選中當天日期 ? ? ? ? endtime: '', //結(jié)束時間 數(shù)字 ? ? ? ? ? Year: new Date().getFullYear(), ? //日歷上的年份 ? ? ? ? month: new Date().getMonth() + 1, //日歷上的月份 ? ? ? ? Day: new Date().getDate(), ? ? ? ?//日歷上的天份 ? ? ? ? ? nowYear: new Date().getFullYear(), ? ? ? ? nowmonth: new Date().getMonth() + 1, ? ? ? ? nowDay: new Date().getDate(), ? ? ? ? ? calendarList: [], ? ? ? } ? ? }, ? ? created() { ? ? ? this.Draw(this.nowYear, this.nowmonth); ? ? ? ? let time_month = this.nowmonth; //現(xiàn)在的月份 ? ? ? let time_day = this.nowDay; //現(xiàn)在的天數(shù) ? ? ? if (this.nowmonth < 10) { ? ? ? ? time_month = 0 + '' + this.nowmonth; ? ? ? } ? ? ? if (this.nowDay < 10) { ? ? ? ? time_day = 0 + '' + this.nowDay; ? ? ? } ? ? ? ? this.nowtime = this.nowYear + '' + time_month + '' + time_day; ? ? ? this.starttime = this.nowtime; ? ? ? this.endtime = this.nowtime; ? ? }, ? ? computed: {}, ? ? ? methods: { ? ? ? ? Draw: function (Year, Month) { ? ? ? ? ? //日期列表 ? ? ? ? var calendar = []; ? ? ? ? ? //用當月第一天在一周中的日期值作為當月離第一天的天數(shù)(獲取當月第一天是周幾) ? ? ? ? for (var i = 1, firstDay = new Date(Year, Month - 1, 1).getDay(); i <= firstDay; i++) { ? ? ? ? ? ?calendar.push(""); ? ? ? ? } ? ? ? ? ? //用當月最后一天在一個月中的日期值作為當月的天數(shù) ? ? ? ? for (var i = 1, monthDay = new Date(Year, Month, 0).getDate(); i <= monthDay; i++) { ? ? ? ? ? ? let time_month = Month; ? ? ? ? ? let time_day = i; ? ? ? ? ? if (Month < 10) { ? ? ? ? ? ? time_month = 0 + '' + Month; ? ? ? ? ? } ? ? ? ? ? if (i < 10) { ? ? ? ? ? ? time_day = 0 + '' + i; ? ? ? ? ? } ? ? ? ? ? ? calendar.push({ ? ? ? ? ? ? value: i, ? ? ? ? ? ? count: Year + '' + time_month + '' + time_day ? ? ? ? ? }) ? ? ? ? } ? ? ? ? this.calendarList = calendar; ? ? ? ? // console.log(calendar) ? ? ? }, ? ? ? ? last() { ? ? ? ? this.month--; ? ? ? ? if (this.month == 0) { ? ? ? ? ? this.month = 12; ? ? ? ? ? this.Year--; ? ? ? ? } ? ? ? ? ? this.Draw(this.Year, this.month); ? ? ? }, ? ? ? ? next() { ? ? ? ? this.month++; ? ? ? ? if (this.month == 13) { ? ? ? ? ? this.month = 1; ? ? ? ? ? this.Year++; ? ? ? ? } ? ? ? ? ? this.Draw(this.Year, this.month); ? ? ? }, ? ? ? ? ? click(item) { ? ? ? ? this.clickcount++; ? ? ? ? this.clickitem = item; ? ? ? ? ? //開始日期 ? ? ? ? if (this.clickcount % 2 == 1) { ? ? ? ? ? this.starttime = this.clickitem; ? ? ? ? ? this.endtime = '' ? ? ? ? } else { ? ? ? ? ? this.endtime = this.clickitem; ? ? ? ? ? if (this.starttime > this.endtime) { ? ? ? ? ? ? this.endtime = this.starttime; ? ? ? ? ? ? this.starttime = this.clickitem; ? ? ? ? ? } ? ? ? ? } ? ? ? }, ? ? ? ? ? firm(){ ? ? ? ? }, ? ? ? ? cancle(){ ? ? ? this.starttime = this.nowtime; ? ? ? this.endtime = this.nowtime; ? ? ? } ? ? ? } ? ? } ? </script> ? <style scoped lang="scss"> ? @import "../common/common"; ? ? .wrap { ? ? width: 7.5rem; ? ? height: auto; ? ? overflow: hidden; ? ? padding-bottom: 1rem; ? } ? ? .span { ? ? width: 1.07142rem; ? ? height: 0.6rem; ? ? background: #fff; ? ? color: #337ab7; ? ? float: left; ? ? text-align: center; ? ? line-height: 0.6rem; ? ? ? &.active { ? ? ? background: #037ef5; ? ? ? color: #fff; ? ? } ? ? ? &.noclick { ? ? ? pointer-events: none; ? ? ? background: #ccc; ? ? } ? ? ? &.kong { ? ? ? background: #fff; ? ? ? pointer-events: none; ? ? } ? } ? ? .mobile-top { ? ? display: flex; ? ? flex-wrap: nowrap; ? ? background: #fff; ? ? padding: 0.1rem 0; ? ? .sel-time { ? ? ? text-align: center; ? ? ? width: 50%; ? ? ? // border-bottom: solid 2px #2a81e8; ? ? ? .start-date{ ? ? ? ? color: #b1b1b1; ? ? ? ? margin-top: 0.05rem; ? ? ? } ? ? } ? ? ? .unsel-time { ? ? ? text-align: center; ? ? ? width: 50%; ? ? ? .end-date{ ? ? ? ? color: #b1b1b1; ? ? ? ? ?margin-top: 0.05rem; ? ? ? } ? ? } ? } ? ? .title{ ? ? width: 100%; ? ? height: 40px; ? ? background-color: #60a7e8; ? ? display: flex; ? ? flex-wrap: nowrap; ? ? text-align: center; ? ? color: #fff; ? ? font-weight: bold; ? ? line-height: 40px; ? ? ? .btn{ ? ? ? width: 1.2rem; ?? ? ? ? &.noclick{ ? ? ? ? pointer-events: none; ? ? ? ? ?background: #ccc; ? ? ? } ? ? } ? ? .text{ ? ? ? flex: 1; ? ? } ? } ? ? .head{ ? display: flex; ? flex-wrap: nowrap; ? text-align: center; ? height: 40px; ? line-height: 40px; ? .days{ ? ? flex: 1; ? } ? } ? ? ? ? .bottombtn { ? ? height: 40px; ? ? width: 100%; ? ? display: flex; ? ? flex-wrap: nowrap; ? ? ? button { ? ? ? flex: 1; ? ? } ? ? ? .sure-btn { ? ? ? background: #037ef5; ? ? ? ? color: #fff; ? ? } ? } ? </style>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue?+?ele?實現(xiàn)下拉選擇框和下拉多選選擇框處理方案
這篇文章主要介紹了vue?+?ele?實現(xiàn)下拉選擇框和下拉多選選擇框處理方案,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-08-08VuePress 靜態(tài)網(wǎng)站生成方法步驟
這篇文章主要介紹了VuePress 靜態(tài)網(wǎng)站生成方法步驟,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-02-02ant desing vue table 實現(xiàn)可伸縮列的完整例子
最近在使用ant-design-vue做表格時,遇到要做一個可伸縮列表格的需求,在網(wǎng)上一直沒有找到好的方法,于是小編動手自己寫個可以此功能,下面小編把ant desing vue table 可伸縮列的實現(xiàn)代碼分享到腳本之家平臺供大家參考2021-05-05