Question

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

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

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悬停任何这些日期时设置工具提示，并为每个日期添加一个css类my-highlight-style。

示例 - 突出显示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"]

请注意，日期必须与相同格式与datetimepicker选项相同：
  format: 'Y/m/d',
  formatDate: 'Y/m/d'

迟到的答案，但希望它仍然有用！

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

1 个答案: