Question

我需要启用并设置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>

Answer 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初始化为这些元素。我添加了一些检查并在完成后删除了所有内容。

希望有帮助。

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

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

2 个答案: