要素内の 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 を設定する方法

推薦する

MySQL の基本: グループ化関数、集計関数、グループ化クエリの詳細な説明

目次1. 使い方が簡単2. DISTINCTを使用して重複を削除する3. COUNT()の詳細な紹介...

インデックスを設計する際の原則は何ですか? インデックスの障害を回避するにはどうすればよいでしょうか?

目次主キーインデックス頻繁にクエリされるフィールドのインデックスを作成する大きなフィールドのインデッ...

Linux sftp コマンドの使用法

SFTPの概念sftp は、安全なファイル転送プロトコルである Secure File Transf...

MySQL遅延スレーブを導入するメリットのまとめ

序文MySQL のマスター/スレーブ レプリケーション関係は、厳密には「同期」または「マスター/スレ...

MySQL 5.7.13 ソースコードのコンパイル、インストール、および構成方法のグラフィックチュートリアル

インストール環境: CentOS7 64ビットMINI版公式ソースコードのコンパイルおよびインストー...

CSS3で実装された炎のアニメーション

成果を達成する実装コードhtml <div class="コンテナ">...

JavaScript でよく使われる 5 つのオブジェクト

目次1. JavaScript オブジェクト1).配列オブジェクト2).ブールオブジェクト3).日付...

CSSの複数条件の書き方の詳細説明:

:not疑似クラスセレクターは、式に一致しない要素をフィルタリングできます。例 テーブル tbod...

JavaScript バブルソートの例

目次1. バブルソートとは何か2. 例を挙げるラウンド1:第2ラウンド:第3ラウンド:第4ラウンド:...

Linux のさまざまなロックメカニズムの使用方法と違いについて詳しく説明します

序文:この知識を理解する必要がある人は、すでにプロセス間通信とスレッド間通信の基本的な理解を持ってい...

MYSQLデータベーステーブル構造の最適化方法の詳細な説明

この記事では、例を使用して、MYSQL データベース テーブル構造を最適化する方法を説明します。ご参...

JavaScript における正規表現の実際的な応用の詳細な説明

実際の業務では、JavaScript の正規表現が依然として頻繁に使用されます。したがって、この部分...

WeChatアプレットの入力ジッター問題を解決する方法

問題を見つけるまず問題を見てみましょう。ミニプログラムでは、Vant のダイアログ コンポーネント ...

MySQL inndbジョイントインデックスを正しく使用する方法を徹底的に理解するためのケーススタディ

最近確認された5件のデータを照会するビジネスがあります。 `id`、`title` を選択 `th_...

CSS が最初のサイクルで画像を読み込むために @keyframes を使用するときに発生するホワイトギャップの問題 (フラッシュ画面) をすばやく解決します。

問題の説明: CSS アニメーション プロパティを使用すると、ループが最初に読み込まれたときに白いギ...