Date and Time Picker
Custom datepicker with 'vanillajs-datepicker. and time picker from nioapp custom script
Example
to
Use
data-range="init"
attribute to .js-datepicker
to enable range date picker. Use
data-start-view="1"
attribute to input
to enable month view, data-start-view="2"
attribute to input
to enable Year view. <div class="form-group"> <label for="datePicker1" class="form-label">Datepicker</label> <div class="form-control-wrap"> <input placeholder="dd/mm/yyyy" type="text" class="form-control js-datepicker" data-title="Text" data-today-btn="true" data-clear-btn="true" autocomplete="off" id="datePicker1"> </div></div>
<div class="form-group"> <label class="form-label">Daterange Picker</label> <div class="input-group js-datepicker" data-range="init" > <input placeholder="dd/mm/yyyy" type="text" class="form-control" name="start"> <span class="input-group-text">to</span> <input placeholder="dd/mm/yyyy" type="text" class="form-control" name="end"> </div></div>
Example
Use
data-format="24"
attribute to input
to enable 24hour time formate. <div class="form-group"> <label for="timePicker1" class="form-label">Time Picker</label> <div class="form-control-wrap"> <input placeholder="hh:mm" type="text" class="form-control js-timepicker" autocomplete="off" id="timePicker1"> </div></div>