如何動態更改jquery日期選擇器樣式

我正在努力與動態更改樣式的jQuery日期選擇器。我想要做的是，如果複選框被點擊，然後datepicker只顯示年份和月份，如果沒有，datepicker作爲正常的年份，月份和日期。如何動態更改jquery日期選擇器樣式

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

如果有人知道問題是什麼，請幫助我。那太好了，謝謝。

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

隨着Barmar的建議，我可以做這方面的工作動態更改日期格式。但我仍然不能切換顯示日期選擇器的日曆部分，我試圖用$(".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" }); 
    } 
}

來源

2015-10-15 user3110409

你有HTML或JSFiddle嗎？ – mwilson

你使用的是什麼版本的jQuery？ '.live（）'在1.7中被棄用，在1.9中被刪除？ – Barmar

您好@Barmar，在我提交我的答案之前，我沒有真正看到您的評論 - 沒有試圖挖角，我們只是在同一時間得出同樣的結論 - –

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

來源

2015-10-15 00:35:23 Barmar

這是正確的答案; upvoting這一個，並刪除我的答案 - –

謝謝，巴爾馬。有用！！！但是，'$（「。ui-datepicker-calendar」）。hide（）;'不起作用，你有什麼想法嗎？ – user3110409

當你在你的問題中使用'.css（）'時，它是否工作？ '.hide（）'應該和'.css（「display」，「none」）相同' – Barmar

經過一些實驗嘗試後，我解決了這個問題。所以我在這裏爲可能有同樣問題的人編寫解決方案。

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

來源

2015-10-16 05:14:40 user3110409

如何動態更改jquery日期選擇器樣式

回答

相關問題