Select2
Use Select2 controls inside KTMenu dropdown:
<!--begin::Menu wrapper-->
<div class="m-0">
<!--begin::Menu toggle-->
<button type="button" class="btn btn-primary rotate" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-start" data-kt-menu-offset="0,5">
Click to open menu
<i class="ki-duotone ki-down fs-3 rotate-180 ms-3 me-0"></i>
</button>
<!--end::Menu toggle-->
<!--begin::Menu dropdown-->
<div class="menu menu-sub menu-sub-dropdown w-250px w-md-300px" data-kt-menu="true" id="kt_menu_select2">
<!--begin::Header-->
<div class="px-7 py-5">
<div class="fs-5 text-gray-900 fw-bold">Filter Options</div>
</div>
<!--end::Header-->
<!--begin::Menu separator-->
<div class="separator border-gray-200"></div>
<!--end::Menu separator-->
<!--begin::Form-->
<div class="px-7 py-5">
<!--begin::Input group-->
<div class="mb-10">
<!--begin::Label-->
<label class="form-label fw-semibold">Status:</label>
<!--end::Label-->
<!--begin::Input-->
<div>
<select class="form-select form-select-solid" multiple data-kt-select2="true" multiple data-close-on-select="false" data-placeholder="Select option" data-dropdown-parent="#kt_menu_select2" data-allow-clear="true">
<option></option>
<option value="1">Approved</option>
<option value="2">Pending</option>
<option value="2">In Process</option>
<option value="2">Rejected</option>
</select>
</div>
<!--end::Input-->
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="mb-10">
<!--begin::Label-->
<label class="form-label fw-semibold">Member Type:</label>
<!--end::Label-->
<!--begin::Options-->
<div class="d-flex">
<!--begin::Options-->
<label class="form-check form-check-sm form-check-custom form-check-solid me-5">
<input class="form-check-input" type="checkbox" value="1"/>
<span class="form-check-label">
Author
</span>
</label>
<!--end::Options-->
<!--begin::Options-->
<label class="form-check form-check-sm form-check-custom form-check-solid">
<input class="form-check-input" type="checkbox" value="2" checked="checked"/>
<span class="form-check-label">
Customer
</span>
</label>
<!--end::Options-->
</div>
<!--end::Options-->
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="mb-10">
<!--begin::Label-->
<label class="form-label fw-semibold">Notifications:</label>
<!--end::Label-->
<!--begin::Switch-->
<div class="form-check form-switch form-switch-sm form-check-custom form-check-solid">
<input class="form-check-input" type="checkbox" value="" name="notifications" checked />
<label class="form-check-label">
Enabled
</label>
</div>
<!--end::Switch-->
</div>
<!--end::Input group-->
<!--begin::Actions-->
<div class="d-flex justify-content-end">
<button type="reset" class="btn btn-sm btn-light btn-active-light-primary me-2" data-kt-menu-dismiss="true">Reset</button>
<button type="submit" class="btn btn-sm btn-primary" data-kt-menu-dismiss="true">Apply</button>
</div>
<!--end::Actions-->
</div>
<!--end::Form-->
</div>
<!--end::Menu dropdown-->
</div>
<!--end::Menu wrapper-->
Tempus Dominus Datepicker
Use Tempus Dominus Datepicker controls inside KTMenu dropdown:
const picker = new tempusDominus.TempusDominus(document.getElementById("kt_td_picker_basic"), {
//put your config here
});
const menuEl = document.querySelector("#kt_menu_tempus_dominus_datepicker");
if (menuEl) {
var menu = KTMenu.getInstance(menuEl);
if (menu) {
menu.on("kt.menu.dropdown.hide", function(item) {
if (picker.display.isVisible === true) {
return false; // prevent hide
}
});
}
}
<!--begin::Menu wrapper-->
<div class="m-0">
<!--begin::Menu toggle-->
<button type="button" class="btn btn-primary rotate" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-start" data-kt-menu-offset="0,5">
Click to open menu
<i class="ki-duotone ki-down fs-3 rotate-180 ms-3 me-0"></i>
</button>
<!--end::Menu toggle-->
<!--begin::Menu dropdown-->
<div class="menu menu-sub menu-sub-dropdown w-250px w-md-300px" data-kt-menu="true" id="kt_menu_select2">
<!--begin::Header-->
<div class="px-7 py-5">
<div class="fs-5 text-gray-900 fw-bold">Filter Options</div>
</div>
<!--end::Header-->
<!--begin::Menu separator-->
<div class="separator border-gray-200"></div>
<!--end::Menu separator-->
<!--begin::Form-->
<div class="px-7 py-5">
<!--begin::Input group-->
<div class="mb-10">
<!--begin::Label-->
<label class="form-label fw-semibold">Date:</label>
<!--end::Label-->
<div class="input-group" id="kt_td_picker_basic" data-td-target-input="nearest" data-td-target-toggle="nearest">
<input id="kt_td_picker_basic_input" type="text" class="form-control" data-td-target="#kt_td_picker_basic"/>
<span class="input-group-text" data-td-target="#kt_td_picker_basic" data-td-toggle="datetimepicker">
<?php echo Theme::getIcon("calendar", "fs-2")?>
</span>
</div>
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="mb-10">
<!--begin::Label-->
<label class="form-label fw-semibold">Member Type:</label>
<!--end::Label-->
<!--begin::Options-->
<div class="d-flex">
<!--begin::Options-->
<label class="form-check form-check-sm form-check-custom form-check-solid me-5">
<input class="form-check-input" type="checkbox" value="1"/>
<span class="form-check-label">
Author
</span>
</label>
<!--end::Options-->
<!--begin::Options-->
<label class="form-check form-check-sm form-check-custom form-check-solid">
<input class="form-check-input" type="checkbox" value="2" checked="checked"/>
<span class="form-check-label">
Customer
</span>
</label>
<!--end::Options-->
</div>
<!--end::Options-->
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="mb-10">
<!--begin::Label-->
<label class="form-label fw-semibold">Notifications:</label>
<!--end::Label-->
<!--begin::Switch-->
<div class="form-check form-switch form-switch-sm form-check-custom form-check-solid">
<input class="form-check-input" type="checkbox" value="" name="notifications" checked />
<label class="form-check-label">
Enabled
</label>
</div>
<!--end::Switch-->
</div>
<!--end::Input group-->
<!--begin::Actions-->
<div class="d-flex justify-content-end">
<button type="reset" class="btn btn-sm btn-light btn-active-light-primary me-2" data-kt-menu-dismiss="true">Reset</button>
<button type="submit" class="btn btn-sm btn-primary" data-kt-menu-dismiss="true">Apply</button>
</div>
<!--end::Actions-->
</div>
<!--end::Form-->
</div>
<!--end::Menu dropdown-->
</div>
<!--end::Menu wrapper-->
2024©
Keenthemes
