在 xdsoft datetimepicker 中突出显示日期/范围

Question

我正在使用xdsoft datetimepicker。github 上的自述文件显示，包括突出显示时间段的功能：

所以我在文档中搜索了它，但找不到如何执行此操作的信息。

Answer 1

插件文档确实缺乏更新。但是，查看源代码，您似乎可以使用两个选项来突出显示两个日期或特定日期之间的时间段。这些选项可以在调用脚本时或通过 setOptions 方法设置，示例如下：

jQuery('#elem').datetimepicker({
    ...,
    highlightedPeriods: [
        "dateStartP1, dateEndP1, 'Description P1', css-class-p1",
        "dateStartP2, dateEndP2, 'Description P2', css-class-p2"
    ],
    ...
    highlightedDates: [
        "date1, 'Description D1', css-class-d1",
        "date2, 'Description D2', css-class-d2",
    ],
    ...
    onShow: function(date, inst) {
        this.setOptions({
            highlightedDates: ["date3, 'Description D3', css-class-d3"]
        })
    }
    ...
});

highlightPeriods是由逗号分隔的4个参数组成的字符串数组：
“开始日期，结束日期，描述，CSS类”

highlightDates是由逗号分隔的3个参数组成的字符串数组：
“日期，描述，CSS类”

最后两个参数是可选的，如果您不指定它们，则不会添加工具提示并设置默认类xdsoft_highlighted_default。

示例 - 突出显示 4 月 10 日和 4 月 20 日之间的日期：

highlightedPeriods: ["2017/04/10, 2017/04/20, 'My description', my-highlight-style"]

这将突出显示 4 月 10 日和 4 月 20 日之间的每个日期，在将这些日期中的任何一个与文本悬停时设置工具提示，My description并my-highlight-style为每个日期添加一个 css 类。

示例 - 突出显示 4 月 1 日：

highlightedDates: ["2017/04/01, 'April Fools', my-highlight-style"]

这将突出显示 4 月 1 日，在将这些日期中的任何一个与文本悬停时设置工具提示并向其April Fools添加 css 类my-highlight-style。

然后，您可以使用您指定的 css 类
（此处 : my-highlight-style）根据需要设置突出显示日期的样式。

另外，如果您需要动态检索日期，您可以使用 jQuery ：
highlightedDates: [jQuery("#myInput").val() + ", 'User entered date', my-highlight-style"]

请注意，日期必须与您的日期时间选择器选项的格式相同：
format: 'Y/m/d',
formatDate: 'Y/m/d'

迟到的答案，但希望它仍然会有所帮助！