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

推薦する

vue3+ts+EsLint+Prettier 標準コード実装

目次使用EsLintの使用プロフィールを追加するPrettierの使用huskyとlint-stag...

jQueryはシンプルなコメントエリアを実装します

この記事では、参考までに、簡単なコメントエリアを実装するためのjQueryの具体的なコードを紹介しま...

CentOS に MySQL をインストールしてリモート アクセスを設定する方法

1. MySQLリポジトリソースをダウンロードする$ wget http://repo.mysql....

CSSの一般的なプロパティ

CSS の背景: background:#00ffee; //背景色を設定するbackground-...

ウェブサイトのAboutページの紹介コンテンツの書き方

公式、電子商取引、ソーシャル ネットワーキング、個人のいずれの Web サイトでも、訪問者に貴重な時...

Expressプロジェクトファイルディレクトリの説明と詳細な機能の説明

app.js: スタートアップファイル、またはエントリファイルpackage.json: プロジェク...

CSS が複数のクラスに一致する方法のサンプルコード

CSSは複数のクラスにマッチする次の HTML タグ li、クラスはオープン スタイルです。私の要件...

HTML の基本 - ハイパーリンク スタイルを設定する簡単な例

*** ハイパーリンクのスタイル設定の例a:link クリックされる前のハイパーリンクの状態a:vi...

docker compose を使用して FastDfs ファイル サーバーをインストールする詳細な例

ドッカーの作成 バージョン: '2' サービス: fastdfsトラッカー: ホスト...

収集する価値のある Linux ドキュメント編集コマンド 27 個

Linux col コマンドLinux の col コマンドは制御文字をフィルタリングするために使用...

JavaScript setinterval 1秒遅延ソリューション

setinterval を使用すると、ページを開いた直後に 1 秒の遅延後に実行されることがわかりま...

HTMLの表のtbodyは上下左右にスライドできます

テーブル ヘッダーが固定されている場合は、それを 2 つのテーブルに分割する必要があります。1 つの...

Linux で MySQL 8.0 バージョンをアンインストールする方法

1. MySQLをシャットダウンする [root@localhost /]# サービスmysqldを...

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

Dockerにfastdfsをインストールするディレクトリをマウント-v /e/fdfs/トラッカー...