#easyNumbers
###Benefits
- You can easily change numbers in inputs.
- Operated increment or decrement of input value by define buttons.
- Easily set readonly, format and validation of input value.
##Requirements
- If you want use easyNumbers to date or time value, you need link Moment.js to your project.
##Installation
###Step 1: Install
npm install easynumber
###Step 2: Add module in ES6
import easynumber from 'easynumber';
###Step 3: Call the easyNumber
$('.quantity').easyNumber()
##Default options
defaults = {
plus: '+',
minus: '-',
readonly: true,
allowNegative: false,
dateFormat: 'DD-MM-YYYY',
timeFormat: 'HH:mm',
type: 'int',
validation: false,
zero: null
};
##Configuration options
plus It's a button to increment the value.
default: '+'
options: string
example: 'plus'
minus It's a button to decrement the value.
default: '-'
options: string
example: 'minus'
readonly Sets up read only options to your input.
default: 'true'
options: boolean
allowNegative Allows to set negative numbers in input.
default: false
options: bool
dateFormat Sets up yours date format.
default: 'DD-MM-YYYY'
options: string
example: '20-11-2015'
timeFormat Sets up yours time format.
default: 'HH:mm'
options: string
example: '12:59'
type Sets up type of input and increments, decrements value.
default: 'int'
options: int, data, time
validation Check that user introduces right value input.
default: 'false'
option: numbers
zero Sets up starts input value.
default: null
options: number
##Alternative configuration
You can pass configuration options in data attribute of input element:
<input type="number" class="quantity" data-options='{"min": "minus", "max": "maximum"}'>
##Addictiona options
There are additional configuration options passed by data attribute on individual input
- Allowed float values on input
<input data-qty-float-val="true" class="quantity" type="text">
- Changed incrementation value.
<input data-qty-for-change="10" class="quantity" type="text">
##Full features example
$(document).ready(function(){
$('.quantity').easyNumbers({
plus: 'plus',
minus: 'minus',
readonly: true,
allowNegative: true,
dateFormat: 'DD-MM-YYYY',
timeFormat: 'HH:mm',
type: 'int',
validation: 'true',
zero: null
});
});