Change Time field format for mobile

Any CSS that I can use to change time fields into something more mobile friendly? Like something that auto pulls up the hours and minutes selector on a phone. Or pulls up the number keypad with some submasks that allows users to just type the time?

Also anyway that I can restrict the earliest and latest times that can be entered?

You can likely use any JS library out there. Do you have any inspiration of a timepicker library you want to use? I’ll try and assist you in implementing this.

Thanks Moe! -

Here you go.

  1. Add this to header section of app:
    <link rel="stylesheet" href="" integrity="sha512-GgUcFJ5lgRdt/8m5A0d0qEnsoi8cDoF0d6q+RirBPtL423Qsj5cI9OxQ5hWvPi5jjvTLM/YhaaFuIeWCLi6lyQ==" crossorigin="anonymous" />

  2. Add this to footer section of app:
    <script src="" integrity="sha512-17lKwKi7MLRVxOz4ttjSYkwp92tbZNNr2iFyEd22hSZpQr/OnPopmgH8ayN4kkSqHlqMmefHmQU43sjeJDWGKg==" crossorigin="anonymous"></script>

Next, find the component ID that has the Time field in it (in my case its component_3):

Finally paste this code into the Javascript part of your app.

TB.render('component_3', function(data) {    
    $('.t-form-time input').timepicker({ 'timeFormat': 'h:i A' });

There are loads of options you can set as you can see here:

1 Like