Datepicker
Basic Date Picker
HTMLOpenTaginput class="datepicker form-control w-56 d-block mx-auto" data-single-mode="true"HTMLCloseTag
Input Group
HTMLOpenTagdiv class="input-group w-56 mx-auto"HTMLCloseTag HTMLOpenTagdiv id="input-group-email" class="input-group-text"HTMLCloseTag HTMLOpenTagi data-feather="calendar" class="w-4 h-4"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTaginput type="text" class="datepicker form-control" data-single-mode="true"HTMLCloseTag HTMLOpenTag/divHTMLCloseTag
Date Range Picker
HTMLOpenTaginput data-daterange="true" class="datepicker form-control w-56 d-block mx-auto"HTMLCloseTag
Modal Date Picker
HTMLOpenTag!-- BEGIN: Show Modal Toggle --HTMLCloseTag HTMLOpenTagdiv class="text-center"HTMLCloseTag HTMLOpenTaga href="javascript:;" data-bs-toggle="modal" data-bs-target="#datepicker-modal-preview" class="btn btn-primary"HTMLCloseTagShow ModalHTMLOpenTag/aHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Show Modal Toggle --HTMLCloseTag HTMLOpenTag!-- BEGIN: Modal Content --HTMLCloseTag HTMLOpenTagdiv id="datepicker-modal-preview" class="modal fade" tabindex="-1" aria-hidden="true"HTMLCloseTag HTMLOpenTagdiv class="modal-dialog"HTMLCloseTag HTMLOpenTagdiv class="modal-content"HTMLCloseTag HTMLOpenTag!-- BEGIN: Modal Header --HTMLCloseTag HTMLOpenTagdiv class="modal-header"HTMLCloseTag HTMLOpenTagh2 class="fw-medium fs-base me-auto"HTMLCloseTagFilter by DateHTMLOpenTag/h2HTMLCloseTag HTMLOpenTagbutton class="btn btn-outline-secondary d-none d-sm-flex"HTMLCloseTag HTMLOpenTagi data-feather="file" class="w-4 h-4 me-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Download Docs HTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagdiv class="dropdown d-sm-none"HTMLCloseTag HTMLOpenTaga class="dropdown-toggle w-5 h-5 d-block" href="javascript:;" role="button" aria-expanded="false" data-bs-toggle="dropdown"HTMLCloseTag HTMLOpenTagi data-feather="more-horizontal" class="w-5 h-5 text-gray-600 dark-text-gray-600"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag HTMLOpenTag/aHTMLCloseTag HTMLOpenTagdiv class="dropdown-menu w-40"HTMLCloseTag HTMLOpenTagul class="dropdown-content"HTMLCloseTag HTMLOpenTagliHTMLCloseTag HTMLOpenTaga href="javascript:;" class="dropdown-item"HTMLCloseTag HTMLOpenTagi data-feather="file" class="w-4 h-4 me-2"HTMLCloseTagHTMLOpenTag/iHTMLCloseTag Download Docs HTMLOpenTag/aHTMLCloseTag HTMLOpenTag/liHTMLCloseTag HTMLOpenTag/ulHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Modal Header --HTMLCloseTag HTMLOpenTag!-- BEGIN: Modal Body --HTMLCloseTag HTMLOpenTagdiv class="modal-body grid columns-12 gap-4 gap-y-3"HTMLCloseTag HTMLOpenTagdiv class="g-col-12 g-col-sm-6"HTMLCloseTag HTMLOpenTaglabel for="modal-datepicker-1" class="form-label"HTMLCloseTagFromHTMLOpenTag/labelHTMLCloseTag HTMLOpenTaginput id="modal-datepicker-1" class="datepicker form-control" data-single-mode="true"HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTagdiv class="g-col-12 g-col-sm-6"HTMLCloseTag HTMLOpenTaglabel for="modal-datepicker-2" class="form-label"HTMLCloseTagToHTMLOpenTag/labelHTMLCloseTag HTMLOpenTaginput id="modal-datepicker-2" class="datepicker form-control" data-single-mode="true"HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Modal Body --HTMLCloseTag HTMLOpenTag!-- BEGIN: Modal Footer --HTMLCloseTag HTMLOpenTagdiv class="modal-footer text-end"HTMLCloseTag HTMLOpenTagbutton type="button" data-bs-dismiss="modal" class="btn btn-outline-secondary w-20 me-1"HTMLCloseTagCancelHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTagbutton type="button" class="btn btn-primary w-20"HTMLCloseTagSubmitHTMLOpenTag/buttonHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Modal Footer --HTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag/divHTMLCloseTag HTMLOpenTag!-- END: Modal Content --HTMLCloseTag