Special inputs

File input

Simple file input styling: just add the class file and the plugin will handle styling the input:

<input type="file" class="file">

Note that the plugin will trim file path when displaying text, as some browsers return a fake path when retrieving the input value. But hey, the value is more readable this way!

Value input

The number input provides an easy value selector for the user. Depending on the device, it will change shape to maximize usability: touch devices get big buttons on each sides of the inputs, mouse devices get smaller buttons and keyboard controls (up and down arrows to change value, use shift for larger increments).

- +

<span class="number input margin-right">
	<button type="button" class="button number-down">-</button>
	<input type="text" value="320" size="3" class="input-unstyled">
	<button type="button" class="button number-up">+</button>
</span>

Note: the attribute size is set only to limit the input width, you may change its value to whatever you want or even omit it.

This example uses a specific configuration: from 15 to 30, increments of 0.5 (5 if holding shift key) and a precision of 0.25.

- +

<span class="number input margin-right">
	<button type="button" class="button number-down">-</button>
	<input type="text" value="20" size="4" class="input-unstyled" data-number-options='{"min":15,"max":30,"increment":0.5,"shiftIncrement":5,"precision":0.25}'>
	<button type="button" class="button number-up">+</button>
</span>

Methods

$(selector).setNumber(value)

Set the value of a number input

Parameters

@param number value the value to set

$(selector).incrementNumber(up, shift)

Increment/decrement the value of a number input

Parameters

@param boolean up true if the value should be incremented, false for decremented
@param boolean shift whether to use shiftIncrement or not (optional, default: false)

Options reference

The defaults may be modified at runtime in $.fn.setNumber.defaults, and options may be passed inline using the data-number-options attribute

min

Minimum value (null for none)
Type: number|null
Default: null

max

Maximum value (null for none)
Type: number|null
Default: null

increment

Increment of up/down arrows and keys
Type: number
Default: 1

shiftIncrement

Increment of up/down arrows and keys when holding shift key
Type: number
Default: 10

precision

Precision of the value: the user input will be rounded using it.
For instance, use 1 for rounded nombers, 0.25 to user quarter increments...
Type: number
Default: 1

decimalPoint

Character used for decimal point
Type: string
Default: '.'

thousandsSep

Character used for thousands separator
Type: string
Default: ''

Datepicker

This is an example datepicker using the external plugin glDatePicker:

<span class="input">
	<span class="icon-calendar"></span>
	<input type="text" class="input-unstyled datepicker" value="">
</span>

To activate the datepicker, use this code:

$('.datepicker').glDatePicker({ zIndex: 100 });

Since v1.5, the template includes 2 stylesheets:

• developr.css: fluid size calendar (new default behavior for the plugin)
• developr.fixed.css: fixed size calendar, same as old version

The new fluid design may not fit in every project, hence the two stylesheets. But you can mix both sizes too: include developr.css (so datepickers will be fluid by default), and initialize the plugin like this for datepickers which require a fixed size:

$('.datepicker').glDatePicker({
	cssName: 'default fixed',
	zIndex: 100
});

For more details on the plugin and how to use it, go to http://glad.github.io/glDatePicker/.