inputopia

A framework allows you customize form input. And you can use it by HTML input tag.

Demo

Demo

Download

Compress
Uncompress

Installation

You can also install inputopia by using Bower.

bower install inputopia

Usage

You need to include dependent JavaScript and CSS files first. And you can add HTML input tag to use them.

<input type="any type registered"
  data-options="options with JSON format" 
  data-vendor="any vendor registered for this type"
  data-norender />

Examples

<!-- 
  Use default vendor(bootstrap-datetimepicker) for datetime input.
  And pass options {"format":"lll"} to bootstrap-datetimepicker
-->
<input type="datetime" data-options='{"format":"lll"}' />

<!-- Use bootstrap-datepicker for date input -->
<input type="date" data-vendor="bootstrap-datepicker" />

<!-- Use browser default color input -->
<input type="color" data-norender />

Methods

Because some plugins maybe hide the origin input, you should use input() method as the standard interface. You can access value or attribute of the input.

value(value)

Get or set input value.

value: String

Value to set. Get if undefined.

disabled(value)

Get or set input disabled attribute.

value: Boolean

Status to set. Get if undefined.

readonly(value)

Get or set input readonly attribute.

value: Boolean

Status to set. Get if undefined.

Examples

element.input('value');           // get value
element.input('value', value);    // set value
element.input('disabled');        // get disabled
element.input('disabled', true);  // set disabled
element.input('readonly');        // get readonly
element.input('readonly', true);  // set readonly

// render when creating element programmatically
element.input();

Settings

You can set up default options for specific type by this:

// set up default options for 'datetime' input type
inputopia.types.datetime.options = {
  format: 'YYYY-MM-DD HH:mm'
};

Or you want to set up default options for specific type under specific vendor:

// set up default options for 'datetime' input type under vendor 'bootstrap-datetimepicker'
inputopia.vendors['bootstrap-datetimepicker'].datetime.options = {
  format: 'YYYY-MM-DD HH:mm'
};

Options look up order is

element options > vendor default options > type default options

If you have multiple vendors with the same type, you can specify the vendor by data-vendor. The first one registered will be default vendor. You can also set up default vendor by this:

// set the 'bootstrap-datepicker' as default vendor of 'date' input type
inputopia.types.date.vendor = 'bootstrap-datepicker';

Custom Plugin

You can register your custom plugin:

inputopia.register('myplugin', 'city', {
  available: function () {
    return $.fn.autocomplete;
  },
  render: function (options) {
    options.source = function (request, response) {
      $.ajax({
        url: "http://gd.geobytes.com/AutoCompleteCity",
        dataType: "jsonp",
        data: {
          q: request.term
        },
        success: function (data) {
          response(data.length === 1 && data[ 0 ].length === 0 ? [] : data);
        }
      });
    };
    options.minLength = 3;
    $(this).autocomplete(options);
  }
});

And you can reuse it:

<input class="form-control" name="city" type="city" />

Plugins

Currently inputopia implement following plugins. You need to install the dependent libraries for the input type you want to use.

Input	Vendor	Description	Requirement
date	jquery-ui	Date Picker	jQuery UI
date	bootstrap-datepicker	Date Picker	bootstrap-datepicker
datetime	bootstrap-datetimepicker	Datetime Picker	Bootstrap 3 Datepicker
month	jquery-ui-month-picker	Month Picker	jQuery UI Month Picker
color	kolor-picker	Color Picker	kolor-picker
intl-tel	intl-tel-input	International Telephone	International Telephone Input
tags	jquery-tags-input	Tags	jQuery Tags Input
tags	bootstrap-tags-input	Tags	Bootstrap Tags Input
file	bootstrap-fileinput	File	bootstrap-fileinput
autocomplete	jquery-ui	Autocomplete	jQuery UI

License

The project is released under the MIT license.

Contact

The project's website is located at https://github.com/emn178/inputopia
Author: Chen, Yi-Cyuan (emn178@gmail.com)