PrimeFaces p:calendar 元件套用 bootstrap form-control 樣式

技術問題

PrimeFaces 的 p:calendar 套用 bootstrap 的 .form-control 是無法正確顯示。p:calendar 的輸入外框會超出元件邊界外框，如下圖所示:

分析與解決

p:calendar 被 render 的結果會產生:

<span>

<input type="text" />

</span>

如果對 p:calendar 套用 .form-control，其結果會如下所示，.form-control 被套用在 <span> 上，而不是 <span> 內的 <input>。

另外，<input> 的寬度不會自動響應，為固定寬度。

解決方式

1. 使用 jQuery 於 Document Ready 時套用 .form-control 到 <span> 內的 <input> 內。

$(function(){

    $('.ui-calendar > input').addClass('form-control');

});

2. 修改 .ui-inputfield 的 width 屬性為 100%.

成果

程式碼

參考資料

[1] Primefaces style is applied on <span> instead of <input>

, https://stackoverflow.com/questions/16299635/primefaces-style-is-applied-on-span-instead-of-input