0

Context:

I am trying to add validation on 4 different date/time pickers for an event creation tool.

The first set of date and time input is the Event Start Date/Time:

Start Date input - this date cannot be before today's date.

Start Time input - this requires no validation.

The second set of date and time input is the Event End Date/Time:

End Date Input - this cannot be before the Start Date but can be the same as the Start Date.

End Time Input - If the End Date is the same as the Start Date then the End time cannot be before the Start Time. If the End Date is after the Start Date then the End Time can be any time.

Here is the HTML:

<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>

The trick is that I don't want to the validation to happen when I click on the submit button. I want to prevent the user from inputting an invalid date/time.

I am a bit in over my head here and I don't even know where to start. Any help would be greatly appreciated!

Anesca
  • 35
  • 11
  • Bootstrap 3 Datepicker has a [DEMO](https://eonasdan.github.io/bootstrap-datetimepicker/#linked-pickers) which is EXACTLY what you are asking for. – SDekov Jul 26 '16 at 15:12

1 Answers1

0

You should add an event listener to the date pickers using jquery .on("change", function()) method. Then your code will initiate every time the date pickers value is changed.

mcrlc
  • 137
  • 5