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

时间:2017-01-12 07:40:48

标签: javascript jquery datetimepicker

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

enter image description here

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

1 个答案:

答案 0 :(得分:3)

插件文档确实没有更新。但是,查看源代码,似乎有两个选项可用于突出显示两个日期或特定日期之间的时间段。调用脚本或通过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'

迟到的答案,但希望它仍然有用!