国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

vue element-ui月份范圍選擇器,禁用未來月份,跨度為12個(gè)月

這篇具有很好參考價(jià)值的文章主要介紹了vue element-ui月份范圍選擇器,禁用未來月份,跨度為12個(gè)月。希望對大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方,請大家不吝賜教,您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問。

用得vue2的寫法哦,
效果如下圖:
vue月份選擇器,elementUI,vue,vue.js,elementui

直接上代碼:

引用ElementUI的月份組件:

<el-date-picker
                            v-model="queryParams.reportDate"
                                type="monthrange"
                                :editable="false"
                                :clearable="false"
                                format="yyyy 年 MM 月"
                                value-format="yyyy-MM"
                                range-separator="至"
                                start-placeholder="開始月份"
                                end-placeholder="結(jié)束月份" 
                                :picker-options = "monthpickoption">
                                </el-date-picker>
export default {
    components:{LineChart,yearPicker,DateWeekRange},
    data() {
        return {
        trendData: {
                date: []
            },
            minDate: null,
            maxDate: null,
            monthpickoption:{
            disabledDate: (time) => {
              if (this.minDate !== null && this.maxDate === null) {
                  let minMonth = this.minDate.getMonth(),
                  lastYear = new Date(this.minDate).setMonth(minMonth - 11),
                  nextYear = new Date(this.minDate).setMonth(minMonth + 11);
                let minTime = this.minDate.getTime()
                let nextTime = new Date().setMonth(new Date().getMonth() + 11)
                let lastTime = new Date().setMonth(new Date().getMonth() - 11)
               if (minTime <= nextTime || minTime >= lastTime){
                  //開始日期少于當(dāng)前月+12個(gè)月 并且大于當(dāng)前月-12個(gè)月,則表示只限制前面的范圍
                  return time.valueOf() > new Date().getTime() || time.valueOf() > nextYear.valueOf() || time.valueOf() < lastYear.valueOf()
                }
                else {
                  // 只能選 minDate 前后一年的范圍
                  return time.valueOf() < lastYear.valueOf() || time.valueOf() > nextYear.valueOf();
                }
              }else {
                let startMonth = this.trendData.date[0]
                let month = new Date(startMonth).getMonth()
                let lastMonth = new Date(startMonth).setMonth(month - 11)
                //如果有默認(rèn)值,只禁用開始日期,因?yàn)橐呀?jīng)限定了禁用未來范圍,且默認(rèn)值已經(jīng)為12個(gè)月范圍
                return this.monthPick(time) || time < lastMonth.valueOf();
              }
            },
            onPick: ({minDate, maxDate}) => {
              this.minDate = minDate;
              this.maxDate = maxDate;
            }
            },
         }
      },
      methods: {
      	monthPick(time){
            // 獲取當(dāng)前的月份信息
            const date = new Date() // 獲取當(dāng)前的時(shí)間基本信息,值是這樣的: Tue Jul 20 2021 14:59:43 GMT+0800 (中國標(biāo)準(zhǔn)時(shí)間)
            const year = date.getFullYear() // 獲取當(dāng)前年份,值是這樣的: 2021
            let month = date.getMonth() + 1 // 獲取當(dāng)前月份,值是這樣的: 6   getMonth()方法返回值是0-11,也就是1月份到12月份,所以要加上1,才是當(dāng)前月份
            if (month >= 1 && month <= 9) {
              // 如果是1月到9月就要在前面補(bǔ)上一個(gè)0   比如:02、07    月份這樣表示
              month = '0' + month
            }
            const nowDate = year.toString() + month.toString() // 轉(zhuǎn)換成字符串拼接,最終得到年和月,比如此時(shí)的時(shí)間是2021年7月20號(hào),所以nowDate的值是:202107
 
            // 獲取時(shí)間選擇器的月份信息
            const timeyear = time.getFullYear() // 獲取時(shí)間選擇器的年份(有很多)
            let timemonth = time.getMonth() + 1 // 與上面同理
            if (timemonth >= 1 && timemonth <= 9) {
              timemonth = '0' + timemonth
            }
            const elTimeData = timeyear.toString() + timemonth.toString()
 
            // 返回,時(shí)間選擇器的日期月份大于當(dāng)前日期的月份,又因?yàn)閐isabledDate函數(shù)是控制月份禁用不可選
            // 所以,最終就是:時(shí)間選擇器的月份大于當(dāng)前的月份,就都禁用掉,所以就實(shí)現(xiàn)了最終效果:
            // 大于等于當(dāng)前月份都不可選
            return elTimeData > nowDate // 這里雖然是字符串,但是弱類型語言js會(huì)做一個(gè)轉(zhuǎn)換,是可以比較大小的如: '202107' > '202008'
          },
      }

參考地址:
https://blog.csdn.net/ITERCHARLIE/article/details/127246715文章來源地址http://www.zghlxwxcb.cn/news/detail-740262.html

到了這里,關(guān)于vue element-ui月份范圍選擇器,禁用未來月份,跨度為12個(gè)月的文章就介紹完了。如果您還想了解更多內(nèi)容,請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!

本文來自互聯(lián)網(wǎng)用戶投稿,該文觀點(diǎn)僅代表作者本人,不代表本站立場。本站僅提供信息存儲(chǔ)空間服務(wù),不擁有所有權(quán),不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載,請注明出處: 如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實(shí)不符,請點(diǎn)擊違法舉報(bào)進(jìn)行投訴反饋,一經(jīng)查實(shí),立即刪除!

領(lǐng)支付寶紅包贊助服務(wù)器費(fèi)用

相關(guān)文章

  • 基于element-ui的年份范圍選擇器

    基于element-ui的年份范圍選擇器

    下載對應(yīng)的代碼到本地 文件地址,以下是我的目錄結(jié)構(gòu),我將下載的文件放到了src/components下。 全局引入或者局部引入使用 全局引入 局部引入 調(diào)用方法,下面的參數(shù)和element-ui原有el-date-picker的api保持不變 日期限制處理(禁用),下面我以我這邊的需求為例, 選擇的年份需等

    2024年02月07日
    瀏覽(22)
  • element-ui 日期選擇器選擇年份,拼接月日,并控制范圍

    element-ui 日期選擇器選擇年份,拼接月日,并控制范圍

    element-ui 日期選擇器選擇年份,拼接月日,并控制范圍。 type=\\\"year\\\",控制下拉選項(xiàng)為年份 format=\\\"yyyy-MM-dd\\\"、value-format=\\\"yyyy-MM-dd\\\",控制文字顯示為年月日 此時(shí)選中年份會(huì)顯示選中年的第一天【2023-01-01】,如果有規(guī)定月-日的需求,可以在選中事件里重新賦值。 :picker-options=\\\"pick

    2024年02月08日
    瀏覽(32)
  • Element-UI的DateTimePicker禁用日期時(shí)間選擇(type=datetime)

    Element-UI的DateTimePicker禁用日期時(shí)間選擇(type=datetime)

    \\\"date-fns\\\": \\\"^2.29.3\\\", \\\"element-ui\\\": \\\"^2.15.13\\\", 效果: ?? 效果:

    2024年02月12日
    瀏覽(34)
  • Element-UI的DatePicker禁用日期選擇(type=date/daterange)

    Element-UI的DatePicker禁用日期選擇(type=date/daterange)

    \\\"element-ui\\\": \\\"^2.15.13\\\", 選擇日:type=\\\"date\\\" 選擇日期范圍:type=\\\"daterange\\\" 選擇日,效果: ?? 選擇日期范圍,效果: 選擇日:type=\\\"date\\\" 選擇日期范圍:type=\\\"daterange\\\" 選擇日,效果: ?選擇日期范圍,效果: 選擇日:type=\\\"date\\\" 選擇日期范圍:type=\\\"daterange\\\" 例如:可選今天、今天前一周

    2024年02月10日
    瀏覽(41)
  • element-ui 月份選擇器,當(dāng)所選月份為當(dāng)前月時(shí),獲取當(dāng)天日期 。非當(dāng)前月時(shí),獲取所選月的最后一天

    element-ui 月份選擇器,當(dāng)所選月份為當(dāng)前月時(shí),獲取當(dāng)天日期 。非當(dāng)前月時(shí),獲取所選月的最后一天

    根據(jù)需求: 起始日期和結(jié)束日期的設(shè)置,當(dāng)所選月份為當(dāng)前月時(shí),獲取當(dāng)天日期 。 非當(dāng)前月時(shí),獲取所選月的最后一天? 全部代碼: 1、 Date.parse() 函數(shù)用于分析一個(gè)包含日期的字符串,并返回該日期與 1970 年 1 月 1 日午夜之間相差的毫秒數(shù) Date.parse()的語法如下: 2、 獲取

    2024年02月11日
    瀏覽(20)
  • 1、關(guān)于Element-UI日期范圍選擇器控件添加清空、確定按鈕

    1、關(guān)于Element-UI日期范圍選擇器控件添加清空、確定按鈕

    1、日期控件原來樣式 現(xiàn)在我們需要在日期控件右下角添加按鈕(如下方示例) 2、實(shí)現(xiàn)方式

    2024年02月16日
    瀏覽(28)
  • element-ui的年份范圍選擇器,選擇的年份需等于或小于當(dāng)前年份,選擇的年份范圍必須在三年之內(nèi)

    element-ui的年份范圍選擇器,選擇的年份需等于或小于當(dāng)前年份,選擇的年份范圍必須在三年之內(nèi)

    日期限制處理(禁用),下面我以我這邊的需求為例, 選擇的年份需等于或小于當(dāng)前年份 選擇的年份范圍必須在三年之內(nèi) 1.限制起始日期小于截止日期 1)根據(jù)用戶選中的開始日期,置灰不可選的日期范圍; 2)如果用戶先選擇截止日期,再選擇的開始日期,且開始日期大于

    2024年04月14日
    瀏覽(26)
  • 【vue組件】使用element-ui 實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)下拉選擇

    【vue組件】使用element-ui 實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)下拉選擇

    實(shí)現(xiàn)的思路是第一個(gè)下拉選擇在選擇了選項(xiàng)后將該選項(xiàng)的信息傳遞到接口請求下一個(gè)選項(xiàng)的內(nèi)容,依次類推 然后在清除了上一級(jí)選擇的選項(xiàng)后要將其次級(jí)和子孫級(jí)的選項(xiàng)都清除(包括選擇里的列表內(nèi)容) 下面看具體代碼: 效果圖:

    2024年02月11日
    瀏覽(36)
  • vue中使用element-ui ,設(shè)置級(jí)聯(lián)選擇器高度問題

    我本來以為設(shè)置elemnt-ui組件樣式需要用到深度選擇器,然后找了好多關(guān)于深度選擇器的,比如 /deep/ ::v-deep 后來才明白是權(quán)重不夠,解決方法如下 1、在全局css中設(shè)置 缺點(diǎn):所有級(jí)聯(lián)選擇器的高度都是固定的 結(jié)論:只有在所有頁面級(jí)聯(lián)選擇器都一致的情況下或者只有一個(gè)級(jí)聯(lián)

    2024年02月12日
    瀏覽(26)
  • element ui 下拉框 選擇月份和天數(shù)

    element ui 下拉框 選擇月份和天數(shù)

    目前做的管理系統(tǒng)項(xiàng)目,期望實(shí)現(xiàn)功能為:設(shè)置出賬周期和出賬日,考慮使用element ui下拉框?qū)崿F(xiàn)功能 vue2+element ui

    2024年04月29日
    瀏覽(17)

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請作者喝杯咖啡吧~博客贊助

支付寶掃一掃領(lǐng)取紅包,優(yōu)惠每天領(lǐng)

二維碼1

領(lǐng)取紅包

二維碼2

領(lǐng)紅包