a range picker of JQuery plugins
JavaScript HTML CSS
Latest commit a567d13 Mar 22, 2016 zhang 修改版本号

README.md

range-picker

a range picker of JQuery plugins

Screenshot

date-picker

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