bootstrap-daterangepicke-时间控件资源-CSDN文库

共74个文件

js：54个

css：8个

html：3个

需积分: 15 72 浏览量 2017-09-16 21:46:00 上传评论收藏 333KB ZIP 举报

Bootstrap-Daterangepicker 是一款基于 Bootstrap 框架的日期范围选择插件，它为网页应用提供了美观、易用的时间选择功能。这款插件广泛应用于需要用户输入特定日期范围的场景，如报告过滤、日程安排等。在提供的压缩包中，包含了一些关键文件，帮助我们理解和使用这个时间控件。 `bootstrap-daterangepicker.js` 是核心的 JavaScript 文件，它实现了日期范围选择的逻辑。这个文件包含了日期选择器的初始化、事件处理、日期计算以及与用户的交互等功能。通过调用这个文件中的方法，我们可以轻松地在网页上添加日期范围选择的功能。汉化文件通常以 `.lang.js` 的形式存在，比如 `zh-CN.js`，这是中文语言包，用于将日期选择器的界面元素翻译成中文，以适应中国用户的使用习惯。在项目中引入这个文件后，用户界面的按钮、提示等文字将会显示为中文。官方模板文件通常包含了一些预设的示例，这些模板展示了如何在不同的上下文中使用 Daterangepicker。在压缩包中，你可以找到这些模板文件，例如 `demo.html`，它可能包含了几种常见的用法，如嵌入到表单中、设置默认日期范围、自定义日期格式等。通过查看和分析这些模板，你可以快速了解如何在自己的项目中应用 Daterangepicker。此外，你提到你自己编写了一个汉化后的 HTML 页面，这表明你已经对 Daterangepicker 进行了实际的应用，并可能根据需求进行了定制。这个页面可以作为学习和参考的例子，对于初学者来说，看到实际的工作示例往往比纯理论更有帮助。在使用 Bootstrap-Daterangepicker 时，你需要注意以下几点： 1. **依赖**：确保已经引入了 Bootstrap 的 CSS 和 JavaScript 文件，以及 jQuery，因为 Daterangepicker 基于这些库构建。 2. **初始化**：在 HTML 元素上使用 `daterangepicker` 数据属性或 JavaScript API 来初始化插件。 3. **配置选项**：Daterangepicker 提供了许多配置选项，如 `startDate` 和 `endDate`（默认选择的日期范围）、`locale`（语言设置）、`ranges`（预定义的日期范围）等，可以根据需要进行调整。 4. **事件处理**：通过监听 `apply.daterangepicker` 和 `cancel.daterangepicker` 等事件，可以响应用户的选择并执行相应的操作。 5. **样式调整**：如果需要，可以通过修改 CSS 来调整日期选择器的外观，使其更好地融入你的网站设计。 Bootstrap-Daterangepicker 是一个强大且灵活的日期范围选择工具，通过合理使用和配置，能够极大地提升用户在网页上的交互体验。学习和理解这个插件的内部机制以及如何与之交互，对于提升网页开发能力非常有帮助。

资源推荐

资源详情

资源评论

收起资源包目录

bootstrap-datetimepicker-时间控件.zip （74个子文件）

bootstrap-datetimepicker-时间控件

css

bootstrap-datetimepicker.min.css 11KB

bootstrap-datetimepicker.css 12KB

less

datetimepicker.less 13KB

sample in bootstrap v3

bootstrap

css

bootstrap-theme.css 16KB

bootstrap.min.css 95KB

bootstrap.css 117KB

bootstrap-theme.min.css 15KB

fonts

glyphicons-halflings-regular.woff 16KB

glyphicons-halflings-regular.ttf 29KB

glyphicons-halflings-regular.eot 14KB

glyphicons-halflings-regular.svg 62KB

bootstrap.min.js 27KB

bootstrap.js 57KB

jquery

jquery-1.8.3.min.js 91KB

图片演示.html 1KB

index.html 3KB

locales

bootstrap-datetimepicker.da.js 690B

bootstrap-datetimepicker.nl.js 681B

bootstrap-datetimepicker.rs.js 873B

bootstrap-datetimepicker.zh-CN.js 704B

bootstrap-datetimepicker.el.js 928B

bootstrap-datetimepicker.ro.js 714B

bootstrap-datetimepicker.ka.js 1KB

bootstrap-datetimepicker.lv.js 770B

bootstrap-datetimepicker.ca.js 677B

bootstrap-datetimepicker.de.js 714B

bootstrap-datetimepicker.pl.js 741B

bootstrap-datetimepicker.th.js 1KB

bootstrap-datetimepicker.bg.js 874B

bootstrap-datetimepicker.he.js 807B

bootstrap-datetimepicker.bn.js 1KB

bootstrap-datetimepicker.it.js 736B

bootstrap-datetimepicker.az.js 713B

bootstrap-datetimepicker.pt-BR.js 711B

bootstrap-datetimepicker.pt.js 736B

bootstrap-datetimepicker.sk.js 770B

bootstrap-datetimepicker.ru.js 904B

bootstrap-datetimepicker.lt.js 805B

bootstrap-datetimepicker.nb.js 701B

bootstrap-datetimepicker.ms.js 659B

bootstrap-datetimepicker.hu.js 726B

bootstrap-datetimepicker.sl.js 682B

bootstrap-datetimepicker.ee.js 776B

bootstrap-datetimepicker.sv.js 688B

bootstrap-datetimepicker.hy.js 914B

bootstrap-datetimepicker.ko.js 765B

bootstrap-datetimepicker.tr.js 685B

bootstrap-datetimepicker.ja.js 679B

bootstrap-datetimepicker.fi.js 726B

bootstrap-datetimepicker.fr.js 733B

bootstrap-datetimepicker.cs.js 789B

bootstrap-datetimepicker.rs-latin.js 679B

bootstrap-datetimepicker.is.js 747B

bootstrap-datetimepicker.ua.js 874B

bootstrap-datetimepicker.ar.js 940B

bootstrap-datetimepicker.uk.js 927B

bootstrap-datetimepicker.es.js 685B

bootstrap-datetimepicker.hr.js 631B

bootstrap-datetimepicker.zh-TW.js 813B

bootstrap-datetimepicker.id.js 772B

bootstrap-datetimepicker.sw.js 811B

bootstrap-datetimepicker.no.js 678B

bootstrap-datetimepicker.js 68KB

bootstrap-datetimepicker.min.js 38KB

sample in bootstrap v2

bootstrap

css

bootstrap.min.css 121KB

bootstrap.css 140KB

img

glyphicons-halflings.png 12KB

glyphicons-halflings-white.png 9KB

bootstrap.min.js 26KB

bootstrap.js 57KB

jquery

jquery-1.8.3.min.js 91KB

index.html 3KB

build

build.less 2KB

build_standalone.less 2KB

<!DOCTYPE html> <html> <head> <title></title> <link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"> <link href="../css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen"> </head> <body> <div class="container"> <form action="" class="form-horizontal" role="form"> <fieldset> <legend>Test</legend> <div class="form-group"> <label for="dtp_input1" class="col-md-2 control-label">DateTime Picking</label> <div class="input-group date form_datetime col-md-5" data-date="1979-09-16T05:25:07Z" data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1"> <input class="form-control" size="16" type="text" value="" readonly> <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span> <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span> </div> <input type="hidden" id="dtp_input1" value="" /><br/> </div> <div class="form-group"> <label for="dtp_input2" class="col-md-2 control-label">Date Picking</label> <div class="input-group date form_date col-md-5" data-date="" data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd"> <input class="form-control" size="16" type="text" value="" readonly> <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span> <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span> </div> <input type="hidden" id="dtp_input2" value="" /><br/> </div> <div class="form-group"> <label for="dtp_input3" class="col-md-2 control-label">Time Picking</label> <div class="input-group date form_time col-md-5" data-date="" data-date-format="hh:ii" data-link-field="dtp_input3" data-link-format="hh:ii"> <input class="form-control" size="16" type="text" value="" readonly> <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span> <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span> </div> <input type="hidden" id="dtp_input3" value="" /><br/> </div> </fieldset> </form> </div> <script type="text/javascript" src="./jquery/jquery-1.8.3.min.js" charset="UTF-8"></script> <script type="text/javascript" src="./bootstrap/js/bootstrap.min.js"></script> <script type="text/javascript" src="../js/bootstrap-datetimepicker.js" charset="UTF-8"></script> <script type="text/javascript" src="../js/locales/bootstrap-datetimepicker.fr.js" charset="UTF-8"></script> <script type="text/javascript"> $('.form_datetime').datetimepicker({ //language: 'fr', weekStart: 1, todayBtn: 1, autoclose: 1, todayHighlight: 1, startView: 2, forceParse: 0, showMeridian: 1 }); $('.form_date').datetimepicker({ language: 'fr', weekStart: 1, todayBtn: 1, autoclose: 1, todayHighlight: 1, startView: 2, minView: 2, forceParse: 0 }); $('.form_time').datetimepicker({ language: 'fr', weekStart: 1, todayBtn: 1, autoclose: 1, todayHighlight: 1, startView: 1, minView: 0, maxView: 1, forceParse: 0 }); </script> </body> </html>

评论收藏

内容反馈