プロジェクトの要件は、日付と時刻を選択し、現在の時刻以降の時刻のみを選択し、最小レベルを分単位で無効にすることです。 選択肢は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 を設定する方法
皆さんおはようございます。しばらく記事を更新していませんでした。実は、私は流行中に1か月以上家にいて...
私はプロジェクトの展開にAlibaba Cloudから購入したCentOSを使用しています。最近、プ...
目次1. コア1. Domノードを取得する2. ノードの更新2.1 実践演習3. Domノードを削除...
Tomcat の上位バージョンでは、デフォルト モードは NIO モードを使用することになります。...
背景当初は VMware の公式 Web サイトから 6.7 Vcenter をダウンロードしたかっ...
目次背景サーバーの依存関係バックエンド構成クロスドメインバックエンド構成の静的リソースアクセスではk...
本日、MySQL 8.0 をアップデートしました。最初の問題: Navicatがデータベースに接続で...
最近、サーバー上のアカウントが2つハッキングされ、パスワードが改ざんされました。幸い、まだ使えるアカ...
必要な方はどなたでも参考にしてください。試してみて問題が見つかった場合は、メッセージを残してお知らせ...
目次1. grub.cfg ファイルの紹介1. grub.cfg ファイルの場所2. grub.cf...
目次1. 公式の足場を使って構築する2. プロジェクトディレクトリ分析3. TypeScript の...
ダウンロードダウンロードアドレス: https://redis.io/download /usr/l...
最近、docker load -i コマンドを使用してイメージ パッケージを圧縮した後、イメージ名と...
今日は簡単な3Dルービックキューブを作ってみましょうまずはレンダリングを見てみましょう!これを学んだ...
1: タグセレクタータグセレクターはすべてのタグに使用されます。ここでは p を例に挙げます。つまり...