当前位置：首页 > 网页特效 > 日期和时间

jQuery多类型范围选择器插件

分类：日期和时间日期：2024-05-14 点击(1) 评论(0)

jQuery多类型范围选择器插件

简介

range-picker是一款支持多种类型数据的jQuery范围选择器插件。该范围选择器支持日期范围，星期范围，月份范围，整数范围等。并且可以设置为只支持单向选择，或双向选择的范围选择器。

#####  安装
可以通过bower来安装range-picker范围选择器插件。

bower install --save range-picker                  
#####  使用方法
在页面中引入range-picker.css，jQuery和range-picker.js文件。

```html
<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>作为范围选择器的容器。

```html
<div id="date_range"></div>        
```      
#####  初始化插件
在页面DOM元素加载完毕之后，可以通过rangepicker()方法来初始化该范围选择器插件。

```html
$("#date_picker").rangepicker();    
```            
#####  配置参数
range-picker范围选择器的可用配置参数有：

startValue：范围选择器左侧的标签。默认值为none。
endValue：范围选择器右侧的标签。默认值为none。
type：范围选择器的类型，可以是single，表示单向选择，或者是double，表示双向选择。默认值为single。例如：
```html
$("#number_range").rangepicker({
    type: "double",
    startValue: 0,
    endValue: 100,
    translateSelectLabel: function(currentPosition, totalPosition) {
        return parseInt(100 * (currentPosition / totalPosition));
    }
});
```
translateSelectLabel：获取手柄的文本，类型Function，默认值为none。
参数：

currentPosition：手柄的位置。
totalWidth：进度条的宽度。
```html
$("#number_range").rangepicker({
    startValue: 0,
    endValue: 100,
    translateSelectLabel: function(currentPosition, totalPosition) {
        return parseInt(100 * (currentPosition / totalPosition));
    }
});
```
#####  方法
getSelectValue：获取选择的范围。会返回一个对象，对象中的startLabel是开始标签，endLabel是结束标签。例如：
```html
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：左侧手柄的位置。
例如：

```html
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%");
```

web299.com

jQuery多类型范围选择器插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果