jquery日期选择器中的字体真棒图标

mkh04yzy  于 2022-11-03  发布在  jQuery
关注(0)|答案(3)|浏览(170)

我试图在jquery日期选择器的“buttonText”上显示fontawesome图标,但是它显示的是文本而不是图标。这是正确的吗?我使用的是jquery 13。

$("#btnDate").datepicker({
            showOn: "button",
            buttonText: "<i class='fa fa-calendar'></i>",
            onSelect: function (selected) {
            }
        });
bzzcjhmw

bzzcjhmw1#

您可以在设置日期选择器后添加图标:
第一个

kq0g1dla

kq0g1dla2#

日期选择器创建了一个元素:

<img class="ui-datepicker-trigger" />

当你定义文本时,它被添加到alttitle属性中。如下所示:

<img class="ui-datepicker-trigger" src="images/calendar.gif" alt="Select date" title="Select date">

这就是为什么你的尝试不起作用。
一个click事件被分配给这个打开日期选择器的对象,因为它是一个图像,你不能简单地给它分配一个Font Awesome类。
请考虑以下内容。
第一个
使用.replaceWith()将完成您需要完成的工作。它不会复制event,因此我们必须重新创建它。

qlckcl4x

qlckcl4x3#

在jQuery UI 1.13.x的Datepicker buttonText设置中,在i标记中使用Font Awesome图像似乎存在不兼容性。它在1.12.1版本中工作正常。我在jQuery 3.5.1中使用它。
下面是我的代码:

$(".datepicker1").datepicker
({
    changeMonth: true,
    changeYear: true,
    dateFormat: "m/d/yy",
    showOn: "button",
    buttonText: "<i class='fa fa-calendar'></i>"
});

这是它在1.12.1版中的外观:
Datepicker 1.12.1
以下是升级到1.13.2时相同代码的外观:
Datepicker 1.13.2
因此,一个可能的解决方案是降级到jQuery UI 1.12.1,因为它仍然可以在jquery-ui站点上获得,直到有一个更新的版本,这将不再是一个问题。下载站点说它可以与jQuery 1.7+一起工作,所以你应该不需要调整你的jQuery版本。
顺便说一句,Tom的答案对我使用jQuery UI 1.13.2确实有效。当我下载jQuery UI的副本时,我使用了Download Builder站点,并包括了jQuery 1.8+支持选项。

相关问题