渗透测试网络安全应用安全【免费下载链接】byobAn open-source post-exploitation framework for students, researchers and developers.项目地址https://gitcode.com/gh_mirrors/by/byob点击查看免费下载本文以 BYOB 开源仓库中实际随附的第三方组件 daterangepicker/README.md 为骨架结合仓库内的 daterangepicker.js 实现与 Web 控制台的集成代码系统讲解基于 Bootstrap 的日期范围选择器Date Range Picker的依赖加载、基本用法、全部配置项、公开函数与事件机制。读完本文你将能够在任意 Bootstrap 页面中快速接入一个支持预设范围、单日期模式、时间选择与中文本地化的日期范围控件并理解它在 BYOB Web 控制台如会话、文件等页面中是如何被初始化和使用的。一、组件概述一个可下拉的日期范围选择器daterangepicker 是一个面向 Bootstrap 的日期范围选择组件。它会在触发元素下方弹出一个下拉菜单用户可以在其中选择一段起止日期。核心行为如下默认双日历不传任何选项时组件会呈现两个日历供用户分别选择开始日期与结束日期预设范围可以通过ranges选项提供一组预定义日期范围如今天最近 7 天用户一键即可选中无需手动翻日历回填输入框若组件绑定在input typetext上选中结果会自动写入文本框自定义回调也可以不依赖输入框通过回调函数接收用户的选择结果单日期模式将singleDatePicker设为true后组件退化为单日历单日期选择器回调中收到的 start 与 end 是同一个日期。该组件最初由 Dan Grossman 在为 Improvely 构建报表界面时编写仓库中的 package.json 与源码头部注释可佐证其作者与版本信息当前仓库中随附的 daterangepicker.js 版本为1.3.21遵循 MIT 许可证。二、依赖与文件结构该组件运行在三个基础库之上缺一不可Bootstrap提供下拉菜单、按钮等基础样式与交互Moment.js负责所有日期的解析、格式化与时区计算jQuery提供选择器、DOM 操作与插件注册机制。仓库中web-gui/buildyourownbotnet/assets/js/daterangepicker/目录下随附了完整的运行所需文件daterangepicker.js插件主实现约 1300 行含 AMD / CommonJS / 浏览器全局三种加载方式daterangepicker-bs3.css适配 Bootstrap 3 的样式表daterangepicker-bs2.css适配 Bootstrap 2 的样式表README 明确说明两种版本各提供独立样式moment.js 与 moment.min.jsMoment.js 本体为便于使用直接随组件分发examples.html官方用法示例集合bower.json 与 package.json包管理元数据。在 BYOB 的 Web 控制台中多个模板页面都以/assets/js/daterangepicker/前缀引用了这套资源例如 sessions.html、files.html、payloads.html 等均同时加载了daterangepicker-bs3.css与daterangepicker.js说明该组件已被整合进 Web 控制台的全局前端资源体系中。三、基本用法在 HTML 页面中按顺序引入 jQuery、Moment.js、daterangepicker 脚本与样式script typetext/javascript srcjquery.js/script script typetext/javascript srcmoment.js/script script typetext/javascript srcdaterangepicker.js/script link relstylesheet typetext/css hrefbootstrap.css / link relstylesheet typetext/css hrefdaterangepicker-bs3.css / script typetext/javascript $(document).ready(function() { $(input[namedaterange]).daterangepicker(); }); /script这一最小调用足以让input[namedaterange]获得日期范围选择能力点击输入框弹出双日历选择起止日期后结果自动回填文本框。构造函数还接受两个可选参数选项对象与回调函数。回调在用户修改了选中范围后触发依次收到start、end均为 moment 日期对象和label所选预设范围的标签未选预设时为 undefined/空三个参数。需要特别注意的是如果用户只是关闭了弹层而没有改动任何日期回调不会触发——这是它与下面事件章节中apply.daterangepicker的核心区别。带选项与回调的完整示例$(input[namedaterange]).daterangepicker( { format: YYYY-MM-DD, startDate: 2013-01-01, endDate: 2013-12-31 }, function(start, end, label) { alert(A date range was chosen: start.format(YYYY-MM-DD) to end.format(YYYY-MM-DD)); } );仓库附带的 examples.html 展示了更丰富的实战场景包括基础双日历L38-L44、singleDatePicker单日期选择L64-L70、带 30 分钟步进的时间范围选择L91-L101、选项热切换与销毁L120-L208、与 Bootstrap 原生 dropdown 共存L229-L236以及drops: up向上展开L257-L263可作为落地参考。四、完整配置项参考下表完整覆盖 README 列出的全部选项类型与含义均以原文档为准并结合 daterangepicker.js 的实现补充默认行为选项类型说明startDateDate / moment / string初始选中范围的开始日期endDateDate / moment / string初始选中范围的结束日期minDateDate / moment / string用户可选择的最早日期早于它的日期在日历中不可选maxDateDate / moment / string用户可选择的最晚日期dateLimitobject开始与结束日期之间允许的最大跨度可含 moment 支持的任何单位属性如{ days: 60 }、{ months: 3 }timeZonestring / number日历中展示日期所用的时区可为08:00这样的字符串也可为相对格林尼治的分钟偏移量底层通过 Moment.js 的utcOffset实现不设置时沿用传入startDate自带的时区默认使用本地时区showDropdownsboolean是否在日历上方显示年月下拉框便于快速跳转到指定年月showWeekNumbersboolean是否在日历每周行首显示周数timePickerboolean是否允许选择带时间的日期而不仅是日期timePickerIncrementnumber时间选择列表中分钟的可选步进例如30表示只能选以 0 或 30 结尾的时间timePicker12Hourboolean使用 12 小时制出现 AM/PM 下拉框而非 24 小时制timePickerSecondsboolean时间选择器中是否显示秒rangesobject预定义范围集合键为范围标签值为两个日期组成的数组表示该范围的起止opensstring弹层相对触发元素的对齐方式left/right/centerdropsstring弹层展开方向down默认向下或up向上buttonClassesarray附加到弹层内所有按钮上的 CSS 类名数组applyClassstring附加到应用按钮上的 CSS 类名cancelClassstring附加到取消按钮上的 CSS 类名formatstringmoment 用于解析与展示所选日期的格式串separatorstring回填文本输入框时开始与结束日期之间的分隔字符串localeobject提供按钮与标签的本地化字符串以及日历每周的第一天设置singleDatePickerboolean仅显示单日历选择单个日期此时回调收到的 start 与 end 为同一个日期parentElstring弹层挂载到的父元素 jQuery 选择器默认body源码层面daterangepicker.js 中可见关键默认值与解析逻辑默认format为MM/DD/YYYYstartDate、endDate、minDate、maxDate均通过moment(value, this.format)解析parentEl默认取bodyL37-L71弹层容器DRPTemplate由左右两个.calendar、.ranges面板及applyBtn/cancelBtn两个按钮构成L47-L64。日历面板内的时间选择、点击td.available选日等交互均通过命名空间事件.daterangepicker绑定L76-L80。一个覆盖多类选项的完整配置示例源自 examples.html 的 Option Set 1$(#reportrange).daterangepicker({ startDate: moment().subtract(29, days), endDate: moment(), minDate: 01/01/2012, maxDate: 12/31/2015, dateLimit: { days: 60 }, showDropdowns: true, showWeekNumbers: true, timePicker: false, timePickerIncrement: 1, timePicker12Hour: true, ranges: { Today: [moment(), moment()], Yesterday: [moment().subtract(1, days), moment().subtract(1, days)], Last 7 Days: [moment().subtract(6, days), moment()], Last 30 Days: [moment().subtract(29, days), moment()], This Month: [moment().startOf(month), moment().endOf(month)], Last Month: [moment().subtract(1, month).startOf(month), moment().subtract(1, month).endOf(month)] }, opens: left, buttonClasses: [btn btn-default], applyClass: btn-sm btn-primary, cancelClass: btn-sm, format: MM/DD/YYYY, separator: to , locale: { applyLabel: Submit, cancelLabel: Clear, fromLabel: From, toLabel: To, customRangeLabel: Custom, daysOfWeek: [Su, Mo, Tu, We, Th, Fr, Sa], monthNames: [January, February, March, April, May, June, July, August, September, October, November, December], firstDay: 1 } });注意预定义范围数组中传入的是 moment 对象而非字符串时需要像上面这样先构造 momentlocale.firstDay控制每周第一天1 表示周一。五、公开函数初始化后的动态操作README 提供三个公开函数用于在初始化之后修改选择器的选项与状态。所有函数都通过 jQuery 插件注册的数据接口访问$(#daterange).data(daterangepicker)。setOptions(object, function)签名与构造函数完全一致先将选项重置为默认值再用传入的选项对象覆盖并设置新的选择变化回调。典型场景是同一元素上按不同条件切换预设见 examples.html$(#reportrange).data(daterangepicker).setOptions(optionSet1, cb); $(#reportrange).data(daterangepicker).setOptions(optionSet2, cb);setStartDate(Date / moment / string)将当前选中的开始日期设置为指定日期。注意它不要求必须成对设置——单独修改开始日期即可结束日期保持不变。setEndDate(Date / moment / string)将当前选中的结束日期设置为指定日期。// 创建日期范围选择器 $(#daterange).daterangepicker({ startDate: 2014-03-05, endDate: 2014-03-06 }); // 修改该选择器的选中范围 $(#daterange).data(daterangepicker).setStartDate(2014-03-01); $(#daterange).data(daterangepicker).setEndDate(2014-03-31);此外从 daterangepicker.js 的实现可以推断实例还提供remove()方法它会移除弹层容器this.container.remove()、解绑触发元素上所有.daterangepicker命名空间的事件并清除data(daterangepicker)数据用于彻底销毁选择器examples.html 中的 Remove DateRangePicker 按钮即演示了该用法。六、事件机制选择器会在其绑定的元素上触发以下命名空间事件可用 jQuery 的.on()监听事件触发时机show.daterangepicker选择器弹层显示时hide.daterangepicker选择器弹层隐藏时showCalendar.daterangepicker日历面板显示时hideCalendar.daterangepicker日历面板隐藏时apply.daterangepicker点击应用Apply按钮时cancel.daterangepicker点击取消Cancel按钮时把取消改造成清空一些应用需要清空而非取消的语义。只需修改取消按钮的文案并在cancel事件中执行清空逻辑$(#daterange).daterangepicker({ locale: { cancelLabel: Clear } }); $(#daterange).on(cancel.daterangepicker, function(ev, picker) { // 执行清空操作例如清空输入框 $(#daterange).val(); });事件回调中的picker参数即选择器实例可直接访问picker.startDate、picker.endDate等属性。apply 事件与构造函数回调的区别构造函数回调是监听选中范围发生变化最便捷的方式但它在选择未变时不触发。如果你希望在每次点击 Apply 时都执行某些操作即使选中范围未变就应监听apply.daterangepicker$(#daterange).daterangepicker(); $(#daterange).on(apply.daterangepicker, function(ev, picker) { console.log(picker.startDate.format(YYYY-MM-DD)); console.log(picker.endDate.format(YYYY-MM-DD)); });七、在 BYOB Web 控制台中的实际集成daterangepicker 在 BYOB 前端被封装进全局初始化脚本使模板只需书写极简的 HTML 就能获得完整能力。neon-custom.js 中的Date Range Picker段落展示了这套集成方式自动扫描对页面上所有.daterange元素自动初始化$(.daterange).each(...)data-属性驱动配置*通过attrDefault读取元素的data-format、data-timePicker、data-timePickerIncrement、data-separator、data-minDate、data-maxDate、data-startDate、data-endDate等属性生成选项对象默认format为MM/DD/YYYY、separator为 - 预设范围开关元素带有add-ranges类时自动注入ranges内置Today / Yesterday / Last 7 Days / Last 30 Days / This Month / Last Month六组常用范围内联展示与回调钩子元素带daterange-inline类时选择结果会渲染进元素内的span带data-callback时触发callback_test(start, end)钩子。对应地assets/less/neon-less/daterangepicker.less 提供了该组件在 Neon 主题下的样式变量而 sessions.html 等模板统一引用/assets/js/daterangepicker/daterangepicker.js与daterangepicker-bs3.css。这意味着在 BYOB Web 控制台中你只需在模板里放置一个带.daterange类的输入框并按需添加data-*属性或add-ranges类即可获得与全局初始化完全一致的日期范围筛选体验例如会话列表按时间段过滤。八、许可证说明该组件基于 MIT 许可证开源与 Bootstrap 相同的许可协议版权归 Dan Grossman2012-2014。仓库随附的 moment.js 为方便使用而一并分发同样采用 MIT 许可证。完整许可证文本可在 daterangepicker/README.md 末尾查看。赞分享渗透测试网络安全应用安全【免费下载链接】byobAn open-source post-exploitation framework for students, researchers and developers.项目地址https://gitcode.com/gh_mirrors/by/byob点击查看免费下载相关推荐Flet DateRangePicker 日期范围选择器完整指南属性、事件与本地化实战Flet DateRangePicker 日期范围选择器完整指南属性、事件与本地化实战 DateRangePicker 是 Flet 提供的 Material前端跨平台桌面应用移动开发rsuite DateRangePicker 的 block 属性让日期范围选择器铺满整行的实战指南rsuite DateRangePicker 的 block 属性让日期范围选择器铺满整行的实战指南 日期范围选择器DateRangePicker默认以“前端UI组件掌握ng-bootstrap日期选择器简单配置最小/最大日期范围的终极指南掌握ng bootstrap日期选择器简单配置最小/最大日期范围的终极指南 ng bootstrap是Angular powered Bootstrap的核心UI组件前端上一篇Gearpump流处理编程实战从零构建你的第一个实时应用下一篇OpenArkWindows内核级安全审计工具的实战应用与深度解析创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考