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

推薦する

要素のel-tree複数選択ツリー(チェックボックス)親子ノードの関連付けが関連付けられていません

属性チェック-厳密公式ドキュメントでは、チェックボックスが表示されるときに親項目と子項目を互いに関連...

Linux での SSH パスワードフリーログイン設定の詳細な説明

Linux サーバー A と B が 2 台あり、一方のサーバーから SSH 経由でパスワードなしで...

Power Shell に vim 実装コード例を追加する方法

1. Vimの公式ウェブサイトにアクセスして、オペレーティングシステムに適した実行ファイルをダウンロ...

Linux システム AutoFs 自動マウント サービスのインストールと構成

目次序文1. サービスプログラムをインストールする2. メイン設定ファイルを書く3. サブ構成ファイ...

ベースリンクタグの使用の紹介ベース

<br />リンクをクリックすると、ポップアップ表示される Web ページ アドレスは ...

ランダム点呼 Web ページを実装するための JavaScript

JavaScriptは、参考のためにランダムな点呼Webページを作成します。具体的な内容は次のとお...

CSS3 のテキストとフォントの新しい設定

テキストシャドウテキストシャドウ: 水平オフセット 垂直オフセット ぼかし色互換性: IE10+ &...

Reactの基本のまとめ

目次序文始めるReactライフサイクルリアクトファイバーリアクトセットステートReactイベントメカ...

docker run後にコンテナがExited (0)と表示される問題を解決する

Centos7 上で openresty 用の Dockerfile を作成し、ビルドしました。 d...

Linuxフラッシュのインストール方法

Linuxにフラッシュをインストールする方法1. Flashの公式サイトにアクセスし、ダウンロードを...

Vueは質問応答機能を実装する

1. リクエスト回答インターフェース2. ユーザーの回答が正しいかどうかを判断します。回答が正しい場...

Vue ログインページ用の動的パーティクル背景プラグインの実装

目次動的パーティクル効果は次のとおりです。プラグインをインストールする動的パーティクル効果は次のとお...

MySql 学習ノートにおけるトランザクション分離レベルの詳細な説明

背景トランザクションについて話すとき、誰もがそれに精通している必要があります。MySQL データベー...

JS 手ぶれ補正機能の実装と使用シナリオ

目次1. 手ぶれ補正機能とは何ですか? 1. なぜ手ぶれ補正機能が必要なのでしょうか? 2. 手ぶれ...

Vueグローバルカスタム命令の実践 モーダルドラッグ

目次背景実装のアイデア成果を達成する背景最近取り組んでいるプロジェクトは、Vue2 で構築されたプロ...