Numeric input

Numeric input basic usage

Numeric allow negative

Numeric with decimals

Big spin buttons, no focus on spin, readonly input

Decimals and custom format





Initial value formatting

Duration




NumericInput/Index.cshtml
Basic usage:<br />
@(Html.Awe().NumericInput(new NumericInputOpt { Name = "Numeric", Placeholder = "numbers" }))
<br />
<br />

Numeric allow negative:<br />
@(Html.Awe().NumericInput(new NumericInputOpt { Name = "NumericNeg", AllowNegative = true, Value = -15 }))
<br />
<br />

Numeric with decimals:<br />
@(Html.Awe().NumericInput(new NumericInputOpt { Name = "NumericDec", AllowDecimals = true, Value = 1.2 }))

<br />
<br />

Decimals and custom format:<br />
@(Html.Awe().NumericInput(
new NumericInputOpt
{
Name = "Number",
Value = 11.23,
ClearBtn = true,
FormatFunc = "utils.postfix('GBP')",
Decimals = 2,
Step = 0.01
}))
<br />
<br />

@(Html.Awe().NumericInput(
new NumericInputOpt
{
Name = "Percent",
Value = 0.1,
FormatFunc = "utils.percent",
Decimals = 2,
Step = 0.01,
Max = 1
}))
<br />
<br />

@(Html.Awe().TextBox("PriceUSD")
.Value(20)
.FormatFunc("utils.prefix('$')")
.Numeric(o => o.Decimals(2)))
<br />
<br />

Duration:<br />
@(Html.Awe().TextBox("Duration")
.Numeric(o => o.Step(10))
.Value(90)
.FormatFunc("duration('hour', 'hours', 'min')"))
<br />
<br />

<script>
function duration(hourw, hoursw, minw) {
return function (val) {
var mval = parseInt(val, 10);
if (isNaN(mval)) return val;
var hour = Math.floor(mval / 60);
var minute = mval % 60;
var res = "";
if (hour > 0) {
res += hour + " " + (hour > 1 ? hoursw : hourw);
}
if (minute > 0) {
res += " " + minute + " " + minw;
}
return res;
};
};
</script>



Comments