MaskedTextBox with InputType

0
0

Hi,

Is it possible to have an InputType property added to the MaskedTextBox control?  Or, can an input mask be applied to a text box which already has the InputType property?

A use case could be where we need users to enter a time, so if they load the page/form up on their mobile device, the time wheel/picker will appear allowing the user to easily change the time value, but if the same page loads on a desktop machine, then just the time mask will appear allowing the user to TAB into the textbox control and enter the time.

The same would be true for date fields, i.e. on a mobile device, setting the InputType to date would show the date picker (scroller wheels on iPhone), whereas on a desktop machine it would show the date picker drop down calendar.

Small customisations like this will help with building a responsive web app that will be able to cater for both desktop and mobile devices without the need to ‘swap’ controls at runtime based on the user device.

New Feature
Share
  • You must to post comments
Filter
Sort by: Recently Active
0
0

Hi Andrew,

thanks for bringing this to our attention. I could reproduce and logged issue WJ-8348 for it.
We´ll inform you when a fix is available.

Best regards
Frank

  • You must to post comments
0
0

Hi Andrew,

thank you. I have logged WJ-8267 for this enhancement request.

Best regards
Frank

  • Andrew Hills
    Hi Frank, Thanks for getting that change made to the MaskedTextBox. I have just been testing this and noticed some odd behaviour. If I set a MaskedTextBox or TextBox to InputType=Date, I then lose the ability to set the Text property. When I try to set the Text property it just displays dd/mm/yyyy. I can’t see any other properties that I could use to set the value. If I change the MaskedTextBox or TextBox InputType back to Text, then the control Text property can be set as expected however the problem with keeping the InputType set to Text is that when it’s run on a mobile device, the scroll calendar no longer shows up making it a bit tricky for the user to enter a date. For my use case, an existing date is loaded from the database which needs to populate this MaskedTextBox or TextBox control. The user can edit this date value if required with the new value saved back to the database. Could you have a look at this one please? Hopefully i’m just missing something obvious.
  • Luca (ITG)
    The input type is managed by the browser. For the date type you have to set the value using the yyyy-mm-dd format. The value is displayed using the browser’s locale. See https://www.w3schools.com/html/html_form_input_types.asp and https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date.
  • Andrew Hills
    Hi Luca, I see what you mean. If I set the value in code using yyyy-MM-dd format, it works, which is great, just have to remember to set it explicitly in code. Just thinking about this further, in the text/masked text box InputType property, would it be possible to add a Value property, so you would have Type, Min, Max, Step and Value? When we want to apply a value to that control, we apply it to the Value property and depending on the Type selected, the Value is cast to that Type, which in turn updates the Text property. That way we can throw any date at it and it will cast and display it. Maybe if there was a custom format property in there somewhere, it could be set the Value, apply Format, display in Text. The reverse would also apply, user sets the Text which is cast as Type to the Value where we can retrieve and save back to the db.
  • Luca (ITG)
    Adding a Value property is possible indeed. We’ll look into this further. However the displayed (and input pattern) format cannot be changed, it’s entirely managed by the browser.
  • You must to post comments
Showing 2 results
Your Answer

Please first to submit.