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
<h2>Numeric input basic usage</h2>
@(Html.Awe().NumericInput(new NumericInputOpt { Name = "Numeric", Placeholder = "numbers" }))

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

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

<h2>Big spin buttons, no focus on spin, readonly input</h2>
@(Html.Awe().NumericInput(new NumericInputOpt {
Name = "NumericNoFocus",
Value = 1,
BigSpinButtons = true,
NoFocusOnSpin = true,
ReadonlyInput = true
}))

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

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

@(Html.Awe().NumericInput(
new NumericInputOpt
{
Name = "PriceUSD",
Value = 20,
FormatFunc = "aweUtils.prefix('$')",
Decimals = 2
}))

<h2>Initial value formatting</h2>
@{
decimal decval = 325.0000M;
}
@(Html.Awe().NumericInput(
new NumericInputOpt
{
Name = "price1",
Svalue = decval.ToString("0.00"),
Decimals = 2
}))

<h2>Duration</h2>
@(Html.Awe().NumericInput(
new NumericInputOpt
{
Name = "Duration",
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