Date and time pickers

Overview

Current limitations with date and time pickers across browsers mean that currently, we will not be using the input types of date, datetime and time. Use input types of text, with the functionality extended as below:

Example
  • class="date is-jqui"
    class="time is-jqui"
    class="datetime is-jqui"
  • class="date no-weekends is-jqui"
    class="date min-max is-jqui dynamic-field" data-datepicker-min="16/12/2019" //Other settings can be sent in e.g. -1M data-datepicker-max="23/12/2019" //Other settings can be sent in e.g. +1M data-date-min="16/12/2019" data-date-max="23/12/2019"
WCMS use
MVC.net use
Code
  1. <label for="datepick">Date</label>
  2. <input type="text" name="datepick" id="datepick" class="date is-jqui" placeholder="dd/mm/yyyy"/>
  3.  
  4. <label for="timepick">Time</label>
  5. <input type="text" name="timepick" id="timepick" class="time is-jqui" placeholder="hh:mm"/>
  6.  
  7. <label for="datetimepick">Datetime</label>
  8. <input type="text" name="datetimepick" id="datetimepick" class="datetimepick is-jqui" placeholder="dd/mm/yyyy hh:mm"/>
  9.  
  10. <label for="datepicknoweekends">Date - no weekends, future only</label>
  11. <input type="text" name="datepicknoweekends" id="datepicknoweekends" class="date no-weekends is-jqui" placeholder="dd/mm/yyyy"/>
  12.  
  13. <label for="datepickminmax">Date pick with min and max</label>
  14. <input type="text" name="datepickminmax" id="datepickminmax" class="date min-max is-jqui dynamic-field" placeholder="dd/mm/yyyy" data-date-min="16/12/2019" data-date-max="23/12/2019" data-datepicker-min="16/12/2019" data-datepicker-max="23/12/2019"/>
Version and status
  • 1
  • current version
  • Concept
  • Alpha
  • Beta
  • Release