启用和设置 Jquery UI Datepicker 的日期格式答案

【问题标题】：Both enabling and setting date format of Jquery UI Datepicker启用和设置 Jquery UI Datepicker 的日期格式
【发布时间】：2018-10-18 15:02:22
【问题描述】：

我需要启用和设置 Jquery UI Datepicker 的日期格式，如下例所示。我尝试了不同的排列，但它们不起作用。我也在网上查看过，但似乎我只能使用其中一种。如果可以，请告诉我

$("#frm-renew-btn").on("click", function() {
    $('#renewDate').datepicker({
        disabled: true
    });
    $('#renew-dlg').dialog({
        closeOnEscape: false,
        modal: true,
        draggable: false,
        resizable: false,
        hide: {
            effect: 'fade',
            duration: 100
        },
        stack: true,
        zIndex: 10000,
        fluid: true,
        dialogClass: 'ui-dialog-osx',
        open: function(event, ui) {
            $('#renewDate').datepicker({
                dateFormat: "dd MM yy",
                title: 'Test Dialog',
                minDate: 0,
                maxDate: 365
            }).val();
            $('#renewDate').datepicker('enable')
        },
        close: function(event, ui) {
            $('#renewDate').datepicker('disable');
        },
        buttons: [{
            id: "btn-ok-dlg",
            text: "OK",
            click: function() {
                confirm_renewal();
                $(this).dialog('destroy');
            }
        }, {
            id: "btn-close-dlg",
            text: "Cancel",
            click: function() {
                $(this).dialog('destroy');
                $('#renew-dlg').empty();
            }
        }],
    });
});

<div id="renew-dlg" title="Renew your Application">Enter new End Date: <input type="text" id="renewDate" /></div>

【问题讨论】：

您的代码似乎单独运行良好：jsfiddle.net/0fovje6h。我建议检查控制台是否存在您的版本中的错误。另请注意，在 JS 中使用 , 作为语句分隔符是一个非常糟糕的主意。我强烈建议您始终使用;。
感谢一百万罗里。它不适用于我如何使用它。我将包括我的完整代码来澄清。
@DVB 如果这是您的完整代码，那么您没有正确初始化日期选择器。考虑在任何事件之前对其进行初始化。然后在事件回调期间启用或禁用。
感谢 Twisty！关于初始化的要点。我现在已经这样做了，并将我的代码放在下面，以防其他人有这个问题。我可能是一名中级开发人员，所以我还在学习！

标签： jquery jquery-ui datepicker

【解决方案1】：

扩展我的评论，您将希望使用autoOpen: false 之类的选项创建对话框和日期选择器，或者即时创建它们。看起来您打算动态创建它们，所以我提供以下示例。

$(function() {
  function confirm_renewal(date) {
    var result = confirm("Please confirm that you wish to renew your application for " + date);
  }

  function enableDialog(event) {
    var $dlg = $("<div>", {
      id: "renew-dlg",
      title: "Renew Your Application"
    });

    var $dp = $("<input>", {
      id: "renewDate",
      type: "text",
      class: "ui-state-default"
    }).appendTo($dlg);

    $dp.datepicker({
      dateFormat: "dd MM yy",
      title: 'Test Dialog',
      minDate: 0,
      maxDate: 365,
      disabled: true
    });

    $dlg.dialog({
      closeOnEscape: false,
      modal: true,
      draggable: false,
      resizable: false,
      hide: {
        effect: 'fade',
        duration: 100
      },
      stack: true,
      zIndex: 10000,
      fluid: true,
      dialogClass: 'ui-dialog-osx',
      open: function(event, ui) {
        $dp.datepicker('enable');
      },
      close: function(event, ui) {
        $dp.datepicker('disable');
      },
      buttons: [{
          id: "btn-ok-dlg",
          text: "OK",
          click: function() {
            if ($dp.val() == "") {
              $dp.addClass("ui-state-highlight");
              return false;
            }
            $(this).dialog('destroy');
            $dp.datepicker('destroy');
            confirm_renewal($dp.val());
            $dp.remove();
            $dlg.remove();
          }
        },
        {
          id: "btn-close-dlg",
          text: "Cancel",
          click: function() {
            $(this).dialog('destroy');
            $dp.datepicker('destroy');
            $dp.remove();
            $dlg.remove();
          }
        }
      ],
    });
  }
  $("#frm-renew-btn").on("click", enableDialog);
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<button id="frm-renew-btn">Renew</button>

将它包装在一个函数中允许您将其作为回调执行。您将看到我创建了 HTML 元素，然后将 jQuery UI 初始化为这些元素。我添加了一些检查并在完成后删除所有内容。

希望对您有所帮助。

【讨论】：

再次感谢 Twisty
@DVB 很高兴为您提供帮助。不客气。如果有帮助，请随时点赞并将其标记为答案。

【解决方案2】：

这是我通过上述回复改编的最终代码。它现在运行良好。

$("#frm-renew-btn").on("click", function () {
    $('#renewDate').datepicker({
        dateFormat: "dd MM yy",
        title: 'Test Dialog',
        minDate: 0,
        maxDate: 365,
        disabled: true
    }).val();
    $('#renew-dlg').dialog({
        closeOnEscape: false,
        modal: true,
        draggable: false,
        resizable: false,
        hide: {
            effect: 'fade',
            duration: 100
        },
        stack: true,
        zIndex: 10000,
        fluid: true,
        dialogClass: 'ui-dialog-osx',
        open: function (event, ui) {
            $('#renewDate').datepicker('enable');
        },
        close: function (event, ui) {
            $('#renewDate').datepicker('disable');
        },
        buttons: [{
                id: "btn-ok-dlg",
                text: "OK",
                click: function () {
                    $(this).dialog('destroy');
                    $('#renewDate').datepicker('destroy');
                    confirm_renewal();
                }
            },
            {
                id: "btn-close-dlg",
                text: "Cancel",
                click: function () {
                    $(this).dialog('destroy');
                    $('#renewDate').datepicker('destroy');
                }
            }
        ],
    });
});

<div id="renew-dlg" title="Renew your Application">Enter new End Date: <input type="text" id="renewDate" /></div>

【讨论】：