TextBox(type='time') (or anything else that HTML supports)

Feature Requests
1

Is there a way to create a TextBox of a type different than what is offered in design mode? Just changing the type dynamically won’t work.

I guess I could change this from js, but why not just create the input field of a type that is passed to the constructor? Almost any browser will offer a nice input gadget based on type.

from anvil import *

class Playground(PlaygroundTemplate):
  def __init__(self, **properties):
    # Set Form properties and Data Bindings.
    self.init_components(**properties)

    number_box = TextBox(type='text')
    self.add_component(number_box)
    number_box.type = 'number'
    print(number_box.type) # number, works as expeted
    # result input is of type 'number'
    # <input type="number" class="form-control to-disable anvil-text-box anvil-spacing-above-small anvil-spacing-below-small align-left belongs-to-INLLIM anvil-component" placeholder="" style="text-align: left;">
    
    time_box = TextBox(type='text')
    self.add_component(time_box)
    time_box.type = 'time'
    print(time_box.type) # time, does not work as expeted
    # result input is of type 'text'
    # <input type="text" class="form-control to-disable anvil-text-box anvil-spacing-above-small anvil-spacing-below-small align-left belongs-to-INLLIM anvil-component" placeholder="" style="text-align: left;">
    
    real_time_box = TextBox(type='time')
    self.add_component(real_time_box)
    print(real_time_box.type) # BUMMER!
    # result input is of type 'text'
    # <input type="text" class="form-control to-disable anvil-text-box anvil-spacing-above-small anvil-spacing-below-small align-left belongs-to-INLLIM anvil-component" placeholder="" style="text-align: left;">
2

I think this should be a feature request… on dev tools you can manually change the type of the input, and it behaves as expected.

I guess Anvil currently only supports the types listed in the design view…

As a workaround - maybe you could set up an anvil-role for TextBox called time
then have a js function like:

function change_type(){
$(['anvil-role=time']).attr('type','time');
};

then in your form show event:

anvil.js.call_js('change_type')

Any time you want to change the types dynamically to time, change the role instead and call the js function.

2 Likes
3

Moving to Feature Requests.

1 Like
4

TextBox currently offers following types: text, number, email, tel, url. Only text, number and url types create coresponding input tags. What is the purpose of email and tel?

5

My understanding is that on mobile devices, which have a pop-up keyboard, this helps the device pop-up the appropriate keyboard, e.g., with just digits (for a phone#), or with an @ sign (for emails).

6

@p.colbert, I would expect that too. However, TextBox(type='tel') will create input tag of type text (<Input type="text" ... >) and there is no benefit of appropriate keyboard.