2016-07-26 8 views
0

コンテキスト:ブートストラップ・timepicker入力検証

私は、イベント作成ツールのための4つの異なる日付/時刻ピッカーの検証を追加しようとしています。


日付と時刻の最初のセットは、入力はイベント開始日付/時刻です:入力

開始日 - この日付は今日の日付より前にすることはできません。

開始時刻入力 - これは検証を必要としません。


日付と時刻入力の第二セットはイベント終了日/時刻です:

終了日の入力 - これは開始日の前にすることはできませんが、開始日と同じにすることができます。

終了日入力 - 終了日が開始日と同じ場合、終了時刻は開始時刻より前にすることはできません。終了日が開始日の後にある場合、終了時刻はいつでも可能です。

<p> 
<table> 
    <tr> 
     <td> 
      <label>Event Start Date</label> 
      <span class="input-append bootstrap-timepicker"> 
       <input type="text" runat="server" id="eventstartdate" name="eventstartdate" readonly="true" class="input-small" /> 
      </span> 
     </td> 
     <td> 
      <label>Event Start Time</label> 
      <span class="input-append bootstrap-timepicker"> 
       <input runat="server" id="timepicker1" type="text" readonly="true" class="input-small"> 
      </span> 

     </td> 
    </tr> 
</table> 
</p> 

<p> 
<table> 
    <tr> 
     <td> 
      <label>Event End Date</label> 
      <span class="input-append bootstrap-timepicker"> 
       <input type="text" runat="server" id="eventenddate" name="eventenddate" readonly="true" class="input-small" /> 
      </span> 
     </td> 
     <td> 
      <label>Event End Time</label> 
      <span class="input-append bootstrap-timepicker"> 
       <input runat="server" id="timepicker2" type="text" readonly="true" class="input-small"> 
      </span> 
     </td> 
    </tr> 
</table> 

</p> 

トリックは私が送信ボタンをクリックしたときに発生する検証したくないということである。ここでは


はHTMLです。 に無効な日付/時刻を入力しないようにしたい

私はここで私の頭の上に少しですが、私はどこから始めるべきかも分かりません。どんな助けでも大歓迎です!

+0

Bootstrap 3 Datepickerには、あなたが求めているものである[DEMO](https://eonasdan.github.io/bootstrap-datetimepicker/#linked-pickers)があります。 –

答えて

0

jquery .on("change", function())メソッドを使用して日付ピッカーにイベントリスナーを追加する必要があります。その後、日付ピッカーの値が変更されるたびにコードが開始されます。