Change Time field format for mobile

App Development
1

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?

2

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.

3

Thanks Moe!

https://timepicker.co/# - https://github.com/wvega/timepicker/releases/tag/1.3.5

4

Here you go.

  1. Add this to header section of app:
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.13.18/jquery.timepicker.min.css" integrity="sha512-GgUcFJ5lgRdt/8m5A0d0qEnsoi8cDoF0d6q+RirBPtL423Qsj5cI9OxQ5hWvPi5jjvTLM/YhaaFuIeWCLi6lyQ==" crossorigin="anonymous" />

  2. Add this to footer section of app:
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.13.18/jquery.timepicker.js" 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):

image
image1594×826 43.6 KB

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' });
});

timepickergif
timepickergif1280×720 869 KB

There are loads of options you can set as you can see here:
https://www.jonthornton.com/jquery-timepicker

1 Like