DatePicker - Using minDate and maxDate
I'm fairly new to jQuery. I'm trying to use Datepicker to create two date boxes on my form and to allow the user to easily enter a date range. Here is my current code:
- <td class="invisible input-daterange input-group" id="datepicker" data-date-format='d-M-yy' data-date-start-date="23-Oct-17" data-date-end-date="22-Feb-18" data-date-min-date="5-Apr-16" data-date-max-date="31-Dec-17">
- <input type="text" class="input-sm form-control datepick inline" style="display: inline-block; margin-left: 50px;" value="23-Oct-17" name="fromdate" placeholder="From date" data-date-start-date="23-Oct-17" data-date-end-date="22-Feb-18" data-date-min-date="5-Apr-16" data-date-max-date="31-Dec-17"/>
- <p> to </p>
- <input type="text" class="input-sm form-control datepick inline" style="display: inline-block; margin-left: 50px;" value="23-Oct-17" name="fromdate" placeholder="From date" data-date-start-date="23-Oct-17" data-date-end-date="22-Feb-18" data-date-min-date="5-Apr-16" data-date-max-date="31-Dec-17"/>
- </td>
(without the numbering of course. The forum added those when I clicked Insert Code. Weird...)
Questions arising:
- Where should the classes input-daterange input-group go - in the parent element (<td> in this case) or in the inputs themselves?
- Where should the properties data-date-format, data-date-start-date, data-date-end-date, data-date-min-date, data-date-max-date go - in the parent element or in the inputs themselves?
- What format should the dates be in in these properties - in the format specified in data-date-format, or in some other fixed format? If the latter, which?
- What happens if either or both of the dates data-date-start-date, data-date-end-date are not within the range data-date-min-date, data-date-max-date (as in this case)?
- This code is not doing what I want which is to set the initial date range to 23-Oct-17 to 22-Feb-18, but allow the user to change the start date to anything not before 5-Apr-16 and to set the end date to anything not before the start date and not after 31-Dec-17. What it actually does is to allow the user to set any dates within the range 23-Oct-17 to 22-Feb-18. How do I get it to do what I want?
I hope someone can help me with these questions, or tell me what else I may be doing wrong.
Many thanks - Rowan