zhangtasdq / range-picker

a range picker of JQuery plugins

#range-picker

a range picker of JQuery plugins

Screenshot

Examples

1. see sample folder
2. jsfiddle

Browser Support

1. chrome
2. firefox
3. IE8+

Requirements

1. JQuery 1.7+

Usage

###Install

######download

download range-picker

######bower

bower install --save range-picker

###Import css

<link rel="stylesheet" href="../css/range-picker.css" type="text/css" charset="utf-8" />

###Import javascript

<script src="../bower_components/jquery/dist/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="../src/range_picker.js" type="text/javascript" charset="utf-8"></script>

###Call

$("#date_picker").rangepicker();

Options

####startValue

default: none

require: true

the left label. eg: "2016/01/03"

####endValue

default: none

require: true

the right label. eg: "2016/03/12"

####type

type: String

default: single

require: false

Choose picker type, could be single - for one cursor, or double for two cursors

######example

$("#number_range").rangepicker({
    type: "double",
    startValue: 0,
    endValue: 100,
    translateSelectLabel: function(currentPosition, totalPosition) {
        return parseInt(100 * (currentPosition / totalPosition));
    }
});

####translateSelectLabel

type: Function

default: none

require: true

######parameter

1. currentPosition cursor position
2. totalWidth the width of process bar

get the text for cursor

######example

$("#number_range").rangepicker({
    startValue: 0,
    endValue: 100,
    translateSelectLabel: function(currentPosition, totalPosition) {
        return parseInt(100 * (currentPosition / totalPosition));
    }
});

Function

####getSelectValue

get selected range

###updatePosition

######parameter

1. endPosition the right cursor position
2. startPosition the left cursor position

set the cursor position

######example

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

Build

First, get a copy of the git repo by running:

git clone https://git.oschina.net/syjefbz/range-picker.git

Enter the directory and install the dependencies:

cd range-picker && npm install && bower install

Build

grunt

Test

grunt test