Element+vueを使用して開始時間と終了時間の制限を実装する

Element+vueを使用して開始時間と終了時間の制限を実装する

この記事の例では、Element+vueを使用して開始と終了の時間制限を実装するための具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。

効果

<el-form-item label="開始時間">
   <el-date-picker v-model="startDate" type="datetime" placeholder="日付を選択"
                   フォーマット="yyyy-MM-dd HH:mm:ss"
                   値の形式="タイムスタンプ"
                   :編集可能="false"
                   :picker-options="pickerOptionsStart" @change="changeStart">
   </el-date-picker>
</el-form-item>
<el-form-item label="終了時間">
   <el-date-picker v-model="endDate" type="datetime" placeholder="日付を選択"
                   スタイル="幅: 100%;"
                   フォーマット="yyyy-MM-dd HH:mm:ss"
                   値の形式="タイムスタンプ"
                   :クリア可能="true"
                   :編集可能="false"
                   :picker-options="pickerOptionsEnd" @change="changeEnd">
   </el-date-picker>

</el-form-item>
ピッカーオプション開始: {},
ピッカーオプション終了: {},
開始日: ''、
終了日: ''、

 changeStart() { // 開始時間を制限します if (this.endDate != '') {
          (this.endDate <= this.startDate)の場合{
            this.$message.warning('終了時間は開始時間よりも大きくなければなりません!');
            this.startDate = '';
          }
        }
        this.pickerOptionsEnd = Object.assign({}, this.pickerOptionsEnd, {
          disabledDate: (時間) => {
            if (this.startDate) {
              time.getTime() を返します < this.startDate;
            }
          },
        });
      },

      changeEnd() { // 終了時刻を制限 console.log(this.endDate);
        if (this.startDate != '') {
          (this.endDate <= this.startDate)の場合{
            this.$message.warning('終了時間は開始時間よりも大きくなければなりません!');
            this.endDate = '';
          }
        }

        this.pickerOptionsStart = Object.assign({}, this.pickerOptionsStart, {
          disabledDate: (時間) => {
            if (this.endDate) {
              time.getTime() を返します > this.endDate;
            }
          },
        });
      },

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • vue+element で動的スキニングを実装するためのサンプルコード
  • Vue+Elementバックグラウンド管理フレームワークの統合実践
  • Antdesign-vueとsortablejsを組み合わせて、2つのテーブルをドラッグして並べ替える機能を実現
  • Vue Element Sortablejs を使用してテーブル列をドラッグする詳細な説明

<<:  Mysql5.7 以降での ONLY_FULL_GROUP_BY エラーの解決方法

>>:  キーフリーログインプロセスを実現するためのLinux構成の分析

推薦する

MySQLマスタースレーブデータベース構築方法の詳細な説明

この記事では、MySQL マスター/スレーブ データベースの構築方法について説明します。ご参考までに...

Ubuntu 18.04 が VMware 仮想マシンでネットワークに接続できない問題の解決策

仮想マシン内のUbuntu 18.04がネットワークに接続できない問題の解決策は次のとおりですVMw...

Linux CentOS 6.5 ifconfig が IP を照会できない問題の解決方法

最近、何人かの友人から、仮想マシンに CentOS をインストールした後、ifconfig コマンド...

CSS を使用して複数列の等高レイアウトを設定する方法の例

最初は、複数の列のコンテンツのサイズと高さが異なります。ここで、表示する背景を異なるものに設定し、各...

TomcatをダウンロードしてLinuxにインストールする詳細な手順

Linux に触れたばかりの方には、この内容が役に立つかもしれません。Linux にしばらく触れてい...

Tomcat マルチポートドメイン名アクセスと gzip 圧縮方式を有効にする構成

1. デフォルトのポート8080に加えて、ドメイン名のアクセスとserver.xmlのオープンにポー...

MySQL 最適化における B ツリー インデックスの知識ポイントのまとめ

SQL を最適化する必要があるのはなぜですか?当然ですが、SQL ステートメントを記述する場合、次の...

JS ES6 変数分割代入の詳細な説明

目次1. 脱構築とは何か? 2. 配列の分割3. 配列モードと代入モードの統一4. デフォルト値の構...

ログインと登録を実現するSpringboot+VUE

この記事の例では、ログインと登録を実装するためのspringboot+VUEの具体的なコードを参考ま...

EChartsマルチチャート連携機能の実装プロセス

表示するデータが多い場合、1 つのチャートに表示しても効果はよくありません。このとき、2 つのチャー...

Vueコンポーネントの動的コンポーネントの詳細な説明

目次要約する要約する配列が変更されると、対応するデータを動的にロードしますシナリオ: 異なるコンポー...

Linux システムの仮想ホストで Swoole Loader 拡張機能を有効にする方法

特記事項: Swoole 拡張機能のみがインストールされ、サーバーはホストにインストールされません。...

HTML テーブル マークアップ チュートリアル (5): ライト ボーダー カラー属性 BORDERCOLORLIGHT

表では、左上の境界線の色を個別に定義したり、セルの右下の境界線の色を定義したりできます。これら 2 ...

ユーザーのニーズがマーケティング指向のデザインにつながる

<br />それぞれのトピックについて、チーム内でメールで議論します。議論が白熱するにつ...

JavaScriptプロトタイプチェーンを理解する

目次1. プロトタイプとプロトタイプチェーンの平等関係を理解する2: プロトタイプとプロトタイプ チ...