Multiple Element Picker Plugin For jQuery - multiPicker

multiPicker is a tiny jQuery plugin to create a generic picker interface which enables you to select multiple elements like a range picker.

How to use it:

1. Load the latest version of jQuery library and the jQuery multiPicker plugin's files in the html document.

<link rel="stylesheet" href="multipicker.css"></script>

<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="multipicker.js"></script>

2. The HTML to create a basic date range picker.

<ul id="checklist" class="checklist">
  <li data-value="Sunday">Su</li>
  <li data-value="Monday">Mo</li>
  <li data-value="Tuesday">Tu</li>
  <li data-value="Wednesday">We</li>
  <li data-value="Thursday">Th</li>
  <li data-value="Friday">Fr</li>
  <li data-value="Saturday">Sa</li>
</ul>

<input type="hidden" name="multi-picker" value="">

3. Initialize the picker plugin.

$("#checklist").multiPicker({

  // input name
  inputName: "multi-picker",// default 

  // text, index, or html attribute, default index
  valueSource: "text",        

  // array or single value
  prePopulate: ["Tu"],  

  // is a single picker?
  isSingle: false,  

  // callbacks   
  onInit: function() {
    // do something
  },

  onSelect: function(item, value) {
    // do something
  },

  onUnselect: function(item, value) {
    // do something
  }
  
});

Change logs:

2017-12-25

• Minor optimization in selectors

2016-12-07

• Prevent scroll for touch devices while selecting picker items.

2016-12-06

• added touch support.

2016-10-28

• Replaced Object.assign by $.extend to resolve IE compatibility issue

2016-10-17

• JS rebuild

2016-10-10

• bugfix

2016-08-22

• Enable initialization using any jquery selector (not only an id), bulk initialize.

2016-08-21

• Added styles to prevent text selection on mac/ios devices

2016-07-23

• Make it possible to add disabled items with disabled property, not only inputs disabled attribute.
• Fix disabled string for checkboxes bug.

2016-07-20

• Minor optimization in update classes method.

2016-06-08

• v1.0.1: Added compressed versions of .css and .js, refactor.

2016-03-29

• Added generate styles functionality which allows to specify css custom styles for picker and its elements.

2016-02-29

• Make it possible to replace ul / li with other container / item tags, add basic css sizes( small, medium, large), add css quadratic option, create new input if not found, instead of throw warning, refactor.

2016-02-24

• Added crossbrowser mouse pressed event handling, bug fix

2016-02-18

• bug fix

2015-10-29

• Call select on mouse move bug fix

---

This awesome jQuery plugin is developed by styopdev. For more Advanced Usages, please check the demo page or visit the official website.