如何動態更改jquery datepicker樣式

Question

我正在努力與動態更改樣式的jquery datepicker。 我想做的是，如果單擊復選框，則datepicker僅顯示年份和月份，否則，datepicker正常顯示年份，月份和日期。

我寫了下面的腳本。 我可以看到下面的腳本被觸發了，沒有顯示任何問題，但是沒有用。

如果有人知道問題出在哪里，請幫助我。 太好了，謝謝。

=====編輯=====

根據Barmar的建議，我可以使它動態地更改dateFormat。 但是我仍然無法切換要使用$(".ui-datepicker-calendar").css({ "display": "none" }); 和$(".ui-datepicker-calendar").css({ "display": "inline-block" });

有人知道解決方案嗎？

function addEventCheckBox() {
    $("#checkBoxForFlag").live("click", function(e) {
        changeDatePicker();
    });
}

function changeDatePicker() {
    var flag = $("#checkBoxForFlag").is(":checked");

    if (flag) {
        $("#testDate").datepicker("option", {
            dateFormat: "yy/mm"
        });

        $(".ui-datepicker-calendar").css({ "display": "none" });
    } else {
        $("#testDate").datepicker("option", {
            dateFormat: 'yy/mm/dd',
        });

        $(".ui-datepicker-calendar").css({ "display": "inline-block" });
    }
}

Answer 1

.datepicker(<options>)函數只能用於初始化新的日期選擇器。 要更改現有的日期選擇器，請使用option方法。 您可以給一個對象包含要更改的選項，也可以只給一個選項作為單個參數。

function changeDatePicker() {
    var flag = $("#checkBoxForFlag").is(":checked");

    if (flag) {
        $("#testDate").datepicker("option", "dateFormat", "yy/mm");
        $(".ui-datepicker-calendar").hide();
    } else {
        $("#testDate").datepicker("option", "dateFormat", "yy/mm/dd");
        $(".ui-datepicker-calendar").show();
    }
}

Answer 2

經過一些實驗性嘗試，我解決了這個問題。 因此，我在這里為可能有相同問題的人編寫解決方案。

function changeDatePicker() {
  var flag = $("#checkBoxForFlag").is(":checked");

  if (flag) {
    $("#testDate").datepicker("destroy");
    $("#testDate").datepicker({
      showOn: "both",
      buttonImageOnly: false,
      dateFormat: "yy/mm",
      changeMonth: true,
      changeYear: true,
      maxDate: 0,
      buttonText: "",
      onClose: function () {
        var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
        var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
        $(this).datepicker('setDate', new Date(year, month, 1));
      }
    });
  $("#testDate").focus(function () {
    $(".ui-datepicker-calendar").hide();
    $("#ui-datepicker-div").position({
        my: "center top",
        at: "center bottom",
        of: $(this)
    });
  });
  $("#testDate").blur(function () {
    $(".ui-datepicker-calendar").hide();
  });
  } else {
    $("#testDate").datepicker("destroy");
    $("#testDate").datepicker({
      showOn: "both",
      buttonImageOnly: false,
      dateFormat: userDateFormat_datepicker,
      changeMonth: true,
      changeYear: true,
      showButtonPanel: true,
      maxDate: 0,
      buttonText: ""
    });
    $("#testDate").focus(function () {
      $(".ui-datepicker-calendar").show();
    });
    $("#testDate").blur(function () {
      $(".ui-datepicker-calendar").show();
    });
  }
}