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

momentjs實(shí)現(xiàn)DatePicker時(shí)間禁用的項(xiàng)目實(shí)踐

 更新時(shí)間：2023年09月16日 10:36:40   作者：會(huì)做夢(mèng)的辣條魚  
momentjs是一個(gè)處理時(shí)間的js庫,簡(jiǎn)潔易用,本文來介紹一下momentjs實(shí)現(xiàn)DatePicker時(shí)間禁用,具有一定的參考價(jià)值,感興趣的可以了解一下

momentjs是一個(gè)處理時(shí)間的js庫，簡(jiǎn)潔易用。

淺析一下， momentjs 在vue中對(duì)DatePicker時(shí)間組件的禁用實(shí)踐。

一，npm下載

npm install moment --save

二，particles.json中

"dependencies": {
    "axios": "^0.18.0",
    "iview": "^3.4.0",
    "moment": "^2.24.0",
    "vue": "^2.5.10",
    "vue-i18n": "^7.8.0",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1"
  },

三，引入使用

1.main.js中引入

import 'moment/locale/zh-cn'
moment.locale('zh-cn');  
Vue.prototype.$moment = moment;

2.頁面或組件引入使用

import moment from "moment"

3.方法使用

moment().format('YYYY-MM-DD');  //獲取格式

moment().startOf('month')  //獲取當(dāng)月第一天
moment().endOf('month')  //獲取當(dāng)月最后一天

moment().subtract(7, 'days')  //獲取前7天
moment().subtract(4,'month')  //獲取前4個(gè)月

更多方法參考momentjs官網(wǎng)：momentjs

4.應(yīng)用實(shí)例

a,日期禁用

 pickerStart: {
        disabledDate(time) {
            let startDate;
            let endDate=moment().subtract(4, "days").format("YYYY-MM-DD");
            if(today<4){
              startDate=moment().subtract(5,'month').endOf('month').format('YYYY-MM-DD');
            }
            if(today>4||today==4){
              startDate=moment().subtract(4,'month').endOf('month').format('YYYY-MM-DD');
            }
            return (
              time && time.valueOf() < new Date(startDate).getTime() ||
              time.valueOf() > new Date(endDate).getTime()
            );
        }
      },
      pickerEnd: {
        disabledDate(time) {
            let startDate;
            let endDate=moment().subtract(4, "days").format("YYYY-MM-DD");
            if(today<4){
              startDate=moment().subtract(5,'month').endOf('month').format('YYYY-MM-DD');
            }
            if(today>4||today==4){
              startDate=moment().subtract(4,'month').endOf('month').format('YYYY-MM-DD');
            }
            return (
              time && time.valueOf() < new Date(startDate).getTime() ||
              time.valueOf() > new Date(endDate).getTime()
            );
        },
      },

b,月份禁用

     pickerStart: {
        disabledDate(time) {
            let startMonth;
            let endMonth;
            if(today<4){
              startMonth=moment().subtract(5, "month").format("YYYY-MM");
              endMonth=moment().subtract(2, "month").format("YYYY-MM");
            }
            if(today>4||today==4){
              startMonth=moment().subtract(4, "month").format("YYYY-MM");
              endMonth=moment().subtract(1, "month").format("YYYY-MM");
            }
            return (
              time && time.valueOf() < new Date(startMonth).getTime() ||
              time.valueOf() > new Date(endMonth).getTime()
            );
        }
      },
      pickerEnd: {
        disabledDate(time) {
            let startMonth;
            let endMonth;
            if(today<4){
              startMonth=moment().subtract(5, "month").format("YYYY-MM");
              endMonth=moment().subtract(2, "month").format("YYYY-MM");
            }
            if(today>4||today==4){
              startMonth=moment().subtract(4, "month").format("YYYY-MM");
              endMonth=moment().subtract(1, "month").format("YYYY-MM");
            }
            return (
              time && time.valueOf() < new Date(startMonth).getTime() ||
              time.valueOf() > new Date(endMonth).getTime()
            );
        },
      },

四，頁面效果

a，禁用月份

b，禁用日期

五，完整代碼

1，頁面查詢組件引用

a.引入

import DateSearch from "_c/date-search";
components: {DateSearch},

b.渲染

 <date-search ref="dateSearch">
      <span class="search-label">查詢時(shí)間</span>
 </date-search>

c.獲取時(shí)間

 let {S_createTime_GTOE, S_createTime_LTOE} = this.$refs.dateSearch.getDateSearch();
        this.queryParam.endTime =S_createTime_LTOE;
        this.queryParam.startTime=S_createTime_GTOE;

2.時(shí)間組件

a.月份組件

<template>
  <span>
    <slot />
    <FormItem>
      <DatePicker
        v-model="condition.S_createTime_GTOE"
        confirm
        clearable
        placement="bottom-end"
        class="search-input"
        :type="type"
        :format="format"
        :options="pickerStart"
        transfer
        @on-change="onStartDateChange"
      ></DatePicker>
    </FormItem>
    <span class="search-label">至</span>
    <FormItem>
      <DatePicker
        v-model="condition.S_createTime_LTOE"
        confirm
        clearable
        placement="bottom-end"
        :type="type"
        :format="format"
        class="search-input"
        :options="pickerEnd"
        transfer
        @on-change="onEndDateChange"
      ></DatePicker>
    </FormItem>
  </span>
</template>
<script>
import { convertUTCTimeToMonth } from "@/libs/tools";
import moment from "moment"
export default {
  props: {
    format: {
      type: String,
      default: "yyyy-MM",
    },
    type: {
      type: String,
      default: "month",
    },
    defaultTime: {
      type: Boolean,
      default: true,
    },
    searchField: {
      type: String,
      default: "createTime",
    },
  },
  data() {
    const today= moment().format('DD');
    return {
      condition: {
        S_createTime_GTOE: "",
        S_createTime_LTOE: "",
      },
      pickerStart: {
        disabledDate(time) {
            let startMonth;
            let endMonth;
            if(today<4){
              startMonth=moment().subtract(5, "month").format("YYYY-MM");
              endMonth=moment().subtract(2, "month").format("YYYY-MM");
            }
            if(today>4||today==4){
              startMonth=moment().subtract(4, "month").format("YYYY-MM");
              endMonth=moment().subtract(1, "month").format("YYYY-MM");
            }
            return (
              time && time.valueOf() < new Date(startMonth).getTime() ||
              time.valueOf() > new Date(endMonth).getTime()
            );
        }
      },
      pickerEnd: {
        disabledDate(time) {
            let startMonth;
            let endMonth;
            if(today<4){
              startMonth=moment().subtract(5, "month").format("YYYY-MM");
              endMonth=moment().subtract(2, "month").format("YYYY-MM");
            }
            if(today>4||today==4){
              startMonth=moment().subtract(4, "month").format("YYYY-MM");
              endMonth=moment().subtract(1, "month").format("YYYY-MM");
            }
            return (
              time && time.valueOf() < new Date(startMonth).getTime() ||
              time.valueOf() > new Date(endMonth).getTime()
            );
        },
      },
    };
  },
  methods: {
    getDateSearch() {
      const defaultTime = this.defaultTime;
      let valid = true;
      let { S_createTime_GTOE, S_createTime_LTOE } = this.condition;
      if (S_createTime_GTOE && typeof S_createTime_GTOE === "object") {
        S_createTime_GTOE = convertUTCTimeToMonth(S_createTime_GTOE, true);
      }
      if (S_createTime_LTOE && typeof S_createTime_LTOE === "object") {
        S_createTime_LTOE = convertUTCTimeToMonth(S_createTime_LTOE, true);
      }
      if (defaultTime) {
        if (!S_createTime_GTOE) {
          this.$Message.warning("查詢起始時(shí)間不能為空");
          valid = false;
        } else if (!S_createTime_LTOE) {
          this.$Message.warning("查詢結(jié)束時(shí)間不能為空");
          valid = false;
        } 
        else if (S_createTime_LTOE < S_createTime_GTOE) {
          this.$Message.warning("結(jié)束時(shí)間不能早于起始時(shí)間");
          valid = false;
        } 
      } else {
        if (S_createTime_LTOE && S_createTime_LTOE < S_createTime_GTOE) {
          this.$Message.warning("結(jié)束時(shí)間不能早于起始時(shí)間");
          valid = false;
        }
      }
      return {
        valid,
        [`S_${this.searchField}_GTOE`]: S_createTime_GTOE,
        [`S_${this.searchField}_LTOE`]: S_createTime_LTOE,
      };
    },
    onStartDateChange(date) {
      this.condition.S_createTime_GTOE = date;
    },
    onEndDateChange(date) {
      this.condition.S_createTime_LTOE = date;
    },
    getDefaultTime() {
            let startMonth;
            let endMonth;
            let today= moment().format('DD'); //30
            if(today<4){
              startMonth=moment().subtract(4, "month").format("YYYY-MM");
              endMonth=moment().subtract(2, "month").format("YYYY-MM");
            }
            if(today>4||today==4){
              startMonth=moment().subtract(3, "month").format("YYYY-MM");
              endMonth=moment().subtract(1, "month").format("YYYY-MM");
            }
        return [startMonth,endMonth]
    },
    resetDateSearch(){
      if(this.defaultTime){
        this.condition.S_createTime_GTOE = this.getDefaultTime()[0],
        this.condition.S_createTime_LTOE = this.getDefaultTime()[1]
      }else{
        this.condition.S_createTime_GTOE = ""
        this.condition.S_createTime_LTOE = ""
      }
    }
  },
  created() {
    this.resetDateSearch();
  },
};
</script>

convertUTCTimeToMonth 方法

// 時(shí)間到月(年/月)
export const convertUTCTimeToMonth = (UTCDateString) =&gt; {
  if (!UTCDateString) {
    return '-'
  }
  function formatFunc (str) { 
    return str &gt; 9 ? str : '0' + str
  }
  let date2 = new Date(UTCDateString)
  let year = date2.getFullYear()
  let mon = formatFunc(date2.getMonth() + 1)
  let day = formatFunc(date2.getDate())
  let hour = date2.getHours()
  hour = formatFunc(hour)
  let min = formatFunc(date2.getMinutes())
  let second = formatFunc(date2.getSeconds())
  let dateStr = year + '-' + mon
  return dateStr
}

b.日期組件

<template>
  <span>
    <slot />
    <FormItem>
      <DatePicker
        v-model="condition.S_createTime_GTOE"
        confirm
        clearable
        placement="bottom-end"
        class="search-input"
        :type="type"
        :format="format"
        :options="pickerStart"
        transfer
        @on-change="onStartDateChange"
      ></DatePicker>
    </FormItem>
    <span class="search-label">至</span>
    <FormItem>
      <DatePicker
        v-model="condition.S_createTime_LTOE"
        confirm
        clearable
        placement="bottom-end"
        :type="type"
        :format="format"
        class="search-input"
        :options="pickerEnd"
        transfer
        @on-change="onEndDateChange"
      ></DatePicker>
    </FormItem>
  </span>
</template>
<script>
import { convertUTCTimeToDate } from "@/libs/tools";
import moment from "moment"
export default {
  props: {
    format: {
      type: String,
      default: "yyyy-MM-dd",
    },
    type: {
      type: String,
      default: "date",
    },
    defaultTime: {
      type: Boolean,
      default: true,
    },
    searchField: {
      type: String,
      default: "createTime",
    },
  },
  data() {
    const today= moment().format('DD');
    return {
      condition: {
        S_createTime_GTOE: "",
        S_createTime_LTOE: "",
      },
      pickerStart: {
        disabledDate(time) {
            let startDate;
            let endDate=moment().subtract(4, "days").format("YYYY-MM-DD");
            if(today<4){
              startDate=moment().subtract(5,'month').endOf('month').format('YYYY-MM-DD');
            }
            if(today>4||today==4){
              startDate=moment().subtract(4,'month').endOf('month').format('YYYY-MM-DD');
            }
            return (
              time && time.valueOf() < new Date(startDate).getTime() ||
              time.valueOf() > new Date(endDate).getTime()
            );
        }
      },
      pickerEnd: {
        disabledDate(time) {
            let startDate;
            let endDate=moment().subtract(4, "days").format("YYYY-MM-DD");
            if(today<4){
              startDate=moment().subtract(5,'month').endOf('month').format('YYYY-MM-DD');
            }
            if(today>4||today==4){
              startDate=moment().subtract(4,'month').endOf('month').format('YYYY-MM-DD');
            }
            return (
              time && time.valueOf() < new Date(startDate).getTime() ||
              time.valueOf() > new Date(endDate).getTime()
            );
        },
      },
    };
  },
  methods: {
    getDateSearch() {
      const defaultTime = this.defaultTime;
      let valid = true;
      let { S_createTime_GTOE, S_createTime_LTOE } = this.condition;
      if (S_createTime_GTOE && typeof S_createTime_GTOE === "object") {
        S_createTime_GTOE = convertUTCTimeToDate(S_createTime_GTOE, true);
      }
      if (S_createTime_LTOE && typeof S_createTime_LTOE === "object") {
        S_createTime_LTOE = convertUTCTimeToDate(S_createTime_LTOE, true);
      }
      if (defaultTime) {
        if (!S_createTime_GTOE) {
          this.$Message.warning("查詢起始時(shí)間不能為空");
          valid = false;
        } else if (!S_createTime_LTOE) {
          this.$Message.warning("查詢結(jié)束時(shí)間不能為空");
          valid = false;
        } 
        else if (S_createTime_LTOE < S_createTime_GTOE) {
          this.$Message.warning("結(jié)束時(shí)間不能早于起始時(shí)間");
          valid = false;
        } 
      } else {
        if (S_createTime_LTOE && S_createTime_LTOE < S_createTime_GTOE) {
          this.$Message.warning("結(jié)束時(shí)間不能早于起始時(shí)間");
          valid = false;
        }
      }
      return {
        valid,
        [`S_${this.searchField}_GTOE`]: S_createTime_GTOE.split(" ")[0],
        [`S_${this.searchField}_LTOE`]: S_createTime_LTOE.split(" ")[0],
      };
    },
    onStartDateChange(date) {
      this.condition.S_createTime_GTOE = date;
    },
    onEndDateChange(date) {
      this.condition.S_createTime_LTOE = date;
    },
    getDefaultTime() {
            let startDate;
            let today= moment().format('DD'); //30
            let endDate=moment().subtract(4, "days").format("YYYY-MM-DD");
            if(today<4){
              startDate=moment().subtract(4,'month').startOf('month').format('YYYY-MM-DD');
            }
            if(today>4||today==4){
              startDate=moment().subtract(3,'month').startOf('month').format('YYYY-MM-DD');
            }
        return [startDate,endDate]
    },
    resetDateSearch(){
      if(this.defaultTime){
        this.condition.S_createTime_GTOE = this.getDefaultTime()[0],
        this.condition.S_createTime_LTOE = this.getDefaultTime()[1]
      }else{
        this.condition.S_createTime_GTOE = ""
        this.condition.S_createTime_LTOE = ""
      }
    }
  },
  created() {
    this.resetDateSearch();
  },
};
</script>

convertUTCTimeToDate

// 時(shí)間到日期(年/月/日)
export const convertUTCTimeToDate = (UTCDateString) => {
  if (!UTCDateString) {
    return '-'
  }
  function formatFunc (str) {
    return str > 9 ? str : '0' + str
  }
  let date2 = new Date(UTCDateString)
  let year = date2.getFullYear()
  let mon = formatFunc(date2.getMonth() + 1)
  let day = formatFunc(date2.getDate())
  let hour = date2.getHours()
  hour = formatFunc(hour)
  let min = formatFunc(date2.getMinutes())
  let second = formatFunc(date2.getSeconds())
  let dateStr = year + '-' + mon + '-' + day
  return dateStr
}

到此這篇關(guān)于momentjs實(shí)現(xiàn)DatePicker時(shí)間禁用的項(xiàng)目實(shí)踐的文章就介紹到這了,更多相關(guān)momentjs DatePicker時(shí)間禁用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • 如何解決Webview和H5緩存問題確保每次加載最新版本的資源詳解

    如何解決Webview和H5緩存問題確保每次加載最新版本的資源詳解

    WebView在加載H5頁面時(shí),可能會(huì)因?yàn)榫彺鏅C(jī)制導(dǎo)致用戶看到舊版本的頁面,這篇文章主要介紹了如何解決Webview和H5緩存問題確保每次加載最新版本的資源的相關(guān)資料,需要的朋友可以參考下
    2025-02-02
  • js取得當(dāng)前網(wǎng)址

    js取得當(dāng)前網(wǎng)址

    用js獲取當(dāng)前網(wǎng)頁的網(wǎng)址，平時(shí)一直用location.href;下一篇我會(huì)把document.url和location.href對(duì)比一下
    2008-05-05
  • js實(shí)現(xiàn)秒表計(jì)時(shí)器

    js實(shí)現(xiàn)秒表計(jì)時(shí)器

    這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)秒表計(jì)時(shí)器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2019-12-12
  • 對(duì)JavaScript的eval()中使用函數(shù)的進(jìn)一步討論

    對(duì)JavaScript的eval()中使用函數(shù)的進(jìn)一步討論

    《JavaScript語言精髓與編程實(shí)踐》的讀者I22141提出了一問題：為什么下面這段代碼在JScript 和SpiderMonkey中表現(xiàn)不一樣：
    2008-07-07
  • 關(guān)于RxJS Subject的學(xué)習(xí)筆記

    關(guān)于RxJS Subject的學(xué)習(xí)筆記

    這篇文章主要介紹了關(guān)于RxJS Subject的學(xué)習(xí)筆記，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-12-12
  • Knockoutjs 學(xué)習(xí)系列(一)ko初體驗(yàn)

    Knockoutjs 學(xué)習(xí)系列(一)ko初體驗(yàn)

    本篇主要簡(jiǎn)單介紹了knockoutjs中最重要的概念：可觀察對(duì)象（數(shù)組）。非常不錯(cuò)具有參考借鑒價(jià)值，感興趣的朋友快來圍觀吧
    2016-06-06
  • js通過audioContext實(shí)現(xiàn)3D音效

    js通過audioContext實(shí)現(xiàn)3D音效

    這篇文章主要為大家詳細(xì)介紹了js通過audioContext實(shí)現(xiàn)3D音效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2021-04-04
  • JS手寫bind之處理new的情況詳解

    JS手寫bind之處理new的情況詳解

    雖然很少會(huì)遇到給bind返回的函數(shù)做new操作的場(chǎng)景，但面試中還是會(huì)涉及到的，所以本文將實(shí)現(xiàn)一下兼容new操作的bind寫法，順便學(xué)習(xí)一下new操作符，需要的可以參考一下
    2022-07-07
  • 20個(gè)拿來就能用的JavaScript技巧分享

    20個(gè)拿來就能用的JavaScript技巧分享

    這篇文章主要來和大家一起探討一下20?種?JavaScript?技巧和竅門,每種技巧和竅門都有通俗易懂的示例,讓我們一起來提升你的?JavaScript?技能吧
    2023-10-10
  • 淺談?lì)愃朴?function(){}).call()的js語句

    淺談?lì)愃朴?function(){}).call()的js語句

    這篇文章主要介紹了淺談?lì)愃朴?function(){}).call()的js語句,的相關(guān)資料,需要的朋友可以參考下
    2015-03-03

最新評(píng)論