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>
© 2022 Nioboard. Template by Softnio
Recent Notification