a range picker of JQuery plugins
Switch branches/tags
Clone or download
zhang
Latest commit a567d13 Mar 22, 2016

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