range-picker是一款支持多种类型数据的jQuery范围选择器插件。该范围选择器支持日期范围,星期范围,月份范围,整数范围等。并且可以设置为只支持单向选择,或双向选择的范围选择器。
安装
可以通过bower来安装range-picker范围选择器插件。
bower install --save range-picker
使用方法
在页面中引入range-picker.css,jQuery和range-picker.js文件。
<link rel="stylesheet" href="css/range-picker.css"/> <script type="text/javascript" src="path/to/jquery.min.js"></script> <script type="text/javascript" src="js/range-picker.js"></script>
HTML结构
可以使用一个空的<div>
作为范围选择器的容器。
<div id="date_range"></div>
初始化插件
在页面DOM元素加载完毕之后,可以通过rangepicker()
方法来初始化该范围选择器插件。
$("#date_picker").rangepicker();
配置参数
range-picker范围选择器的可用配置参数有:
-
startValue
:范围选择器左侧的标签。默认值为none
。 -
endValue
:范围选择器右侧的标签。默认值为none
。 -
type
:范围选择器的类型,可以是single
,表示单向选择,或者是double
,表示双向选择。默认值为single
。例如:$("#number_range").rangepicker({ type: "double", startValue: 0, endValue: 100, translateSelectLabel: function(currentPosition, totalPosition) { return parseInt(100 * (currentPosition / totalPosition)); } });
-
translateSelectLabel
:获取手柄的文本,类型Function
,默认值为none
。参数:
-
currentPosition
:手柄的位置。 -
totalWidth
:进度条的宽度。
$("#number_range").rangepicker({ startValue: 0, endValue: 100, translateSelectLabel: function(currentPosition, totalPosition) { return parseInt(100 * (currentPosition / totalPosition)); } });
-
方法
getSelectValue
:获取选择的范围。会返回一个对象,对象中的startLabel
是开始标签,endLabel
是结束标签。例如:
var d1 = $("#date_range").rangepicker({ startValue: dateFormat(startDate, "yyyy/MM/dd"), endValue: dateFormat(endDate, "yyyy/MM/dd"), translateSelectLabel: function(currentPosition, totalPosition) { var timeOffset = offset * ( currentPosition / totalPosition); var date = new Date(+startDate + parseInt(timeOffset)); return dateFormat(date, "yyyy/MM/dd"); } }); var result = d1.getSelectValue(); console.info(result);
updatePosition
:更新手柄的位置。参数:
-
endPosition
:右侧手柄的位置。 -
startPosition
:左侧手柄的位置。
例如:
var rangePicker = $("#number_range").rangepicker({ startValue: 0, endValue: 100, translateSelectLabel: function(currentPosition, totalPosition) { return parseInt(100 * (currentPosition / totalPosition)); } }); rangePicker.updatePosition("-50px", "10%"); // rangePicker.updatePosition("-50px"); // rangePicker.updatePosition("-50px", "50px"); // rangePicker.updatePosition("90%", "10%");
range-picker范围选择器插件的github地址为:https://github.com/zhangtasdq/range-picker
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!