Question

我正在使用Woocommerce Bookings插件，该插件将jQuery datepicker日历添加到页面。我想在生成的表格单元格中添加一个span元素，以便可以通过CSS显示有关悬停的信息。

我开始侦听日历中的更改事件，并在通过jQuery生成表之后添加span元素，但是我更喜欢使用datepicker函数并在生成表时添加span。

有没有办法挂钩到datepicker函数来完成此任务？ TIA。

Answer 1

我相信没有这样的钩子。你必须自己做。您可以在/woocommerce-bookings/templates/booking-form/datetime-picker.php

找到日期时间选择器模板。

您可以在其中添加跨度或任何想要的内容。

Developers Docs for Woocommerce booking

Template Listing with info

Action and filter reference

Answer 2

这并不是我提出的问题的真正答案，但我决定采用另一种方法来达到相同的结果。我只是使用CSS伪选择器来添加出现在可预订日期悬停时的框，如下所示：

td.bookable a {
position:relative;
background-color:#b03d37!important;
background-image:none!important;
border-color:rgba(0,0,0,.1)!important;
color:#fff!important;
text-shadow:0 1px 0 rgba(0,0,0,.1);
}

td.bookable a::before {
content:'this is a hover description';
position:absolute;
z-index:10;
background:#000;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:150px;
height:100px;
opacity:0;
visibility:hidden;
transition:opacity 0.2s ease-in-out;
}

td.bookable a:hover::before {
opacity:1;
visibility:visible
}

...同样不是我所要回答的问题，而是仍然是一种解决方案（尽管数量有限），适用于我的用例。

将span元素添加到Jquery datepicker表单元格

2 个答案: