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

推薦する

一目でわかる$nextTickの説明

目次1. 機能説明2. 親コンポーネント3. サブコンポーネント NextTick.vue 4なぜ未...

WeChatアプレットが計算機機能を実装

この記事では、WeChatアプレットの計算機機能を実装するための具体的なコードを参考までに紹介します...

HTMLのテーブルの内容は中央に水平と垂直に表示されます

CSSスタイルファイルで指定 #class td /*表のテキストを左右上下に揃えるように設定する*...

Docker で Springboot プロジェクトを実行する実装

導入: springboot プロジェクトを実行する Docker の構成は実は非常にシンプルで、L...

フロントエンドパフォーマンス最適化に関する補足記事

序文私は、Web サイトのフロントエンド パフォーマンス最適化のための JavaScript と C...

角度コンテンツ投影の詳細な説明

目次単一コンテンツ投影マルチコンテンツ投影単一条件のコンテンツ投影アプリ-人物-htmlアプリ担当者...

Docker Machineの詳細な説明

Docker と Docker Machine の違いDocker はクライアント サーバー アーキ...

LINUX ポートが占有されているかどうかを確認します

ポートが占有されているかどうかは、これまで一度もわかりませんでした。多くの人に尋ねて、ようやくわかり...

mysql 解凍パッケージの基本インストールチュートリアル

新しいコンピューターに変更したので、すべての環境を新しいコンピューター上で設定する必要があります。ふ...

メンテナンスしやすい CSS コードを書くための 5 つのガイドライン

1. スタイルシートの先頭にコメント ブロックを追加して、スタイルシートの作成日、作成者、タグ、その...

Linux ファイル記述子、ファイルポインタ、および inode の詳細

目次Linux - ファイル記述子、ファイルポインタ、インデックスノード1. Linux - ファイ...

dockerでデプロイされたjenkinsでgitプログラムを実行する際の問題について

1. まず、gitを関連付けるときにエラーメッセージが報告されます: エラー: ビルドするリビジョン...

Reactは二次的連鎖効果(階段効果)を実現する

この記事では、二次リンク効果を実現するためのReactの具体的なコードを参考までに共有します。具体的...

GoのDockerデプロイメント用の基本イメージ2つの実装

1. golang:最新のベースイメージ mkdir gotest タッチメイン.go Docker...

MySQL5.6.31 winx64.zip インストールと設定のチュートリアル

#1. ダウンロード # #2. ローカルに解凍し、必要な構成のmy*.iniを変更します。 #3....