欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue自定義可以選擇日期區(qū)間段的日歷插件

 更新時間:2022年03月08日 14:28:10   作者:面壁思過程  
這篇文章主要為大家詳細介紹了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中onmounted周期里獲取不到dom的原因及分析

    vue中onmounted周期里獲取不到dom的原因及分析

    這篇文章主要介紹了vue中onmounted周期里獲取不到dom的原因及分析,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • 通過vue-cropper選取本地圖片自定義裁切圖片比例

    通過vue-cropper選取本地圖片自定義裁切圖片比例

    這篇文章主要介紹了Vue選取本地圖片,自定義裁切圖片比例?vue-cropper,本文分步驟結(jié)合實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-07-07
  • vue?+?ele?實現(xiàn)下拉選擇框和下拉多選選擇框處理方案

    vue?+?ele?實現(xiàn)下拉選擇框和下拉多選選擇框處理方案

    這篇文章主要介紹了vue?+?ele?實現(xiàn)下拉選擇框和下拉多選選擇框處理方案,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-08-08
  • Vue?非常實用的自定義指令分享

    Vue?非常實用的自定義指令分享

    這篇文章主要介紹了Vue?非常實用的自定義指令分享,Vue自定義指令有全局注冊和局部注冊兩種方式,在?Vue,除了核心功能默認內(nèi)置的指令?(?v-model?和?v-show?),Vue?也允許注冊自定義指令,下文小編給大家分享那些常用到的Vue自定義指令
    2022-02-02
  • VuePress 靜態(tài)網(wǎng)站生成方法步驟

    VuePress 靜態(tài)網(wǎng)站生成方法步驟

    這篇文章主要介紹了VuePress 靜態(tài)網(wǎng)站生成方法步驟,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2019-02-02
  • vuex?store?緩存存儲原理分析

    vuex?store?緩存存儲原理分析

    這篇文章主要介紹了vuex?store?緩存存儲原理,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-07-07
  • vue中 v-for循環(huán)的用法詳解

    vue中 v-for循環(huán)的用法詳解

    這篇文章主要介紹了vue中 v-for循環(huán)的用法詳解,本文通過實例代碼的形式給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-02-02
  • 基于Vue全局組件與局部組件的區(qū)別說明

    基于Vue全局組件與局部組件的區(qū)別說明

    這篇文章主要介紹了基于Vue全局組件與局部組件的區(qū)別說明,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-08-08
  • ant desing vue table 實現(xiàn)可伸縮列的完整例子

    ant desing vue table 實現(xiàn)可伸縮列的完整例子

    最近在使用ant-design-vue做表格時,遇到要做一個可伸縮列表格的需求,在網(wǎng)上一直沒有找到好的方法,于是小編動手自己寫個可以此功能,下面小編把ant desing vue table 可伸縮列的實現(xiàn)代碼分享到腳本之家平臺供大家參考
    2021-05-05
  • Vue仿微信app頁面跳轉(zhuǎn)動畫效果

    Vue仿微信app頁面跳轉(zhuǎn)動畫效果

    這篇文章主要介紹了Vue仿微信app頁面跳轉(zhuǎn)動畫效果,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-08-08

最新評論