[英]Font awesome icon in jquery date picker
I am trying to display the fontawesome icon on "buttonText" of jquery date picker but it displays the text and not the icon.我正在尝试在 jquery 日期选择器的“buttonText”上显示 fontawesome 图标,但它显示的是文本而不是图标。 Is it correct?
这是对的吗? I am using jquery 13.
我正在使用 jquery 13。
$("#btnDate").datepicker({
showOn: "button",
buttonText: "<i class='fa fa-calendar'></i>",
onSelect: function (selected) {
}
});
You could add the icon after setting the datepicker :您可以在设置 datepicker 后添加图标:
$("#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>
Datepicker created an element: Datepicker 创建了一个元素:
<img class="ui-datepicker-trigger" />
When you define the Text, it is added to the alt
and title
attributes.当您定义文本时,它被添加到
alt
和title
属性中。 Like so:像这样:
<img class="ui-datepicker-trigger" src="images/calendar.gif" alt="Select date" title="Select date">
This is why your attempt is not working.这就是您的尝试不起作用的原因。
A click
event is assigned to this that opens the datepicker.一个
click
事件被分配给它,打开日期选择器。 Since it's an image, you can't simply assign a Font Awesome Class to it.由于它是一个图像,你不能简单地为它分配一个 Font Awesome 类。
Consider the following.考虑以下。
$(function() { $("#datepicker").datepicker({ showOn: "button", buttonImageOnly: true, buttonText: "Select date" }); var newButton = $("<span>", { class: "ui-datepicker-trigger fa fa-calendar" }).click(function() { $(this).toggleClass("closed"); if ($(this).hasClass("closed")) { $("#datepicker").datepicker("show"); } else { $("#datepicker").datepicker("hide"); } }); $("img.ui-datepicker-trigger").replaceWith(newButton); });
<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>
Using .replaceWith()
will do what you need to have done.使用
.replaceWith()
将做你需要做的事情。 It will not copy the event
, so we have to recreate it.它不会复制
event
,所以我们必须重新创建它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.