asp.net 6 mvc 视图 模态和javascript

问：

我正在使用 asp.net 6 mvc。

在我看来，我确实有这个按钮：

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

单击它，它会打开以下模态：

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

在此模块中，用户可以选择 FromDate 和 ToDate，单击提交按钮后将创建一个新会议。

现在我确实有这个jquery用于我的日期选择器

$(".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"
});

用户可以选择会议的日期和时间。

现在我面临的问题是，在我单击“结束日期”并选择任何日期后，起始日期 flatpickr 会自动打开，所以我得到了两个字段，我可以在其中选择日期，但我只能从初始字段中进行选择。

我该如何解决这个问题，因为当我在视图页面中使用这种类型的模态时，我遇到了很多错误。

我尝试了不同的东西，我做了很多研究，但我仍然遇到同样的问题。