LitePicker date picker js - 在日期的当前锚点中添加一个额外的div。

Posted 2023-01-24

我目前正在做一个小项目，我被要求为一个日期选择器做一些特殊的样式设计--这个日期选择器库使用LitePicker.js。唯一的问题是，要做到这一点，我需要在当前的锚中增加一个包含日期的div。

目前的html看起来是这样的，但我需要它看起来像这样。

<a href="#" class="day-item is-start-date" data-time="1591830000000">11</a>

但我需要它看起来像这样。

<a href="#" class="day-item is-start-date" data-time="1591830000000"><span class="date">11</span></a>

在文档中，没有任何关于如何通过api来实现的例子。

https:/wakirin.github.ioLitepicker。

我是否可以在同一个作用域内使用this方法来附加一个span标签来做这件事？

下面是在CodePen中的基本设置。

https:/codepen.ionolimit966penZEQEawv。

任何帮助将是非常感激的。

谢谢你的帮助

答案

下面的代码将用span标签包裹每个选定元素的文本。

for (let a of document.querySelectorAll("div.container__days a")) 
    a.innerHTML = "<span>" + a.innerText + "</span>"

我选择的选择器("div.container__days a")是一个工作在 https:/wakirin.github.ioLitepicker。 但你可以根据自己的需要来改变它。

我们的想法很简单，就是将HTML中包含的 a 标签来增加一个跨度。

Codepen.ioUtopsiapenBajarVo。https:/codepen.ioUtopsiapenBajarVo。

注意：我使用了一个按钮来说明DOM在你点击它之前有时间加载，但你也可以使用setTimeout。这个想法是给DOM以时间来更新Litepicker创建的元素。