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

推薦する

HTTPSの最も優れた説明

皆さんおはようございます。しばらく記事を更新していませんでした。実は、私は流行中に1か月以上家にいて...

CentOS の Nginx 公式 Yum ソースの設定を詳しく解説

私はプロジェクトの展開にAlibaba Cloudから購入したCentOSを使用しています。最近、プ...

JavaScript DOM オブジェクト操作

目次1. コア1. Domノードを取得する2. ノードの更新2.1 実践演習3. Domノードを削除...

コネクタコンポーネントから Tomcat のスレッドモデルを見る - BIO モード (推奨)

Tomcat の上位バージョンでは、デフォルト モードは NIO モードを使用することになります。...

VMware vCenter 6.7 のインストール プロセス (グラフィック チュートリアル)

背景当初は VMware の公式 Web サイトから 6.7 Vcenter をダウンロードしたかっ...

React+Koa によるファイルアップロードの実装例

目次背景サーバーの依存関係バックエンド構成クロスドメインバックエンド構成の静的リソースアクセスではk...

MySQL 8.0の落とし穴の詳細な説明

本日、MySQL 8.0 をアップデートしました。最初の問題: Navicatがデータベースに接続で...

Ubuntu 18.04 サーバーのパスワードを忘れたり改ざんされた場合にパスワードをリセットする方法

最近、サーバー上のアカウントが2つハッキングされ、パスワードが改ざんされました。幸い、まだ使えるアカ...

Vue 円形パーセンテージ プログレスバー コンポーネントの機能の実装

必要な方はどなたでも参考にしてください。試してみて問題が見つかった場合は、メッセージを残してお知らせ...

Linux システムで grub.cfg ファイルの破損を修復する手順

目次1. grub.cfg ファイルの紹介1. grub.cfg ファイルの場所2. grub.cf...

Vue の新しいパートナー TypeScript クイックスタート実践記録

目次1. 公式の足場を使って構築する2. プロジェクトディレクトリ分析3. TypeScript の...

Linux redis-Sentinel 設定の詳細

ダウンロードダウンロードアドレス: https://redis.io/download /usr/l...

Docker ロード後にイメージ名が none になる問題の解決方法

最近、docker load -i コマンドを使用してイメージ パッケージを圧縮した後、イメージ名と...

CSS で 3D ルービック キューブを実装するサンプル コード

今日は簡単な3Dルービックキューブを作ってみましょうまずはレンダリングを見てみましょう!これを学んだ...

HTML CSS の 3 つの一般的なスタイル セレクター

1: タグセレクタータグセレクターはすべてのタグに使用されます。ここでは p を例に挙げます。つまり...