プロジェクトの要件は、日付と時刻を選択し、現在の時刻以降の時刻のみを選択し、最小レベルを分単位で無効にすることです。 選択肢は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 を設定する方法
BackUpMysql.sh スクリプト #!/bin/bash PATH=/bin:/sbin:/...
mysql が閉じない場合の解決策:コンピュータのタスクバーを右クリックしてタスクマネージャーを開き...
目次React アップロードファイル表示の進行状況デモフロントエンドにReactアプリケーションを素...
CSSとは# CSS (Cascading Style Sheets の略) は、「カスケーディング...
1. システムインストールパッケージ yum -y インストール make gcc-c++ cmak...
目次古典的なアプローチ質問その他の質問注意が必要な問題古典的なアプローチご存知のとおり、アカウントの...
最近、WeChatアプレットを書いていたとき、WeChatアプレットではすべてのリクエストインターフ...
max_allowed_packet は、受け入れるパケットのサイズを設定するために使用される ...
コンセプト紹介: MySQL の redo ログにはトランザクションの動作が記録されることはご存じの...
ページをレイアウトする際、ユーザーに異なる視覚効果を与えるために、div の背景色を半透明の状態に設...
0. 準備: • iTunesを閉じる• タスクマネージャーでiTunesから始まるサービスを終了し...
序文: Docker はオープンソースのアプリケーション コンテナ エンジンであり、開発者はこれを使...
まずエラーコードを見てみましょう。 html: <テーブルボーダー="1"...
1. sql_modeを確認する @@sql_mode を選択照会された値は次のとおりです。 ON...
データベースストアドプロシージャ`generate_serial_number_by_date` が...