Mobile-friendly Anything Picker Plugin For jQuery - AnyPicker

AnyPicker is a jQuery plugin for building a generic picker where the users are able to select anything (dates, times, fonts, icons, etc) from a themeable, mobile-friendly picker view.

Key features:

• 4 built-in themes: Default, iOS, Android and Mobile Phone.
• 4 layouts: popup, relative, fixed and inline.
• Responsive and cross-platform.
• CSS3 powered animations.
• i18n/RTL/LTR support.
• Tons of configuration options and callbacks.
• Custom templates.

Install it via package managers:

# NPM
$ npm install anypicker

# Bower
$ bower install anypicker

Basic usage:

1. Load the jQuery AnyPicker plugin's main style sheet and a theme CSS of your choice in the document.

<!-- Font -->
<link rel="stylesheet" href="anypicker-font.css">
<!-- Core -->
<link rel="stylesheet" href="anypicker.css">
<!-- Themes -->
<link rel="stylesheet" href="anypicker-ios.css">
<link rel="stylesheet" href="anypicker-android.css">
<link rel="stylesheet" href="anypicker-windows.css">

2. Create a normal input field the picker should be appended to.

<input type="text" id="demo" readonly>

3. Load jQuery library and the jQuery AnyPicker's JavaScript file at the end of the document.

<script src="jquery.min.js"></script>
<script src="anypicker.js"></script>

4. Call the plugin to create a datetime picker for the input field.

$("#demo").AnyPicker({
  mode: "datetime"
});

5. Config the picker with the following options.

$("#demo").AnyPicker({

  // "select", "datetime"
  mode: "datetime",
  
  // parent container
  parent: "body",

  // "popup", "relative", "fixed", "inline"
  layout: "popup",

  // "left", "center", "right"
  hAlign: "left",

  // "top", "middle", "bottom"
  vAlign: "bottom",
  relativeTo: null,
  inputElement: null,
  inputChangeEvent: "onSet",

  // "de", "de-at", "fr", "nb", "ru", "zh-cn"
  lang: "",

  // true = ltr
  rtl: false,
  animationDuration: 500,

  // View Section Components Start

  setButton: 
  {
    markup: "<a id='ap-button-set' class='ap-button'>Set</a>",
    markupContentWindows: "<span class='ap-button-icon ap-icon-set'></span><span class='ap-button-text'>set</span>",
    type: "Button"
    // action: function(){}
  },

  clearButton: 
  {
    markup: "<a id='ap-button-clear' class='ap-button'>Clear</a>",
    markupContentWindows: "<span class='ap-button-icon ap-icon-clear'></span><span class='ap-button-text'>clear</span>",
    type: "Button"
    // action: function(){}
  },

  nowButton: 
  {
    markup: "<a id='ap-button-now' class='ap-button'>Now</a>",
    markupContentWindows: "<span class='ap-button-icon ap-icon-now'></span><span class='ap-button-text'>now</span>",
    type: "Button"
    // action: function(){}
  },

  cancelButton: 
  {
    markup: "<a id='ap-button-cancel' class='ap-button'>Cancel</a>",
    markupContentWindows: "<span class='ap-button-icon ap-icon-cancel'></span><span class='ap-button-text'>cancel</span>",
    type: "Button"
    // action: function(){}
  },

  headerTitle:
  {
    markup: "<span class='ap-header__title'>Select</span>",
    type: "Text",
    contentBehaviour: "Static", // Static or Dynamic
    format: "" // DateTime Format
  },

  // View Section Components End

  viewSections:
  {
    header: ["headerTitle"],
    contentTop: [],
    contentBottom: [],
    footer: ["cancelButton", "setButton"]
  },

  i18n:
  {
    headerTitle: "Select",
    setButton: "Set",
    clearButton: "Clear",
    nowButton: "Now",
    cancelButton: "Cancel",
    dateSwitch: "Date",
    timeSwitch: "Time"
  },

  // "Default", "iOS", "Android", "Windows"
  theme: "Default"
  
});

6. Callback functions.

$("#demo").AnyPicker({

  onInit: null, // ()

  onBeforeShowPicker: null, // ()
  onShowPicker: null, // ()

  onBeforeHidePicker: null, // ()
  onHidePicker: null, // ()

  parseInput: null, // ()
  formatOutput: null, // ()

  setOutput: null,
  onSetOutput: null,

  buttonClicked: null 
  
});

Change log:

2017-03-13

• Fixed Issue : Buttons not showing - Fixed,iOS

2017-03-07

• Fixed set button

---

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