プロジェクトの要件は、日付と時刻を選択し、現在の時刻以降の時刻のみを選択し、最小レベルを分単位で無効にすることです。 選択肢は2つあります <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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Ubuntu 上の Apache で SSL (https 証明書) を設定する正しい方法の詳細な説明
>>: Linux システムで IPv6 をサポートするように Nginx を設定する方法
Raspberry Pi は ARM アーキテクチャをベースとしているため、Docker のインスト...
conda アップデート conda pip で tf-nightly-gpu-2.0-previ...
今日は、複数ページのスクロール切り替え効果を備えた Web サイトを簡単かつ効率的に開発できる、小さ...
Win2008 R2 zip形式のMySQLのインストールと設定1. Baidu MySQL 5.6...
MySQL のページングステートメントの使用制限Oracle や MS SqlServer と比較す...
MySQL 5.7.27のインストールチュートリアルは以下のように記録され、皆さんと共有されています...
目次1. 概要2. ログインインターセプションを実装するためのルーティングナビゲーションガード1. ...
序文:デジタル加算ボタンと減算ボタンの実装には、次のような多くのソリューションがこれまでに使用されて...
展開環境:インストールバージョン Red Hat Cent 7.0 MYSQL バージョン 8.0....
Mysql 8.0 のインストールの問題とパスワードのリセット1: MySqlをダウンロードする公式...
1 HTML入門1.1 初めてのコード体験、最初のウェブページの作成XML/HTML コードコンテン...
目次1. docker環境が正常かどうかを確認する2. miniIOイメージをダウンロードする3. ...
インデックス条件プッシュダウン (ICP) は MySQL 5.6 で導入され、クエリを最適化するた...
1. INSERT INTO SELECT文ステートメントの形式は次のとおりです: Insert ...
目次chmod例権限に関する特別な注意分析するチョーンchgrp umask Linux オペレーテ...