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構成の分析

推薦する

HTML で margin:0 auto を使用するとページ全体が中央に配置されない問題の解決方法

今日、jsp ページを書きました。<div style="margin:0 auto...

ウェブデザイナーが持つべき資質と能力

Web デザインは、インターネットの出現後に誕生した新興の周辺産業です。 Web ページは店頭のよう...

ドメイン名を介してプロジェクトにアクセスするnginx + tomcatの例

ドメイン名を使ってプロジェクトにアクセスする方法が気になったのですが、自分でドメイン名を取得するのは...

MySQLdump コマンドを使用した MySQL データの移行

このソリューションの利点はシンプルさと使いやすさですが、欠点はダウンタイムが長くなることです。 した...

sqlalchemy に基づいて MySQL で追加、削除、変更、クエリ操作を実装する

需要シナリオ:上司は、クロ​​ーラーを使用してMySQLデータベースにデータを書き込んだり更新したり...

優れたウェブワイヤーフレーム設計・制作ツール13選を紹介

プロジェクトの作業を開始するときは、ワイヤーフレームを使用してアイデアをスケッチすることが重要です。...

Linux コマンドラインで電卓を使用する 5 つのコマンド

みなさんこんにちは。私は梁旭です。 Linux を使用するときに、計算を行う必要がある場合があり、そ...

MySQLの主キーとユニークキーの重複挿入の解決策の詳細な説明

目次解決: 1. 無視する2. 交換する3. 重複キーの更新についてデータを挿入するときに、重複した...

データ URI スキームを使用して Web ページに画像を埋め込む方法の紹介

データ URI スキームを使用すると、HTML、CSS、Javascript などで使用できるインラ...

Vueはシンプルなマーキー効果を実装します

この記事では、Vueの具体的なコードを共有して、シンプルなマーキー効果を実現しています。具体的な内容...

SQL Server での exists と except の使用法の概要

目次1. 存在する1.1 説明1.2 例1.3 交差/2017-07-21 2. 除く2.1 説明2...

Docker で ElasticSearch をデプロイする方法

1. ElasticSearch とは何ですか? Elasticsearch も Java で開発さ...

Ubuntu 20.04 は Wi-Fi に接続します (2 つの方法)

最近Ubuntu 20.04をインストールしましたが、Wi-Fiに接続できず、Wi-Fiアイコンも表...

HTML外部参照CSSファイルが効果を発揮しない理由の分析と解決

フロントエンドの初心者として、私は数日間フロントエンドをいじってみました。 。今日、私は自分が固く信...

Vueは小さなフォーム検証機能を実装します

この記事では、フォーム検証を実装するためのVueの具体的なコードを例として紹介します。具体的な内容は...