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

【问题标题】：Font awesome icon in jquery date pickerjquery日期选择器中的字体真棒图标
【发布时间】：2022-07-11 23:14:53
【问题描述】：

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

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

【问题讨论】：

欢迎来到 Stack Overflow。请提供一个最小的、可重复的示例：stackoverflow.com/help/minimal-reproducible-example 您可能还想查看：jqueryui.com/datepicker/#icon-trigger
@Twisty：我给了我正在尝试的 jquery 代码。我正在按照此链接使用按钮文本 (stackoverflow.com/questions/24019359/…)
您有责任在您的问题中创建一个 sn-p 来证明您的问题。实际上，您已经从有效的现有问题（没有信用/参考）中复制了代码。如果它对您不起作用，那么您错过/没有完成/以不同方式完成的其他部分 - 这就是我们需要看到的部分。完整 sn-p - 包括所有<script src= 和<link href= 以显示问题。

标签： jquery font-awesome jquery-ui-datepicker

【解决方案1】：

您可以在设置日期选择器后添加图标：

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

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js" integrity="sha256-eTyxS0rkjpLEo16uXTS0uVCS4815lc40K2iVpWDvdSY=" crossorigin="anonymous"></script>
<p>Date: <input type="text" id="btnDate"></p>

【讨论】：

【解决方案2】：

Datepicker 创建了一个元素：

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

一个click 事件被分配给这个打开日期选择器。因为它是一张图片，你不能简单地给它分配一个 Font Awesome 类。

考虑以下内容。

$(function() {
  $("#datepicker").datepicker({
    showOn: "button",
    buttonImageOnly: true,
    buttonText: "Select date"
  });

  $("img.ui-datepicker-trigger").replaceWith($("<span>", {
    class: "ui-datepicker-trigger fa fa-calendar"
  }));
  $("span.ui-datepicker-trigger").click(function() {
    $("#datepicker").datepicker("show");
  });
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>

<p>Date: <input type="text" id="datepicker"></p>

使用.replaceWith() 将完成您需要完成的工作。它不会复制event，所以我们必须重新创建它。

【讨论】：