Question

我试图将所选日期附加到jQuery日期选择器的banner-section。但是，当我在日期选择器onSelect上有（如下所示）以下内容时，我看不到任何更改。

$(".ui-datepicker-month").append('foo');

...但是，当我在控制台中运行此行时，它可以正常工作。有人能帮助我理解为什么吗？

http://jsfiddle.net/edwardsharp/3b4g0s0v/

Answer 1

这可能是很多工作，但它解决了这个问题。

这是小提琴：http://jsfiddle.net/3b4g0s0v/8/

我基本上使用

将数据属性添加到日期选择器

$（“＃datepicker”）。attr（'data-date'，（d.getDate（）+1））;

然后你需要创建31个css代码，如下所示：

#datepicker[data-date="6"] .ui-datepicker-month:after { content: " 6," }

小提琴提供6,7和8作为样本。希望这会有所帮助，我也希望您找到一个简单的解决方案。

注意：就个人而言，当我需要使用具有许多自定义功能的组件时，我更喜欢从头开始创建自己的组件。整体而言，这项工作较少。我曾经做过一次像数据贴纸一样......它并不那么难，并提供了大量额外的用户友好功能。

这是一个用于生成css的简短ruby循环：

(1..31).each do |i|
    p "#datepicker[data-date='#{i}'] .ui-datepicker-month:after { content: ' #{i},' }"
end

Answer 2

为什么不在每个日期选择器后直接附加您自己的div，然后使用该元素来保存您的内容，而不是将您的内容插入到datepicker元素本身？使用insertAfter添加元素，然后使用next（）来访问它。类似的东西：

$("<div></div>").insertAfter(".ui-datepicker-month");

$("ui-datepicker-month").datepicker({
    onSelect: function(dateText, inst) {
        $(this).next().html(dateText);
    }
});

Answer 3

使用setTimeout和moment.js重写ui-datepicker-month的整个html似乎是最好的方法。

http://jsfiddle.net/edwardsharp/3b4g0s0v/9/

jQuery datepicker onSelect调用.append（）不起作用

3 个答案: