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.
Datepicker
<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>
Daterange picker
<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.
HTML
<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>
Recent Notification