Skip to content

Commit 34265aa

Browse files
gvreddy04gvreddy04
authored
NumberInput - CultureInfo updates (#617)
* NumberInput - CultureInfo updates
1 parent d998196 commit 34265aa

File tree

11 files changed

+103
-46
lines changed

11 files changed

+103
-46
lines changed

‎BlazorBootstrap.Demo.RCL/Pages/Form/NumberInput/NumberInput_Demo_02_Generic_Type.razor‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,49 @@
11
<div class="mb-3">
22
<label class="form-label">Enter int number</label>
33
<NumberInput TValue="int" @bind-Value="@amount" />
4+
<div class="mt-1">Entered Number: @amount</div>
45
</div>
56

67
<div class="mb-3">
78
<label class="form-label">Enter int? number</label>
89
<NumberInput TValue="int?" @bind-Value="@amount2" />
10+
<div class="mt-1">Entered Number: @amount2</div>
911
</div>
1012

1113
<div class="mb-3">
1214
<label class="form-label">Enter float number</label>
1315
<NumberInput TValue="float" @bind-Value="@amount3" />
16+
<div class="mt-1">Entered Number: @amount3</div>
1417
</div>
1518

1619
<div class="mb-3">
1720
<label class="form-label">Enter float? number</label>
1821
<NumberInput TValue="float?" @bind-Value="@amount4" />
22+
<div class="mt-1">Entered Number: @amount4</div>
1923
</div>
2024

2125
<div class="mb-3">
2226
<label class="form-label">Enter double number</label>
2327
<NumberInput TValue="double" @bind-Value="@amount5" />
28+
<div class="mt-1">Entered Number: @amount5</div>
2429
</div>
2530

2631
<div class="mb-3">
2732
<label class="form-label">Enter double? number</label>
2833
<NumberInput TValue="double?" @bind-Value="@amount6" />
34+
<div class="mt-1">Entered Number: @amount6</div>
2935
</div>
3036

3137
<div class="mb-3">
3238
<label class="form-label">Enter decimal number</label>
3339
<NumberInput TValue="decimal" @bind-Value="@amount7" />
40+
<div class="mt-1">Entered Number: @amount7</div>
3441
</div>
3542

3643
<div class="mb-3">
3744
<label class="form-label">Enter decimal? number</label>
3845
<NumberInput TValue="decimal?" @bind-Value="@amount8" />
46+
<div class="mt-1">Entered Number: @amount8</div>
3947
</div>
4048

4149
@code {

‎BlazorBootstrap.Demo.RCL/Pages/Form/RangeInput/RangeInputDocumentation.razor‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -46,16 +46,15 @@
4646
<div class="mb-3">The <code>Step</code> parameter is a number that specifies the granularity that the value must adhere to. Only values that match the specified stepping interval are valid.</div>
4747
<Demo Type="typeof(RangeInput_Demo_04_Step)" Tabs="true" />
4848

49+
<SectionHeading Size="HeadingSize.H2" Text="Decimals" PageUrl="@pageUrl" HashTagName="decimals" />
50+
<div class="mb-3"></div>
51+
<Demo Type="typeof(RangeInput_Demo_05_Decimals)" Tabs="false" />
52+
4953
<SectionHeading Size="HeadingSize.H2" Text="Tick marks" PageUrl="@pageUrl" HashTagName="tick-marks" />
5054
<div class="mb-3">
5155
To add tick marks to a <code>RangeInput</code>, set the <code>TickMarks</code> parameter.
5256
</div>
53-
<Demo Type="typeof(RangeInput_Demo_05_Tick_Marks)" Tabs="true" />
54-
55-
56-
<SectionHeading Size="HeadingSize.H2" Text="Decimals" PageUrl="@pageUrl" HashTagName="decimals" />
57-
<div class="mb-3"></div>
58-
<Demo Type="typeof(RangeInput_Demo_06_Decimals)" Tabs="false" />
57+
<Demo Type="typeof(RangeInput_Demo_06_Tick_Marks)" Tabs="true" />
5958
@code {
6059
private string pageUrl = "/form/range-input";
6160
private string title = "Blazor RangeInput Component";

‎BlazorBootstrap.Demo.RCL/Pages/Form/RangeInput/RangeInput_Demo_06_Decimals.razor‎ renamed to ‎BlazorBootstrap.Demo.RCL/Pages/Form/RangeInput/RangeInput_Demo_05_Decimals.razor‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<RangeInput TValue="decimal" @bind-Value="amount1" Min="0" Max="100" Step="0.01" />
2-
@amount1
2+
<div class="mt-2">@amount1</div>
3+
34
@code {
45
decimal amount1 = 0;
56
}

‎BlazorBootstrap.Demo.RCL/Pages/Form/RangeInput/RangeInput_Demo_05_Tick_Marks.razor‎ renamed to ‎BlazorBootstrap.Demo.RCL/Pages/Form/RangeInput/RangeInput_Demo_06_Tick_Marks.razor‎

File renamed without changes.

‎blazorbootstrap/Components/Form/NumberInput/NumberInput.razor‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,9 @@
88
id="@ElementId"
99
class="@ClassNames @fieldCssClasses"
1010
style="@StyleNames"
11-
value="@Value"
11+
value="@GetInvariantNumber(Value)"
12+
step="@Step?.ToString(CultureInfo.InvariantCulture)"
1213
disabled="@Disabled"
1314
placeholder="@Placeholder"
14-
step="@step"
1515
autocomplete="@autoComplete"
1616
@onchange="OnChange"/>

‎blazorbootstrap/Components/Form/NumberInput/NumberInput.razor.cs‎

Lines changed: 36 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ public partial class NumberInput<TValue> : BlazorBootstrapComponentBase
44
{
55
#region Fields and Constants
66

7+
private CultureInfo cultureInfo = default!;
8+
79
private FieldIdentifier fieldIdentifier;
810

911
private string step = default!;
@@ -24,7 +26,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
2426
{
2527
if (firstRender)
2628
{
27-
await JS.InvokeVoidAsync("window.blazorBootstrap.numberInput.initialize", ElementId, isFloatingNumber(), AllowNegativeNumbers);
29+
await JS.InvokeVoidAsync("window.blazorBootstrap.numberInput.initialize", ElementId, isFloatingNumber(), AllowNegativeNumbers, cultureInfo.NumberFormat.NumberDecimalSeparator);
2830

2931
var currentValue = Value; // object
3032

@@ -71,6 +73,15 @@ protected override async Task OnInitializedAsync()
7173

7274
step = Step.HasValue ? $"{Step.Value}" : "any";
7375

76+
try
77+
{
78+
cultureInfo = new CultureInfo(Locale);
79+
}
80+
catch (CultureNotFoundException)
81+
{
82+
cultureInfo = new CultureInfo("en-US");
83+
}
84+
7485
await base.OnInitializedAsync();
7586
}
7687

@@ -84,6 +95,20 @@ protected override async Task OnInitializedAsync()
8495
/// </summary>
8596
public void Enable() => Disabled = false;
8697

98+
private string GetInvariantNumber(TValue value)
99+
{
100+
if (value is null) return string.Empty;
101+
102+
if (value is float floatValue) return floatValue.ToString(CultureInfo.InvariantCulture);
103+
104+
if (value is double doubleValue) return doubleValue.ToString(CultureInfo.InvariantCulture);
105+
106+
if (value is decimal decimalValue) return decimalValue.ToString(CultureInfo.InvariantCulture);
107+
108+
// All numbers without decimal places work fine by default
109+
return value?.ToString() ?? string.Empty;
110+
}
111+
87112
private bool isFloatingNumber() =>
88113
typeof(TValue) == typeof(float)
89114
|| typeof(TValue) == typeof(float?)
@@ -290,23 +315,23 @@ private bool TryParseValue(object value, out TValue newValue)
290315

291316
if (typeof(TValue) == typeof(float?) || typeof(TValue) == typeof(float))
292317
{
293-
newValue = (TValue)Convert.ChangeType(value, typeof(float));
318+
newValue = (TValue)Convert.ChangeType(value, typeof(float), CultureInfo.InvariantCulture);
294319

295320
return true;
296321
}
297322
// double? / double
298323

299324
if (typeof(TValue) == typeof(double?) || typeof(TValue) == typeof(double))
300325
{
301-
newValue = (TValue)Convert.ChangeType(value, typeof(double));
326+
newValue = (TValue)Convert.ChangeType(value, typeof(double), CultureInfo.InvariantCulture);
302327

303328
return true;
304329
}
305330
// decimal? / decimal
306331

307332
if (typeof(TValue) == typeof(decimal?) || typeof(TValue) == typeof(decimal))
308333
{
309-
newValue = (TValue)Convert.ChangeType(value, typeof(decimal));
334+
newValue = (TValue)Convert.ChangeType(value, typeof(decimal), CultureInfo.InvariantCulture);
310335

311336
return true;
312337
}
@@ -362,6 +387,13 @@ private bool TryParseValue(object value, out TValue newValue)
362387

363388
private string fieldCssClasses => EditContext?.FieldCssClass(fieldIdentifier) ?? "";
364389

390+
/// <summary>
391+
/// Gets or sets the locale. Default locale is 'en-US'.
392+
/// </summary>
393+
[Parameter]
394+
//[EditorRequired]
395+
public string Locale { get; set; } = "en-US";
396+
365397
/// <summary>
366398
/// Gets or sets the max.
367399
/// Max ignored if EnableMinMax="false".

‎blazorbootstrap/Components/Form/RangeInput/RangeInput.razor.cs‎

Lines changed: 14 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,20 @@ public async Task bsOnInput(object? newValue)
104104
/// </summary>
105105
public void Enable() => Disabled = false;
106106

107+
private string GetInvariantNumber(TValue value)
108+
{
109+
if (value is null) return string.Empty;
110+
111+
if (value is float floatValue) return floatValue.ToString(CultureInfo.InvariantCulture);
112+
113+
if (value is double doubleValue) return doubleValue.ToString(CultureInfo.InvariantCulture);
114+
115+
if (value is decimal decimalValue) return decimalValue.ToString(CultureInfo.InvariantCulture);
116+
117+
// All numbers without decimal places work fine by default
118+
return value?.ToString() ?? string.Empty;
119+
}
120+
107121
private async Task HandleChangeAsync()
108122
{
109123
await ValueChanged.InvokeAsync(Value);
@@ -284,31 +298,6 @@ private void SetValue(object? newValue)
284298
Value = value;
285299
}
286300

287-
private string GetInvariantNumber(TValue value)
288-
{
289-
if (value is null)
290-
{
291-
return string.Empty;
292-
}
293-
294-
if (value is float floatValue)
295-
{
296-
return floatValue.ToString(CultureInfo.InvariantCulture);
297-
}
298-
299-
if (value is double doubleValue)
300-
{
301-
return doubleValue.ToString(CultureInfo.InvariantCulture);
302-
}
303-
304-
if (value is decimal decimalValue)
305-
{
306-
return decimalValue.ToString(CultureInfo.InvariantCulture);
307-
}
308-
309-
// All numbers without decimal places work fine by default
310-
return value?.ToString() ?? string.Empty;
311-
}
312301
private bool TryParseValue(object value, out TValue newValue)
313302
{
314303
try

‎blazorbootstrap/wwwroot/blazor.bootstrap.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -467,13 +467,15 @@ window.blazorBootstrap = {
467467
}
468468
},
469469
numberInput: {
470-
initialize: (elementId, isFloat, allowNegativeNumbers) => {
470+
initialize: (elementId, isFloat, allowNegativeNumbers, numberDecimalSeparator) => {
471471
let numberEl = document.getElementById(elementId);
472472

473473
numberEl?.addEventListener('keydown', function (event) {
474474
let invalidChars = ["e", "E", "+"];
475-
if (!isFloat)
475+
if (!isFloat) {
476476
invalidChars.push("."); // restrict '.' for integer types
477+
invalidChars.push(numberDecimalSeparator); // restrict ',' for specific culture
478+
}
477479

478480
if (!allowNegativeNumbers) {
479481
invalidChars.push("-"); // restrict '-'

‎docs/docs/04-forms/number-input.mdx‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ Blazor Bootstrap `NumberInput` component is built around HTML input of `type="nu
2525
| AutoComplete | bool | false | | Indicates whether the NumberInput can complete the values automatically by the browser. |
2626
| Disabled | bool | false | | Gets or sets the disabled. |
2727
| EnableMinMax | bool | false | | Determines whether to restrict the user input to Min and Max range. If true, restricts the user input between the Min and Max range. Else accepts the user input. |
28+
| Locale | string | `en-US` | ✔️ | Gets or sets the locale. |
2829
| Max| TValue | | | Gets or sets the max. Max ignored if EnableMinMax="false". |
2930
| Min| TValue | | | Gets or sets the min. Min ignored if EnableMinMax="false". |
3031
| Placeholder | string? | null | | Gets or sets the placeholder. |
@@ -36,8 +37,8 @@ Blazor Bootstrap `NumberInput` component is built around HTML input of `type="nu
3637

3738
| Name | Description |
3839
|:--|:--|
39-
| Disable | Disables number input. |
40-
| Enable | Enables number input. |
40+
| Disable() | Disables number input. |
41+
| Enable() | Enables number input. |
4142

4243
## Events
4344

@@ -75,45 +76,53 @@ By default, `e + -` are blocked. For all integral numeric types, dot `.` is bloc
7576

7677
<img src="https://i.imgur.com/iUNBkki.png" alt="Blazor Bootstrap: Number Input Component - Generic type" />
7778

78-
```cshtml {3,8,13,18,23,28,33,38} showLineNumbers
79+
```cshtml {3,9,15,21,27,33,39,45} showLineNumbers
7980
<div class="mb-3">
8081
<label class="form-label">Enter int number</label>
8182
<NumberInput TValue="int" @bind-Value="@amount" />
83+
<div class="mt-1">Entered Number: @amount</div>
8284
</div>
8385
8486
<div class="mb-3">
8587
<label class="form-label">Enter int? number</label>
8688
<NumberInput TValue="int?" @bind-Value="@amount2" />
89+
<div class="mt-1">Entered Number: @amount2</div>
8790
</div>
8891
8992
<div class="mb-3">
9093
<label class="form-label">Enter float number</label>
9194
<NumberInput TValue="float" @bind-Value="@amount3" />
95+
<div class="mt-1">Entered Number: @amount3</div>
9296
</div>
9397
9498
<div class="mb-3">
9599
<label class="form-label">Enter float? number</label>
96100
<NumberInput TValue="float?" @bind-Value="@amount4" />
101+
<div class="mt-1">Entered Number: @amount4</div>
97102
</div>
98103
99104
<div class="mb-3">
100105
<label class="form-label">Enter double number</label>
101106
<NumberInput TValue="double" @bind-Value="@amount5" />
107+
<div class="mt-1">Entered Number: @amount5</div>
102108
</div>
103109
104110
<div class="mb-3">
105111
<label class="form-label">Enter double? number</label>
106112
<NumberInput TValue="double?" @bind-Value="@amount6" />
113+
<div class="mt-1">Entered Number: @amount6</div>
107114
</div>
108115
109116
<div class="mb-3">
110117
<label class="form-label">Enter decimal number</label>
111118
<NumberInput TValue="decimal" @bind-Value="@amount7" />
119+
<div class="mt-1">Entered Number: @amount7</div>
112120
</div>
113121
114122
<div class="mb-3">
115123
<label class="form-label">Enter decimal? number</label>
116124
<NumberInput TValue="decimal?" @bind-Value="@amount8" />
125+
<div class="mt-1">Entered Number: @amount8</div>
117126
</div>
118127
```
119128

@@ -464,4 +473,4 @@ This event fires on every user keystroke that changes the `NumberInput` value.
464473
}
465474
```
466475

467-
[See demo here](https://demos.blazorbootstrap.com/form/number-input#event-value-changed)
476+
[See demo here](https://demos.blazorbootstrap.com/form/number-input#event-value-changed)

‎docs/docs/04-forms/range-input.mdx‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -224,10 +224,27 @@ The `Step` parameter is a number that specifies the granularity that the value m
224224

225225
[See demo here](https://demos.blazorbootstrap.com/form/range-input#step)
226226

227+
### Decimals
228+
229+
<img src="https://i.imgur.com/Z6v6dqw.png" alt="Blazor Bootstrap: Range Input Component - Decimals" />
230+
231+
```cshtml {} showLineNumbers
232+
<RangeInput TValue="decimal" @bind-Value="amount1" Min="0" Max="100" Step="0.01" />
233+
<div class="mt-2">@amount1</div>
234+
```
235+
236+
```cs {} showLineNumbers
237+
@code {
238+
decimal amount1 = 0;
239+
}
240+
```
241+
242+
[See demo here](https://demos.blazorbootstrap.com/form/range-input#decimals)
243+
227244
### Tick marks
228245

229246
To add tick marks to a `RangeInput`, set the `TickMarks` parameter.
230-
`
247+
231248
<img src="https://i.imgur.com/dcMBuxT.png" alt="Blazor Bootstrap: Range Input Component - Tick marks" />
232249

233250
```cshtml {3} showLineNumbers

0 commit comments

Comments
 (0)