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 5.7.17 winx64 のインストールと設定方法のグラフィックチュートリアル

Windows インストール mysql-5.7.17-winx64.zip メソッド レコード &...

HTML 基本要約推奨事項 (タイトル)

HTML: タイトル見出しは <h1> - <h6> などのタグによって定...

複数の X 軸を使用して 7 日間の天気予報を実現するための Echarts サンプル コード

目次UIデザインEcharts の例の効果序文サンプルコード最終結果UIデザイン Echarts の...

CSS の Display、Visibility、Opacity、rgba、z-index: -1 の違い

ウェブページ上のいくつかの要素の非表示、透明、その他のプロパティを制御する必要があることがよくありま...

Win10 での MySQL 8.0.20 のインストールと設定のチュートリアル

Win10 システムでの MySQL 8.0.20 のインストールと設定の超詳細なチュートリアルMy...

Docker Enterprise Edition を使用して独自のプライベート レジストリ サーバーを構築する

Docker は本当に素晴らしいです。特に、仮想マシンを使用する場合に比べて、Docker イメージ...

2012年のベストWebデザイン作品レビュー[パート1]

新年の初めに、友人の健康と2013年が素晴らしい年となることを心からお祈りいたします。この記事では、...

Vueプロジェクトウォッチで関数が繰り返しトリガーされる問題の解決

目次問題の説明:解決策1解決策2問題の説明:ページ A と B の 2 つがあり、各ページにはget...

div が隠しテキストを超え、div 部分の向こうの CSS コードを隠します

隠れる前に:隠れた後: CS: ...コードをコピーコードは次のとおりです。オーバーフロー:非表示;...

JavaScript で同時実行制御を実装する方法

目次1. 同時実行制御の概要1.1 フェーズ1 1.2 フェーズ2 1.3 フェーズ3 2. 同時実...

ウェブページのフォント設定についての簡単な説明

サイト全体のフォントを設定することは、常にシンプルでありながら難しい作業です。深く掘り下げていくと、...

React 手書きタブ切り替え問題

親ファイル React をインポートし、{useState} を 'react' か...

MySql の忘れたパスワードの変更方法はバージョン 5.7 以上に適しています

1. まずmysqld.exeプロセスを停止します2. cmd を開き、mysql の bin ディ...

CSS を使用してデータ ホットスポット効果を実現する方法

効果は以下のとおりです。 分析する1. ここでは、点を囲む 3 つの円がズームアニメーションを実行し...

Reactは二次的連鎖効果(階段効果)を実現する

この記事では、二次リンク効果を実現するためのReactの具体的なコードを参考までに共有します。具体的...