使用 DatePicker 的字型真棒圖示（xedjDateTextBox）

OpenNTF 擴充套件庫中的日期選擇器的預設圖示很不錯但不性感。你可以將其更改為酷炫的 Font Awesome Icons 之一。

首先，在頁面中新增 DatePicker 元件：

<xe:djDateTextBox id="datePickerComp" value="#{myDoc.myDateField}" />

然後將這些行新增到自定義 CSS 檔案中：

/*
   ---------------------------------------------------- 
   Improve xe:djDateTextBox Elements with another icon.
   ---------------------------------------------------- 
*/

.dijitSelect .dijitArrowButton{
    padding:0px;
}

/* hide default arrow icon: */
.dijitDateTextBox .dijitArrowButtonInner{
    display: none;
}

.dijitDateTextBox .dijitArrowButtonContainer:after{
    font: 12px/normal FontAwesome; 
    content: "\f073"; /* <--- unicode of the icon */
    font-size-adjust: none; 
    font-stretch: normal;
}
/* ---------------------------------------------------- */

屬性內容的值是圖示程式碼（在此示例中，“\f073”是簡單的“fa-calendar”圖示）。

如果你想要其他圖示，請訪問 http://fontawesome.io/icons/ ，搜尋你喜歡的圖示，單擊開啟 ist 詳細資訊，然後複製 Unicode。將 Unicode 貼上到自定義 CSS 檔案中作為屬性內容的值。