jQWidgets jqxScheduler - toolBarRangeFormat 属性

简介

jQWidgets jqxScheduler 是一个专为网站和移动应用程序设计的轻量级、交互式JavaScript日程表插件。它可以用来显示医生和病人的预约、会议安排、学校课程和其他时间表信息。jqxScheduler 带有一个工具栏，它为用户提供了一些常用的快捷访问按钮。

toolBarRangeFormat 属性是 jqxScheduler 工具栏中当前日期范围的文本格式化。在 jqxScheduler 中，用户可以通过单击工具栏按钮切换到不同的日期范围，例如当天、本周、下周、本月等等。toolBarRangeFormat 属性可用于设置更新日期范围时在工具栏中显示的文本格式。

语法

$("#jqxScheduler").jqxScheduler({
    toolBarRangeFormat: 'formatString'
});

其中，formatString 指定了工具栏中日期范围的格式字符串。它应该包含格式字符串和格式占位符。

示例

以下示例演示如何使用 toolBarRangeFormat 属性定制 jqxScheduler 工具栏中的日期范围文本格式：

$("#jqxScheduler").jqxScheduler({
    date: new Date(),
    width: '100%',
    height: 600,
    source: new $.jqx.dataAdapter(source),
    toolBarRangeFormat: '{from:MM/dd/yyyy} - {to:MM/dd/yyyy}',
    view: 'weekView',
    views: ['dayView', 'weekView', 'monthView'],
    appointmentDataFields: {
        from: '开始',
        to: '结束',
        id: '编号',
        description: '备注',
        location: '地点',
        subject: '主题',
        style: '样式',
        status: '状态'
    }
});

在上面的例子中，我们使用 toolBarRangeFormat 属性来设置日期范围的文本格式。我们指定了一个格式化字符串，它包含两个格式占位符：{from} 和 {to}。这两个占位符将分别替换为日期范围的起始和结束日期。最终，工具栏中的日期范围文本将显示为“07/01/2022 - 07/07/2022”。

格式化字符串和格式占位符

下面列举了一些常用的格式化字符串和格式占位符：

| 格式化字符串 | 描述 | | --- | --- | | d | 月份中的第几天，不足两位数时前导零 | | dd | 月份中的第几天，两位数，不足时前导零 | | M | 月份，没有前导零 | | MM | 月份，两位数，不足时前导零 | | MMM | 月份的缩写名称 | | MMMM | 月份的完整名称 | | yy | 年份的后两位数 | | yyyy | 四位数完整年份 | | h | 小时数（12小时制），不足两位数时前导零 | | hh | 小时数（12小时制），两位数，不足时前导零 | | H | 小时数（24小时制），不足两位数时前导零 | | HH | 小时数（24小时制），两位数，不足时前导零 | | m | 分钟数，不足两位数时前导零 | | mm | 分钟数，两位数，不足时前导零 | | s | 秒数，不足两位数时前导零 | | ss | 秒数，两位数，不足时前导零 | | t | AM/PM 指示符 | | tt | 上午/下午 指示符 | | ddd | 星期的缩写名称 | | dddd | 完整星期的名称 |

总结

toolBarRangeFormat 属性可以用于设置 jqxScheduler 工具栏中日期范围文本的格式化字符串。你可以使用合适的格式占位符来构建格式化字符串，以显示起始和结束日期、时、分、秒等等任意信息。使用 toolBarRangeFormat 属性，你可以为用户提供一个更加友好和直观的日期范围文本，增强用户体验。