el-date-picker: 日付制限を選択します

序文：

基本的な使用:

時間間隔：

会社の事業: 日付範囲を選択しますが、選択できるのは今月のみです

day.js 簡易版 1

day.js 簡易版 2

序文：

element-ui は、vue の主要な ui コンポーネントライブラリとして、フロントエンド開発者に深く愛されています。

この記事では、el-date-picker 日付ピッカーの使用方法と、選択した日付を制限する方法に焦点を当てています。最初に公式ウェブサイトのリンクに移動します --- el-date-picker

基本的な使用:

まず下のコードを見てください

<template>
    <div class="content">
        <el-date-picker v-model="value" type="date" placeholder="选择日期">
        </el-date-picker>
    </div>
</template>

<script>
export default {
    data() {
        return {
            value: ''
        };
    }
};
</script>

これが最も基本的な使い方で、こんな感じです。

まず要件ですが、現在の日付より前の日付を選択できないようにする必要があります。picker-options 属性を見てください。disabledDate について大騒ぎする必要があります。

<el-date-picker v-model="value" type="date" placeholder="选择日期" :picker-options="pickerOptions"></el-date-picker>

data() {
        return {
            value: '',
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() < Date.now();
                },
            }
        };
   },

注: 戻り値はブール値です. true の場合, 無効であることを意味します. タイムスタンプを使用して比較します. 時間を印刷して、それが何であるかを確認できます. 実際には, 1つずつ時間です. タイムスタンプを取得し、現在時刻と比較し、現在時刻より前であれば前日ということで、真であれば選択禁止、そうでなければ選択可能

灰色の背景の日付にマウスを置くと、クリックして選択することが禁止されていることがわかります。

時間間隔：

難易度のアップグレード: 日付は 10 日先の日付のみ選択でき、前の日付も 10 日後の日付も選択できません. 実際、これは比較的簡単です. まず、日付 10 のタイムスタンプを計算する必要があります数日後、これは非常に簡単です

const DAY = 10
const nowTimer = Date.now()
const lastTimer = nowTimer + DAY * 24 * 60 * 60 * 1000

次に、disabledDate で比較します。

pickerOptions: {
    disabledDate(time) {
        return time.getTime() < nowTimer || time.getTime() > lastTimer;
    },
}

効果を見てください: この文書を書いた日付は 2023 年 3 月 31 日です。日付は 04-01 から 04-10 までしか選択できません。何も問題はありません。

会社の事業: 日付範囲を選択しますが、選択できるのは今月のみです

ここでは、会社で書いたビジネスも入れます. 要件は日付範囲を選択することであり、要件は当月のみ選択できます!

1. 最初に el-date-picker コンポーネントを使用し、タイプを daterange に設定します。これで問題ありません

 <el-date-picker v-model="value" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>

2.選択範囲を当月に限定する方法

上記のいくつかの経験の後、time.getTime() の値が月初よりも小さい日に true であり、月の終わりよりも大きい日に true である必要があることは明らかです。 . そうすれば、それについて考えるのははるかに簡単です!

①当月を取得する

      const date = new Date()
      const year = date.getFullYear(); //获取年份
      let month = date.getMonth() + 1; //获取月份

②当月の1日を起点とする1日を求める異論はありませんよね？

const startDate = `${year}-${month}-01 00:00:00`

③今月の末日を求めるのは、30日の月もあれば31日の月もあり、2月は28日や29日の月もあり、月の末日を求めるのはちょっと面倒です。現在の年が閏年か平年かを判断して、今月の日数を判断するのは面倒ですが、jsの日付オブジェクトならもっと簡単な方法があります

const lastDay = new Date(year, month, 0).getDate(); //获取当月最后一日
const endDate = `${year}-${month}-${lastDay} 23:59:59`

④ 開始時刻と終了イベントをタイムスタンプに統合して簡単に計算できるようにする

new Date(startDate).getTime(), new Date(endDate).getTime()

⑤ 戻り値を持つメソッドとして記述し、戻り値は開始タイムスタンプと終了タイムスタンプの 2 つの要素を含む配列です。

    const getDateRange = () => {
      const date = new Date()
      const year = date.getFullYear(); //获取年份
      let month = date.getMonth() + 1; //获取月份
      const lastDay = new Date(year, month, 0).getDate(); //获取当月最后一日
      month = month < 10 ? '0' + month : month;
      const startDate = `${year}-${month}-01 00:00:00`
      const endDate = `${year}-${month}-${lastDay} 23:59:59`
      return [new Date(startDate).getTime(), new Date(endDate).getTime()]
    }

pickerOptions: {
    disabledDate(time) {
        const [startTimer, endTimer] = getDateRange()
        return time.getTime() < startTimer || time.getTime() > endTimer;
    },
}

効果！これは制限の成功であることがわかります。

day.js 簡易版 1

プロジェクト内の時間処理のプラグインとして day.js パッケージをプロジェクトにインストールしたい --- day.js

このプラグインを使用すると、必要な時間を簡単に取得できます。

import dayjs from "dayjs"

const getDateRange = () => {
    const startTimer = dayjs().startOf('month').valueOf()
    const endTimer = dayjs().endOf('month').valueOf()
    return [startTimer, endTimer]
}

pickerOptions: {
    disabledDate(time) {
        const [startTimer, endTimer] = getDateRange()
        return time.getTime() < startTimer || time.getTime() > endTimer;
    },
}

day.js 簡易版 2

アイデアは、day.js の isBetween プラグインを使用して日付間隔を判断することです。

import dayjs from "dayjs"
const isBetween = require('dayjs/plugin/isBetween')
dayjs.extend(isBetween)

const getDateRange = () => {
    const startDate = dayjs().startOf('month').format("YYYY-MM-DD")
    const endDate = dayjs().endOf('month').format("YYYY-MM-DD")
    return [startDate, endDate]
}

disabledDate(time) {
     const [startDate, endDate] = getDateRange()
     const result = dayjs(time).isBetween(startDate, dayjs(endDate), 'day', '[]')
     return !result
},

day.jsは非常に軽量でパワフル、プラグインも豊富で、うまく使えばフロントエンドキラーとして大活躍すること間違いなしですので、興味のある方は是非使ってみてください！

この記事が少し役に立った、またはちょっとしたアイデアを思いつくのに役立ったと感じた場合は、小さな手を動かして気に入っていただければ幸いです。