bootstrap中⽇历范围选择插件daterangepicker的使⽤详解
daterangepicker是bootstrap的⼀个⽇历插件主要⽤来选择时间段的插件这个插件很好⽤也很容易操作
引⼊相关插件
<!-- 需要引⽤的依赖库 -->
<script type="text/javascript" src="//cdn.jsdelivr/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr/momentjs/latest/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr/bootstrap/3/css/bootstrap.css" rel="external nofollow" />
<!-- 引⽤ daterangepicker 相关⽂件-->
<script type="text/javascript" src="//cdn.jsdelivr/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr/bootstrap.daterangepicker/2/daterangepicker.css" rel="external nofollow" />
需要的元素添加该插件的调⽤⽅法：
$('input[name="daterange"]').daterangepicker();
您可以通过参数⾃定义相关配置，还可以通过回调函数在⽤户选择新的⽇期时获得通知。
$('input[name="daterange"]').daterangepicker({
locale: {
format: 'YYYY-MM-DD'
},
startDate: '2013-01-01',
endDate: '2013-12-31'
},
function(start, end, label) {
alert("A new date range was chosen: " + start.format ('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
});
其中这些配置可以组成⼀个配置为⽂件然后再（）中引⼊
$('input[name=dateStr]', '#themeAddPage').daterangepicker(dateRangePickerAfterTodayConfig);
配置⽂件
var dateLongRangePickerOptionObj = {
minDate: '2015/01/01 00:00:00', //最⼩时间
showDropdowns: true,
showWeekNumbers: false, //是否显⽰第⼏周
dateLimit: {days: 300}, //起⽌时间的最⼤间隔
timePicker: true,
timePickerIncrement: 1, //时间的增量，单位为分钟
timePicker12Hour: false,
opens: 'right', //⽇期选择框的弹出位置
buttonClasses: ['btn btn-default'],
applyClass: 'btn-small btn-primary blue',
cancelClass: 'btn-small',
format: 'YYYY/MM/DD HH:mm:ss', //控件中from和to 显⽰的⽇期格式MM/DD/YYYY
separator: '-',
defaultDate: new Date(),
locale: {
applyLabel: '确定',
cancelLabel: '取消',
fromLabel: '起始时间',
toLabel: '结束时间',
daysOfWeek: ['⽇', '⼀', '⼆', '三', '四', '五', '六'],
monthNames: ['⼀⽉', '⼆⽉', '三⽉', '四⽉', '五⽉', '六⽉', '七⽉', '⼋⽉', '九⽉', '⼗⽉', '⼗⼀⽉', '⼗⼆⽉'],
firstDay: 1
}
}
配置选项，⽅法和事件
配置选项
startDate: (Date 对象, moment 对象或者string类型)初始化⽇期范围选中的开始时间。
endDate: (Date 对象, moment 对象或者string类型)初始化⽇期范围选中的结束时间。
minDate: (Date 对象, moment 对象或者string类型) ⽤户可以选择的最早时间。
maxDate: (Date 对象, moment 对象或者string类型) ⽤户可以选择的最晚时间。
dateLimit: (object类型) 选中的开始和结束⽇期之间最⼤时间间隔。可以是能够添加到moment对象（moment.add()）中的任何属性（如：days, months）。
showDropdowns: (boolean类型) 在⽇历上⾯显⽰年和⽉的下拉框，选中后将跳到指定的年和⽉
showWeekNumbers: (boolean类型) 在⽇历上每周开始的地⽅显⽰本地化的周编号。
showISOWeekNumbers: (boolean类型) 在⽇历上每周开始的地⽅显⽰国际标准的周编号。
timePicker: (boolean类型) 允许选择⽇期和时间，⽽不是局限于⽇期。
timePickerIncrement: (number类型) 时间选择框中分钟列的增加步长（如：设置为30后只允许选择以0和30结束的时间）。
timePicker24Hour: (boolean类型) 使⽤24⼩时制来代替12⼩时制，同时删除AM/PM选择框。
timePickerSeconds: (boolean类型) 在时间选择框中显⽰秒选择列。
ranges: (object类型) 设置⽤户可以选择的预定义⽇期范围。每个键名即范围的标签名，对应值是两个⽇期组成的数组，来表⽰范围的界限。
showCustomRangeLabel: (boolean类型) 当使⽤范围选项时，在预定义范围列表的末尾显⽰标记为"Custom Range"的标签。当选择的⽇期范围与任何⼀个预定义的范围都不匹配时，该选项将被⾼亮显⽰。单击它显⽰⽇历可以选择新的范围。alwaysShowCalendars: (boolean类型) 通常，如果使⽤范围选项指定了预定义⽇期范围，则⽤户除了单击 "Custom Range"之外，⽇期选择器都不会显⽰⽤于选择⾃定义⽇期范围的⽇历。当选项设置为true时，将始终显⽰⽤于选择⾃定义⽇期范围的⽇历。opens: (string: 'left'/'right'/'center') 设置⽇期选择器以绑定元素左对齐、右对齐或者居中显⽰。
drops: (string: 'down' or 'up') 设置⽇期选择器在绑定元素的下⾯（默认）或者上⾯显⽰。
buttonClasses: (array类型)为⽇期选择器中的所有button元素添加CSS类。
applyClass: (string类型) 为⽇期选择器中的apply按钮添加类。
cancelClass: (string类型) 为⽇期选择器中的cancel按钮添加类。
locale: (object类型) 允许为按钮和标签提供本地化的字符串，⾃定义⽇期格式，并更改⽇历中周的第⼀天。查看配置⽣成器中的“locale配置（包含设置⽰例）”，以了解如何⾃定义这些选项。
singleDatePicker: (boolean类型) 只显⽰⼀个⽇历来选择⼀个⽇期，⽽不是带有两个⽇历的范围选择器；回调函数中提供的开始和结束⽇期将和选择的单个⽇期相同。js当前日期加一天
autoApply: (boolean类型) 隐藏apply和cancel按钮。选择两个⽇期或预定义范围时，会⾃动应⽤新的⽇期范围。
linkedCalendars: (boolean类型) 启⽤时，显⽰的两个⽇历将始终为两个连续的⽉份（如：1⽉和2⽉），并且当单击⽇历上⽅的左侧或右侧箭头时，两个⽇历都将变化。禁⽤时，两个⽇历可以单独变化并显⽰任何⽉/年。
isInvalidDate: (function类型) 在显⽰两个⽇历之前传递⼀个⽇期参数，然后通过返回true或false，标⽰该⽇期是否可供选择。
isCustomDate: (function类型) 在显⽰两个⽇历之前传递⼀个⽇期参数，然后将返回的CSS类名字符串传或者数组应⽤在⽇历中的该⽇期上。
autoUpdateInput: (boolean类型) 标⽰⽇期范围选择器是否应在初始化和所选⽇期改变时，⾃动更新绑定在<input>元素上的值。
parentEl: (string类型) 给⽇期选择器添加⽗元素的jQuery选择器，如果没有提供，body将被作为⽗元素。
⽅法
您可以使⽤setStartDate和setEndDate⽅法以程序化的⽅式更新⽇期选择器中的startDate和endDate。您也可以通过绑定到该元素上的data属性访问⽇期范围选择器对象及其功能和属性。setStartDate(Date 对象, moment 对象或者string类型): 设置⽇期范围选择器中当前选择的开始⽇期为提供的⽇期 setEndDate(Date 对象, moment 对象或者string类型): 设置⽇期范围选择器中当前选择的结束⽇期为提供的⽇期
⽰例⽤法：
// 创建⼀个新的⽇期范围选择器
$('#daterange').daterangepicker({ startDate: '03/05/2005', endDate: '03/06/2005' });
// 改变⽇期选择器中选中的⽇期范围
$('#daterange').data('daterangepicker').setStartDate('03/01/2014');
$('#daterange').data('daterangepicker').setEndDate('03/31/2014');
事件
⽇期选择器绑定的元素可以触发以下⼏个事件，这些事件，您都可以进⾏监听。
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('');
});
向构造函数传⼀个回调函数作为参数是监听所选⽇期范围更改最简单的⽅法，即使选择未更改，每次应⽤按钮被点击时，您也可以执⾏某些操作：
$('#daterange').daterangepicker();
$('#daterange').on('apply.daterangepicker', function(ev, picker) {
console.log(picker.startDate.format('YYYY-MM-DD'));
console.dDate.format('YYYY-MM-DD'));
});
总结
以上所述是⼩编给⼤家介绍的bootstrap中⽇历范围选择插件daterangepicker的使⽤详解，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论