Documentation | JavaScript UI

Fields

The w2form object uses w2field object for different field types. This object can also be used independently of the form. There are a number of field types the object supports. Below is an example of date and numbers fields

Example

HTML

Preview

- int
- float
- date
- color

Supported Types

clear	removes any previous type
int	integer
float	float
hex	hexdecimal
money	number in money format
alphaNumeric	alpha-numeric text
email	email address
date	date picker
list	drop down list
select	drop down list
color	color picker
enum	multi-select
upload	file upload

Most field types are simple and require no additional parameters, however date, list, enum, etc. take extra options. Below is the list of options those fields take:

date: options: { format : w2utils.settings.date_format, // date format start : '4/1/2011', // all dates before start will be unselectable end : '5/1/2011', // all dates after end will be unselectable blocked : [ '4/14/2011', '4/15/2011' ], // list of unselectable dates colored : { '4/11/2011': 'red:white' } // font and background color } list or select: options: { url : '', // url to load items, JSON: { "items": [{ "id": 1, "text": "item 1" }]; items : [], // array of items - item: { id, text } value : '', // value for the select showNone : false // shows first element - none - with empty value } enum: options: { url : '', // url to load items, JSON: { "items": [{ "id": 1, "text": "item 1" }]; items : [], // array of items - item: { id, text } selected : [], // preselected items - item: { id, text } max : 0, // maximum number of items that can be selected, 0 for unlimited maxHeight : 72, // max height for input control to grow showAll : false, // if true then show selected item in drop down maxCache : 500, // number items to cache match : 'begins with', // ['begins with', 'contains'] render : null, // render(item, selected) onShow : null, // when overlay is shown onShow(settings) onHide : null, // when overlay is hidden onHide(settings) onAdd : null, // onAdd(item, settings) onRemove : null, // onRemove(index, settings) onItemOver : null, // event when mouse over item onItemOut : null, // event when mouse out of item onItemClick : null // event when click on item } upload: options : { url : '', // not yet implemented base64 : true, // only true for now, max file size is 20mb hint : w2utils.lang('Attach files by dragging and dropping or Click to Select'), max : 0, // max number of files, 0 - unlim maxSize : 0, // max size of all files, 0 - unlim maxFileSize : 0, // max size of a single file, 0 -unlim onAdd : null, // event on item add onRemove : null, // event on item remove onItemClick : null, // event on item click onItemDblClick : null, // event on item dbl click onItemOver : null, // event on item mouse over onItemOut : null, // event on item mouse out onProgress : null, // not yet implemented onComplete : null // not yet implemented } To send this additional options, you need to pass an object with properties when you initiate field: <input type="text" size="12" id="date"> - date <script> $(function () { $('#date').w2field({ type: 'date', format: 'dd-mm-yyyy' }); }); </script>

Custom Types

If built-in types are not enough for you, there is a way you can create custom types. After you defined this type, you can apply it in the following way: