@activix/bootstrap-daterangepicker 中文文档教程

Question

Date Range Picker for Bootstrap

Bootstrap 的这个日期范围选择器组件创建了一个下拉菜单，用户可以从中 选择日期范围。 我在为 Improvely 构建 UI 时创建了它， 这需要一种方法来选择报告的日期范围。

如果不带任何选项调用，它将显示两个日历以选择一个开始 和结束日期。 或者，您可以提供用户可以从中选择的日期范围列表 从日历中选择日期。 如果附加到文本输入，将插入选定的日期 到文本框中。 否则，您可以提供自定义回调函数来接收选择。

通过将 singleDatePicker 选项设置为 true，该组件还可以用作单个日期选择器。

查看一些示例 或在实时应用程序中尝试

Usage

此组件依赖于 Bootstrap， Moment.js 和 jQuery。

包含单独的样式表以用于 Bootstrap 2 或 Bootstrap 3。

基本用法：

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="moment.js"></script>
<script type="text/javascript" src="daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap.css" />
<link rel="stylesheet" type="text/css" href="daterangepicker-bs3.css" />

<script type="text/javascript">
$(document).ready(function() {
  $('input[name="daterange"]').daterangepicker();
});
</script>

构造函数还采用可选的选项对象和回调函数。 该函数将在任何时候被调用 选定的日期范围已被用户更改，并传递了开始和结束日期（时刻日期对象） 和选择的预定义范围标签（如果有）作为参数。 如果没有关闭选择器，它不会触发 所选日期的任何更改。

$('input[name="daterange"]').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'));
  }
);

也可以使用 HTML5 数据属性设置选项。 例如，timePicker="true" 将设置为：

<input type="text" data-time-picker="true" name="daterange">

Options

startDate: (Date object, moment object or string) The start of the initially selected date range

endDate: (Date object, moment object or string) The end of the initially selected date range

minDate: (Date object, moment object or string) 用户可以选择的最早日期

maxDate: ( Date object, moment object or string) The latest date a user may select

dateLimit: (object) 所选开始日期和结束日期之间的最大跨度。 可以有任何可以添加到 moment 对象的属性（即天、月）

timeZone：（字符串或数字）将用于在日历中显示开始日期和结束日期的时区。 这可能是一个字符串，例如“08:00”或与格林威治标准时间的分钟偏移量。 使用 Moment.js #utcOffset，查看此处的文档了解更多信息。 如果未设置 timeZone 选项，日历将使用在通过选项传入的 startDate 上设置的时区（如果有的话）。 为本地时

默认

区日历上每周的开始

: (boolean) 允许选择带有时间的日期，而不仅仅是日期

timePicker （即 30 只允许选择以 0 或 30 结尾的时间）

timePicker12Hour：（布尔值）使用 12 小时制而不是 24 小时制，添加一个 AM/PM 选择框

timePickerSeconds< /code>：（布尔值）在 timePicker

ranges 中显示秒数：（对象）设置用户可以从中选择的预定义日期范围。 每个键都是范围的标签，它的值是一个数组，其中有两个日期表示范围的边界

opens: (string: 'left'/'right'/'center') 选择器是否在附加到 drops 的 HTML 元素下方显示为左对齐、右对齐或居中

：（字符串：'down' 或 'up'）选择器是在下方（默认）还是上方打开它附加到

buttonClasses 的元素：（数组）将添加到选择器中所有按钮的 CSS 类名称

applyClass：（字符串）将添加到选择器中的 CSS 类字符串apply button

cancelClass: (string) 将添加到取消按钮的 CSS 类字符串

format: (string) 解析或显示时使用的日期/时间格式字符串选定的日期

separator：（字符串）当填充文本输入时在开始日期和结束日期之间显示的分隔符字符串选择器附加到

locale：（对象）允许您提供 用于按钮和标签的本地化字符串，以及用于日历的一周中的第一

天 的开始日期和结束日期将与选择的同一日期相同

提供给回调 'body'

Functions

提供了几个函数用于在初始化后更新选择器的选项和状态：

setOptions(object, function)：此函数具有与日期范围相同的签名和用途选择器的构造函数：它将选择器的选项设置为其默认值，用您提供的选项对象中的任何值覆盖它们，并将选择更改的回调设置为您提供的任何函数

setStartDate(Date/moment/string)：将日期范围选择器当前选择的开始日期设置为提供的日期

setEndDate(Date/moment/string)：将日期范围选择器当前选择的结束日期设置为提供的日期

示例用法：

//create a new date range picker
$('#daterange').daterangepicker({ startDate: '2014-03-05', endDate: '2014-03-06' });

//change the selected date range of that picker
$('#daterange').data('daterangepicker').setStartDate('2014-03-01');
$('#daterange').data('daterangepicker').setEndDate('2014-03-31');

Events

几个事件是在您附加选择器 t 的元素上触发 o，你可以监听：

show.daterangepicker：显示选择器时触发

hide.daterangepicker：隐藏选择器时触发

showCalendar.daterangepicker：显示日历时触发

hideCalendar.daterangepicker：隐藏日历时触发

apply.daterangepicker：点击应用按钮时触发

cancel.daterangepicker：单击取消按钮时触发

某些应用程序需要“清除”而不是“取消”功能，这可以通过更改按钮标签并监视取消事件来实现：

$('#daterange').daterangepicker({
  locale: { cancelLabel: 'Clear' }  
});

$('#daterange').on('cancel.daterangepicker', function(ev, picker) {
  //do something, like clearing an input
  $('#daterange').val('');
});

将回调传递给constructor 是侦听所选日期范围内变化的最简单方法，即使选择未更改，您也可以在每次单击应用按钮时执行某些操作：

$('#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'));
});

License

此代码在与 Bootstrap 相同的许可下提供。 Moment.js 包含在此存储库中 为了方便。 它在 MIT 许可证 下可用。

--

麻省理工学院许可证 (MIT)

版权所有 (c) 2012-2014 Dan Grossman

特此免费向任何获得副本的人授予许可 本软件和相关文档文件（“软件”），处理 在软件中不受限制，包括但不限于权利 使用、复制、修改、合并、发布、分发、再许可和/或出售 该软件的副本，并允许该软件是 提供这样做，但须满足以下条件：

上述版权声明和本许可声明应包含在 本软件的所有副本或重要部分。

本软件“按原样”提供，不提供任何形式的明示或保证 暗示的，包括但不限于适销性保证， 适用于特定目的和非侵权。 在任何情况下都不得 作者或版权持有人对任何索赔、损害或其他 责任，无论是在合同、侵权或其他方面的行为中，由以下原因引起， 出于或与软件或使用或其他交易有关 软件。