Question

我正在努力使用一个动态更改样式的jquery datepicker。我想要做的是，如果单击复选框，则datepicker仅显示年份和月份，否则，datepicker将正常工作，包括年，月和日。

我在下面写了一些脚本。我可以看到下面的脚本被触发并没有显示任何问题，但它没有用。

如果有人知道问题所在，请帮助我。那会很棒，谢谢。

===== edit =====

根据Barmar的建议，我可以通过动态更改dateFormat。但我仍然无法切换显示我正在尝试使用$(".ui-datepicker-calendar").css({ "display": "none" });和$(".ui-datepicker-calendar").css({ "display": "inline-block" });

的datepicker的日历部分

有人知道解决方案吗？

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();
    });
  }
}

如何动态更改jquery datepicker样式

2 个答案: