iOS Style Picker View In Vanilla JavaScript – mobileSelect.js

Preview:

Description:

mobileSelect.js is a native JavaScript library that lets you create a mobile-first, iOS picker view-style single or cascading select popup for input fields.

See Also:

• iOS Style Spinner In JavaScript – SpinnerPickerJs
• iOS Style Wheel Picker For Mobile – Picker.js
• iOS Style Wheel picker In jQuery – Simple Wheel
• iOS Style Data picker With jQuery – iOS.picker.js
• iOS Style jQuery 3D Animated Value Selector – Drumjs

How to use it:

Download and insert the following JS & CSS files into your html document.

<link rel="stylesheet" href="mobileSelect.css">
<script src="mobileSelect.js"></script>

Create an input field that will be open a picker view sliding from the bottom of the browser window when triggered.

<input type="text" id="trigger1" placeholder="Single Selection">

Prepare your data for the picker. In this example, we’re going to create a week picker for your web app.

var weekdayArr=['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];

Create a new MobileSelect object with some options and done.

var mobileSelect1 = new MobileSelect({
    trigger: '#trigger1',
    wheels: [
      {data: weekdayArr}
    ],
});

Allow the picker to select multiple data objects:

var weekdayArr=['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
var timeArr = ['08:30','09:00','09:30','10:00','10:30','11:00','11:30','12:00','12:30','13:00','13:30','14:00','14:30','15:00','15:30','16:00','16:30','17:00','17:30','18:00','18:30','19:00','19:30','20:00','20:30','21:00'];
var numArr=['1','2','3','4','5'];

var mobileSelect1 = new MobileSelect({
    trigger: '#trigger1',
    wheels: [
      {data: weekdayArr},
      {data: timeArr},
      {data: numArr}
    ],
});

It also supports cascading datasets as shown below:

var mobileSelect1 = new MobileSelect({
    trigger: '#trigger1',
    title: 'Selector',
    cascade: true,
    wheels: [{
      data:[{
        id:'1',
        value:'Value 1',
        childs:[
          {id:'1',value:'Sub Value 1'},
          {id:'2',value:'Sub Value 2'},
          {id:'3',value:'Sub Value 3'},
          {id:'4',value:'Sub Value 4'},
          {id:'5',value:'Sub Value 5'}
      ]},
          {id:'2',value:'Value 2'},
          {id:'3',value:'Value 3'},
          {id:'4',value:'Value 4'},
          {id:'5',value:'Value 5'},
          {id:'6',value:'Value 6'}
      ]}
  ],
});

Callback functions.

var mobileSelect1 = new MobileSelect({
    // parameters: indexArr, data
    callback:function(indexArr, data){
      console.log(data);
    },
    limit:function(indexArr, data){
      console.log(data);
    }
});

API methods:

// set the title
mobileSelect1.setTitle(string)
// update the picker
updateWheel(sliderIndex, data)
// re-position the picker
locatePostion(sliderIndex, posIndex)

Changelog:

09/22/2018

• Update