日々の開発では、我々はいくつかのケースが発生します、の使用要素-UIの 選択制御は、ユーザーの日付と時刻の範囲を制限します(例:クエリーメッセージには、開始時間と終了時間、あなたは限界が今日の後にすることはできません時間を選択する必要があります)。
オンラインいくつかの文書を読んで、少しずつ、リストされているシンプルなバーコードの様々な、と各パラメータの意味の詳細な説明、使用、初心者と優しくありません。
私たちは、ここで使用する日付ピッカー日付ピッカーのである: 要素日付コントロールアドレスの公式ウェブサイトは、初心者の制限時間の日付の使用制限は、書き込みルールへの道を理解しないかもしれません。次に、我々は解釈除外日の詳細なパラメータを設定します。コントロールの時刻と日付を制限する方法についての十分な理解のフルレンジ。
公式文書は、制限の説明を日付:
使用し、非常に簡単です、それはここに書かれた、公式文書だ飢えてここを見て disabledDate 限度にパラメータを、 disabledDateは、関数内のパラメータを持つ関数で、以下は簡単な擬似コード例であります
// HTML第1のセレクタプラス日時:ピッカー・オプション属性 // 例: <日付-EL- ピッカー V -model = "endDateに" :ピッカー -options = "disabledDate" > </ EL-DATE-ピッカー> / / データは、関連するパラメータに書き込まれたヴュー (時間)=>:disabledDate { リターン time.getTime()< 新規新しいA日付()getTime()// 毎回ここで、現在のパラメータ、時間セレクタサイレント代表時間、を決定するための時間か否かを、これらのオプション。 @戻り時間により>一定時間または戻り時間<選択された時間帯に一定の時間制限。 // .getTime()はミリ秒に変換されるのに必要な時間を覚えています。 })
上記の単純な例では、我々は慎重に読んだ後の学生は、今の時間的制約の方法、非常に単純な事実は、設定することにより、ことを理解している必要があることを信じてい disabledDateのパラメータを時間、 返却日を設定するための使用、式よりも大きい以下の範囲。
次に、我々はより明確列は、日付コントロールを使用しているものと解釈への2つの詳細なケースを使用し、
二つの日付の連携制御(先月の限界開始時刻と終了時刻)
実際には、アイデアは、最大に時間が表示さの時間の始まりを介してデータを取得するための終了時刻を現在の時刻を開始し、開始時刻や現在の時間の上限をすることができ、非常に簡単です。コードの以下の詳細な解釈。
ヒント:コントロールの日付に必要なパラメータは、「2020年12月31日」の形式ですが、使用中の時間の関数を制限「<」、「>」、「> =」、「<=」、比較方法が必要とされています使用.getTime()は、この形式はああコントラストされていない「2020年12月31日」、それ以外の場合は、ミリ秒単位に変換され、
// HTML代码 <EL-タのデータピッカー V -model = "VALUE1" プレースホルダ = "开始时间" :ピッカー -options = "スタート"> </ EL-日付ピッカー> <EL-タのデータピッカー V -model = "value2の" プレースホルダ = "结束时间" :ピッカー -options = "終了"> </ EL-日付ピッカー> // Vueの中のデータ中代码 をvalue1: '2020年12月31日' 、 値2:「2020-12- 31' 、 開始:{ disabledDate:(時間) =>{ // ここでは、30日のミリ秒数 スペースCONST = 30 * 24 * 3600 * 1000年@ 時間のミリ秒単位の最小数、現在の時刻を引い30日のミリ秒数を設定 constのMINTIME = 新しい新しい A日付()getTime()を- 。スペース // 今日のミリ秒の最大数現在の時間を加えたミリ秒の日の数を設定 MAXTIMEは=一定新しい新しい A日付を(新しい新しい A日付(新しい新しい A日付()toLocaleDateString())getTime()+ 24 * 60 * 60 * 1000 -... 1 ) // 最大電流時、前に30日間の最低式を返す リターン)(time.getTime < || time.getTime MINTIME()> MAXTIME } }、 終了:{ disabledDate:(時間) => { // ここでは、30日のミリ秒数 スペース×1000 = 30 * 24 * 3600のconst // 日付時刻を取得し たstartTime = constのVALUE1 // 現在選択時間設定 のconst startTimesたstartTime = || 新しい新しい。)(getTime()A日- スペース //を最小選択時間を設定し、現在の時刻を取得するために、手動でDATERANGE現在の方法に必要な時間、コードの下、現在の時刻を取得する方法を示すことがある のconst MINTIME =(startTimes === DATERANGE)?新しい新しい A日(startTimes).getTime():新しい新しい A日(startTimes).getTime() - (* 1000 * 24 * 3600 1 ) / / 今日選択する最大時間を設定 MAXTIME = constの新しい新しい A日付(新しい新しい A日付(新しい新しい - 1 .. A日()toLocaleDateString())getTime()* 1000 + 24 * 60 * 60 ) //をここではまだ前に30日間の最小値、式の最大のボックスを返すか、時間を開始することを選択した今日の リターン <MINTIME || time.getTime()>)time.getTime(MAXTIME } 、}
// 書き込み機能の現在の時刻を取得 VAR DD = 新しい新しいA日付() dd.setDate(dd.getDate() + ADDDATE)// 取得ADDDATE日の日付後 VAR Y = dd.getFullYear() VARメートル= dd.getMonth()+。1 <10?「0 '+(dd.getMonth()+ 1):。dd.getMonth()+ 1 //は現在の月の日付を取得、10未満0構成する VARを D = dd.getDate()<10?' 0「+ dd.getDate( ):dd.getDateは() // アップ未満10 0以上、いくつかの現在の数を取得 させDATERANGE = Y + ' - ' + M + ' - ' + D
男に釣りを与えるよりも、魚を与える、我々はコピーが速く、短い時間であってもよく、盲目的に関連するコードをコピーするのではなく、よりよく理解制御日付のこの方法の使用を制限したいと考えていますが、彼らを改善したいことができます我々は、利用状況のアイデアを、各パラメータの設計を理解するために続けなければなりません。