要素内の TimePicker は時間の一部を無効にします (分単位で無効)

要素内の TimePicker は時間の一部を無効にします (分単位で無効)

プロジェクトの要件は、日付と時刻を選択し、現在の時刻以降の時刻のみを選択し、最小レベルを分単位で無効にすることです。

選択肢は2つあります
1. DateTimePicker 日付時刻ピッカーを使用します。
2. DatePickerとTimePickerを組み合わせて使用​​するここでは2番目の方法を使用します。最も重要な属性はpicker-optionsです。

<el-日付ピッカー
          v-model="formInline.inventoryDate"
          タイプ="日付"
          align="right"
          placeholder="日付を選択してください"
          :picker-options="ピッカーオプション"
          値の形式="yyyy-MM-dd"
          フォーマット="yyyy-MM-dd"
          @change="変更日"
         </el-date-picker>
         <el-time-picker
          v-model="formInline.inventoryDateTime"
          タイプ="日付"
          align="right"
          placeholder="時間を選択してください"
          :ピッカーオプション="{
           選択可能な範囲: this.startTimeRange
          }"
          @change="変更時刻"
          値の形式="HH:mm:ss"
          フォーマット="HH:mm:ss"
         </el-time-picker> ...
データ(){
	戻る {
		ピッカーオプション: {
    無効な日付: 時間 => {
     time.getTime() を返す < Date.now() - 3600 * 1000 * 24
    },
   },
	}
},
時計:
  'formInline.inventoryDate':{
   深い:真、
   ハンドラ(新しい値、古い値) {
    if(新しい値){
     let nowDate = this.$options.filters['sendTimeDate'](new Date().getTime()+60*1000);// 1分後の時間(これはビジネス要件によるもので、ここで自由に時間を調整できます)
     dt = nowDate.split(" "); とします。
     st = '' とします。
     if(newValue.split(" ")[0] == dt[0]){
      // 今日、選択された時間は現在の時間、分、秒から始まります st = dt[1];
     }それ以外{
      // 明日以降は 0:00 に開始します st = '00:00:00';
     }
     this.startTimeRange = st + '- 23:59:59';
     //console.log(this.startTimeRange)
     //例: 今日の時刻が 10:41:40 の場合、時間範囲を選択します: 11:41:40 - 23:59:59
       //それ以外の場合: 00:00:00 - 23:59:59
    }
   },
  }
 },

アイデア: el-date-picker の picker-options 属性の disabledDate 構成項目を使用して、まず日付ピッカーを無効にして、現在の日付以降の日付のみを選択できるようにし、次に watch を使用して日付ピッカーによって選択された日付を監視します。今日である場合は、el-time-picker の picker-options 属性の selectableRange 構成項目を使用して、選択可能な時間を制御します。

注: このロジックでは秒の選択を無効にできますが、フロントエンドページでは秒の選択は無効になりません。前の秒を選択すると、1 分後の秒がデフォルトで表示されます (これはビジネス要件のためでした。上記のコードを使用して、無効にする期間を自由に調整できます)

レンダリング効果:

ここに画像の説明を挿入

最初の方法をまとめます。無効にした日付は今日より前で、時間範囲は 22:00 から 02:00 です。コードを直接投稿します。

<el-日付ピッカー
         クラス="dateClass"
         v-モデル="aa"
         タイプ="datetime"
         :picker-options="ピッカーオプション"
         プレースホルダー="22:00以降"
         スタイル="幅:100%">
        </el-date-picker>


 データ() {
   戻る {
     ああ: ''、
     ピッカーオプション: {
      // 時間制限 selectableRange: ['22:00:00 - 23:59:59','00:00:00 - 02:00:00'], // ここで変数をバインドして時間を動的に制限することもできます // 日付制限 disabledDate: this.disabledDate
    },
   }
 } 、
 メソッド: {
  無効日付(時間) {
    time.getTime() を返す < Date.now() - 3600 * 1000 * 24
  }
}

要素内の TimePicker 時間セレクターで時間の一部を無効にする (分単位で無効にする) 方法については、これでこの記事は終了です。要素内の TimePicker 時間の一部を無効にする方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • 要素 DateTimePicker+vue ポップアップボックスに時間のみが表示される問題を解決する
  • 要素 DateTimePicker 日付時刻セレクターの使用例

<<:  Ubuntu 上の Apache で SSL (https 証明書) を設定する正しい方法の詳細な説明

>>:  Linux システムで IPv6 をサポートするように Nginx を設定する方法

推薦する

Raspberry PiにDockerをインストールする方法

Raspberry Pi は ARM アーキテクチャをベースとしているため、Docker のインスト...

Linux Tensorflow2.0のインストール問題を解決する

conda アップデート conda pip で tf-nightly-gpu-2.0-previ...

Velocity.js はページスクロール切り替え効果を実装します

今日は、複数ページのスクロール切り替え効果を備えた Web サイトを簡単かつ効率的に開発できる、小さ...

Win2008 R2 mysql 5.5 zip 形式 mysql のインストールと設定

Win2008 R2 zip形式のMySQLのインストールと設定1. Baidu MySQL 5.6...

MySQL の制限ページング最適化ソリューションの実装に関する簡単な説明

MySQL のページングステートメントの使用制限Oracle や MS SqlServer と比較す...

MySQL 5.7.27 のインストールと設定方法のグラフィックチュートリアル

MySQL 5.7.27のインストールチュートリアルは以下のように記録され、皆さんと共有されています...

ログインインターセプションを実装するためのVueルーティング

目次1. 概要2. ログインインターセプションを実装するためのルーティングナビゲーションガード1. ...

純粋なCSSでデジタルプラスとマイナスボタンを実装するための最適なソリューション

序文:デジタル加算ボタンと減算ボタンの実装には、次のような多くのソリューションがこれまでに使用されて...

MySql8.0以降のバージョンでROOTパスワードを正しく変更する方法

展開環境:インストールバージョン Red Hat Cent 7.0 MYSQL バージョン 8.0....

Mysql 8.0 のインストールとパスワードのリセットの問題

Mysql 8.0 のインストールの問題とパスワードのリセット1: MySqlをダウンロードする公式...

フロントエンド開発者のための HTML 入門

1 HTML入門1.1 初めてのコード体験、最初のウェブページの作成XML/HTML コードコンテン...

DockerにMinIOをインストールするための詳細な手順

目次1. docker環境が正常かどうかを確認する2. miniIOイメージをダウンロードする3. ...

MySQL パフォーマンス最適化インデックス プッシュダウン

インデックス条件プッシュダウン (ICP) は MySQL 5.6 で導入され、クエリを最適化するた...

Linux の権限管理コマンド (chmod/chown/chgrp/unmask) の詳細な説明

目次chmod例権限に関する特別な注意分析するチョーンchgrp umask Linux オペレーテ...