在对话框中,我想打开日期选择器,但它不需要打开。预先感谢

问题描述 投票:0回答:1
jQuery("#ttbl_lead_mst_ds_list").jqGrid("navButtonAdd","#tbl_lead_mst_pager",{caption:"Follow Up",
onClickButton:function(){
jQuery(".date").datepicker({dateFormat:"dd.mm.yy",changeMonth: true,changeYear: true});
$("#tbl_lead_mstdialog-confirmFollowup").html('Next Follow Up Date : <input placeholder="Next Follow Up Date" title="Please Enter Next Follow Up Date Here" type="text" name="next_follow_up_date" id="ttbl_admin_lead_mst_ds_form_next_follow_up_date" class="date form-control"/>
}
});

日期选择器未打开,请帮助我

javascript php html jquery jqgrid
1个回答
0
投票

您的代码中可能存在一些问题。这是更正后的版本:

jQuery("#ttbl_lead_mst_ds_list").jqGrid("navButtonAdd", "#tbl_lead_mst_pager", {
  caption: "Follow Up",
  onClickButton: function () {
    // Create datepicker on the fly
    jQuery(".date").datepicker({
      dateFormat: "dd.mm.yy",
      changeMonth: true,
      changeYear: true,
    });

    // Create a dialog with an input field
    $("#tbl_lead_mstdialog-confirmFollowup").html(
      'Next Follow Up Date : <input placeholder="Next Follow Up Date" title="Please Enter Next Follow Up Date Here" type="text" name="next_follow_up_date" id="ttbl_admin_lead_mst_ds_form_next_follow_up_date" class="date form-control"/>'
    );

    // Open the dialog
    $("#tbl_lead_mstdialog-confirmFollowup").dialog({
      modal: true,
      buttons: {
        OK: function () {
          // Handle the OK button click
          // You can access the selected date using:
          const selectedDate = $("#ttbl_admin_lead_mst_ds_form_next_follow_up_date").datepicker("getDate");
          console.log(selectedDate);
          
          // Close the dialog
          $(this).dialog("close");
        },
        Cancel: function () {
          // Handle the Cancel button click
          $(this).dialog("close");
        },
      },
    });
  },
});

所做的更改:

  1. 我在日期选择器的末尾添加了缺少的括号 初始化。
  2. 我使用dialog方法创建了一个对话框。
  3. 我在对话框中添加了“确定”和“取消”按钮。可以访问日期 单击“确定”按钮时。

确保项目中包含必要的依赖项(jQuery UI 和 jQuery UI CSS),以便日期选择器和对话框正常工作。如果您还没有包含它们,您可以从 jQuery UI 网站下载它们并将它们包含在您的项目中。

要进行更深入的学习并了解最新的技术堆栈,请考虑JavaScript WeeklyWeb Development Weekly

© www.soinside.com 2019 - 2024. All rights reserved.