Включение и настройка формата даты Jquery UI Datepicker

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 для этих элементов.Я добавил несколько проверок и удалил все, что было сделано.

Надеюсь, это поможет.

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>