Mobile friendly Anything Picker Plugin Input Fields AnyPicker - Download Mobile-friendly Anything Picker Plugin For jQuery - AnyPicker

Download Mobile-friendly Anything Picker Plugin For jQuery – AnyPicker

By Posted on

This time I will share jQuery Plugin and tutorial about Mobile-friendly Anything Picker Plugin For jQuery – AnyPicker, hope it will help you in programming stack.

Mobile friendly Anything Picker Plugin Input Fields AnyPicker - Download Mobile-friendly Anything Picker Plugin For jQuery - AnyPicker
File Size: 644 KB
Views Total: 3203
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

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:

view source
1 # NPM
2 $ npm install anypicker
3  
4 # Bower
5 $ 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.

view source
1 <!-- Font -->
2 <link rel="stylesheet" href="anypicker-font.css">
3 <!-- Core -->
4 <link rel="stylesheet" href="anypicker.css">
5 <!-- Themes -->
6 <link rel="stylesheet" href="anypicker-ios.css">
7 <link rel="stylesheet" href="anypicker-android.css">
8 <link rel="stylesheet" href="anypicker-windows.css">

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

view source
1 <input type="text" id="demo" readonly>

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

view source
1 <script src="jquery.min.js"></script>
2 <script src="anypicker.js"></script>

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

view source
1 $("#demo").AnyPicker({
2   mode: "datetime"
3 });

5. Config the picker with the following options.

view source
01 $("#demo").AnyPicker({
02  
03   // "select", "datetime"
04   mode: "datetime",
05    
06   // parent container
07   parent: "body",
08  
09   // "popup", "relative", "fixed", "inline"
10   layout: "popup",
11  
12   // "left", "center", "right"
13   hAlign: "left",
14  
15   // "top", "middle", "bottom"
16   vAlign: "bottom",
17   relativeTo: null,
18   inputElement: null,
19   inputChangeEvent: "onSet",
20  
21   // "de", "de-at", "fr", "nb", "ru", "zh-cn"
22   lang: "",
23  
24   // true = ltr
25   rtl: false,
26   animationDuration: 500,
27  
28   // View Section Components Start
29  
30   setButton:
31   {
32     markup: "<a id='ap-button-set' class='ap-button'>Set</a>",
33     markupContentWindows: "<span class='ap-button-icon ap-icon-set'></span><span class='ap-button-text'>set</span>",
34     type: "Button"
35     // action: function(){}
36   },
37  
38   clearButton:
39   {
40     markup: "<a id='ap-button-clear' class='ap-button'>Clear</a>",
41     markupContentWindows: "<span class='ap-button-icon ap-icon-clear'></span><span class='ap-button-text'>clear</span>",
42     type: "Button"
43     // action: function(){}
44   },
45  
46   nowButton:
47   {
48     markup: "<a id='ap-button-now' class='ap-button'>Now</a>",
49     markupContentWindows: "<span class='ap-button-icon ap-icon-now'></span><span class='ap-button-text'>now</span>",
50     type: "Button"
51     // action: function(){}
52   },
53  
54   cancelButton:
55   {
56     markup: "<a id='ap-button-cancel' class='ap-button'>Cancel</a>",
57     markupContentWindows: "<span class='ap-button-icon ap-icon-cancel'></span><span class='ap-button-text'>cancel</span>",
58     type: "Button"
59     // action: function(){}
60   },
61  
62   headerTitle:
63   {
64     markup: "<span class='ap-header__title'>Select</span>",
65     type: "Text",
66     contentBehaviour: "Static", // Static or Dynamic
67     format: "" // DateTime Format
68   },
69  
70   // View Section Components End
71  
72   viewSections:
73   {
74     header: ["headerTitle"],
75     contentTop: [],
76     contentBottom: [],
77     footer: ["cancelButton", "setButton"]
78   },
79  
80   i18n:
81   {
82     headerTitle: "Select",
83     setButton: "Set",
84     clearButton: "Clear",
85     nowButton: "Now",
86     cancelButton: "Cancel",
87     dateSwitch: "

source : jqueryscript.net

Related posts: