使用 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 文件中作为属性内容的值。