Documentation v8.2.5

Downloads Preview

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-->