I am using asp.net 6 mvc.
In my view part i do have this button over here:
<div class="d-flex my-4"> <a href="#" class="btn btn-md btn-info me-2" data-bs-toggle="modal" data-bs-target="#task_modal">Generate Report</a> </div> that onClick of it it opens the folowing Modal:
<!--begin::Modal - Upgrade plan--> <div class="modal fade global-modal" id="task_modal" tabindex="-1" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered mw-650px" id="task-modal-content-container"> <!--begin::Modal content--> <div class="modal-content rounded"> <!--begin::Modal header--> <div class="modal-header pb-0 border-0 justify-content-end"> <!--begin::Close--> <div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal"> <i class="ki-duotone ki-cross fs-1"><span class="path1"></span><span class="path2"></span></i> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1" transform="rotate(-45 6 17.3137)" fill="currentColor"></rect> <rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="currentColor"></rect> </svg> </div> <!--end::Close--> </div> <!--End::Modal header--> <div class="mb-2 text-center"> <!--begin::Title--> <h1 class="mb-3">@Model.Title</h1> <!--end::Title--> <!--begin::Description--> <div class="text-muted fw-semibold fs-5"> Created By : @Model.CreatorName </div> <!--end::Description--> </div> <!--begin::Modal body--> <div class="modal-body scroll-y px-10 px-lg-15 pt-0 pb-15"> <div class="mb-13 text-center"> <!--begin::Title--> <h1 class="mb-3 meeting-title-element"></h1> <!--end::Title--> <!--begin::Description--> <div class="text-muted fw-semibold fs-5 meeting-description-element"> </div> <!--end::Description--> </div> <form novalidate data-kt-path="SaveNewMeeting" class="form flex-lg-row kt_glabal_form" enctype="multipart/form-data data-kt-load-data="true"> <input type="hidden" value="@Model.Id" name="MeetingId" /> <div class="row mb-3"> <label class="col-form-label col-lg-4 required"> <span>Next Meeting From</span> @*<i class="fas fa-exclamation-circle ms-1 fs-7" data-bs-toggle="tooltip" aria-label="Result within 12 to 48 hours" data-kt-initialized="1"></i>*@ </label> <!--begin::Col--> <div class="col-lg-8 fv-row fv-plugins-icon-container"> <input class="form-control form-control-lg form-control-solid kt_flatpickr_Time from-date-input" placeholder="Select a From Date" name="DateFrom" eltype="text"> </div> </div> <div class="row mb-3"> <label class="col-form-label col-lg-4 required"> <span>Next Meeting To</span> @*<i class="fas fa-exclamation-circle ms-1 fs-7" data-bs-toggle="tooltip" aria-label="Result within 12 to 48 hours" data-kt-initialized="1"></i>*@ </label> <!--begin::Col--> <div class="col-lg-8 fv-row fv-plugins-icon-container"> <input class="form-control form-control-lg form-control-solid kt_flatpickr_Time flatpickr-input" placeholder="Select a To Date" name="DateTo" eltype="text"> </div> </div> @* <div class="row mb-3"> <label class="col-form-label col-lg-4 required"> <span>Remark</span> </label> <!--begin::Col--> <div class="col-lg-8 fv-row fv-plugins-icon-container"> <textarea id="remarksTextArea" class="form-control mb-2" data-kt-autosize="true" eltype="text" name="RemarksDescription" placeholder="Remark" data-kt-initialized="1" style="overflow: hidden; overflow-wrap: break-word; resize: none;"></textarea> <div class="fv-plugins-message-container invalid-feedback"></div> </div> </div> *@ <div class="d-flex justify-content-end mb-2 mx-2"> <!--begin::Button--> <button type="reset" data-bs-dismiss="modal" id="kt_modal_new_target_cancel" class="btn btn-light me-3">Cancel</button> <!--end::Button--> <!--begin::Button--> <button type="submit" id="kt_ecommerce_add_category_submit" class="btn btn-primary"> <span class="indicator-label">Save</span> <span class="indicator-progress"> Please wait... <span class="spinner-border spinner-border-sm align-middle ms-2"></span> </span> </button> <!--end::Button--> </div> </form> <!--begin:Form--> <!--begin::Heading--> <!--end::Heading--> <!--begin::Actions--> @* <div class="text-center"> <button type="reset" id="kt_modal_new_target_cancel" data-bs-dismiss="modal" class="btn btn-light me-3"> Cancel </button> <button type="submit" id="kt_modal_new_target_submit" class="btn btn-primary"> <span class="indicator-label"> Save </span> <span class="indicator-progress"> Please wait... <span class="spinner-border spinner-border-sm align-middle ms-2"></span> </span> </button> </div> *@ <!--end::Actions--> <!--end:Form--> </div> <!--end::Modal body--> </div> <!--end::Modal content--> </div> </div> <!--End::Modal - Upgrade plan--> In this modul the user can pick a FromDate and ToDate and on click of the submit button a new meeting will be created.
Now i do have this jquery for my date picker
$(".kt_flatpickr_Time").flatpickr({ //onReady: function () { // this.jumpToDate("2022-01") //}, altInput: true, enableTime: true, dateFormat: "Y-m-d H:i", altFormat: "F j, Y H:i", //defaultDate: "today", minDate: "today", minTime: minTime, mode: "single" }); that the user can choose the date and the time of the meeting.
Now the problem that i am facing is that after i click on the To Date and pick any date the From Date flatpickr is opening automaticaly so i am getting two field that i can choose a date in but i can only choose from the initial one.
How can i fix that beacause i am getting a lot of errors when i using this type of Modal in my view page.
I tried different things and i did a lot of research and i am still getting the same problem.
