How to change jquery datepicker style dynamically

Question

I'm struggling with a jquery datepicker which changes style dynamically. What I want to do is, if checkbox is clicked then datepicker shows only year and month, if not, datepicker works as normal with year, month and date.

I wrote below script. I could see below script was triggered and didn't show any problem, but it didn't work.

If anyone knows what the problem is, please help me. That would be great, thank you.

===== edit =====

With Barmar's advice, I could make this working to change dateFormat dynamically. But I still can't toggle displaying calendar part of datepicker which I'm trying with $(".ui-datepicker-calendar").css({ "display": "none" }); and $(".ui-datepicker-calendar").css({ "display": "inline-block" });

Does anybody know the solution for this?

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

The .datepicker(<options>) function can only be used to initialize a new datepicker. To change an existing datepicker, use the option method. You can give either an object containing the options you're changing, or just one option as a single argument.

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

After some experimental tries, I solved this issue. So I'm writing the solution here for someone who might have same problem.

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