jQuery datepicker配置buttonText显示Font Awesome图标仅展示文本问题

jQuery UI Datepicker 的buttonText配置项默认只接收纯文本值，组件内部会对传入内容做HTML转义，不会把内容解析为DOM节点渲染，所以你写的<i class='fa fa-calendar'></i>会被直接当普通文本输出，没法渲染成Font Awesome图标。
注：目前jQuery核心库最高正式版本为3.x系列，你提到的版本13属于笔误，大概率是jQuery UI 1.13，该版本下这个问题的逻辑没有变化。另外请先确认项目里已经正确引入Font Awesome的资源文件，否则就算DOM结构正确也显示不出图标。

组件初始化时先把buttonText设为空，初始化完成后手动给生成的触发按钮插入图标节点即可，代码如下：

$("#btnDate").datepicker({
    showOn: "button",
    buttonText: "",
    onSelect: function (selected) {
        // 原有选中后的业务逻辑保留在这里
    }
});
// 向生成的日期触发按钮中插入图标
$("#btnDate").next(".ui-datepicker-trigger").html("<i class='fa fa-calendar'></i>");

如果需要调整图标大小、间距，直接给.ui-datepicker-trigger类或者内部的i标签写对应CSS样式就行。

内容的提问来源于stack exchange，提问作者Hector