Type Time into Inputfield

Unity Engine
1

I have a text box where the player can type in a time, and it should show in the InputField like,
11:45

The problem is, I need the text to stay in a certain format, so it has to start like,
00:00
and for every number typed, it goes like
10:00
11:00
11:40
11:45

The colon stays constant, and any blank in the format is filled in with a 0. Also, after the hours have been typed in, it immediately jumps to the minutes. Really stumped on this and need some guidance.

Thanks in advance

2

Have you tried using the InputField’s events?
Whenever input changes, validate the input to be of the specific format. Also determine the current position and move the cursor if necessary.
Another option would be a combination of two InputFields and a Label in between. You could simply check the interger-only option and clamp the values for each InputField, i.e. 0-11 (or 0-23) and 0-59.

3

I tried this method but it started typing out as
00:01
00:11
Although I was converting to float and using .ToString(“00:00”), so I was probably doing it wrong anyway.

Also thought of this method, although I’m not sure what you mean by “Label”. Is it an uninteractable Text object? In anycase, avoided this method because I didn’t know how to jump from the Hour InputField to the Minute InputField.

I like how the former of your two proposed methods sounds, although I don’t know how to implement it.

EDIT:
right now I am looking at string.Format, although I’m not sure how to use it for my situation. It has to:
Keep to the 00:00 format at all times
Jump over the colon when it passes from Hour to Minute

4

There are several overloads for time-formatting for the string.Format utility method. There is one which takes the format {0:hh:mm} or {0:HH:mm}, but it expects a System.DataTime which you have to construct, i.e. you’d parse the new input and replace it again. That way, you could just write your own formatter which doesn’t need a System.DateTime at all.
You also have the option to specify and a formatter. Maybe you find something appropriate.

Yes, my bad. It’s called Text here. :slight_smile:
You could evaluate the caretPosition or the pendant for selection-based typing (selectionAnchorPosition and selectionFocusPosition) and change to the second label when you’ve reached the end-position of the first one.

There are actually quite a ton of approaches: you can split the string using a seperator (the colon) and parse the returned substrings etc.

To get started, here’s another quick and dirty implementation for the movement/jumping using a custom validation, I haven’t tested it very much though and there might be an easier/shorter/cleaner way, but it appears to do the job for now.

Note1: You might want to set the character limit to 5.
Note2: You still need to clamp the values appropriately.

private void Awake()
{
    // TODO: set the character limit to 5 (either progrmatically or in the inspector)
    _inputFieldTime.text = "00:00";
    _inputFieldTime.onValidateInput = OnInputChanged;
}

private char OnInputChanged(string text, int index, char addedChar)
{
    if (char.IsNumber(addedChar))
    {
        if(index == 2)
        {
            _inputFieldTime.selectionAnchorPosition = 3;
            _inputFieldTime.selectionFocusPosition = 4;
        }
        else
        {
            _inputFieldTime.selectionAnchorPosition = _inputFieldTime.caretPosition;
            _inputFieldTime.selectionFocusPosition = _inputFieldTime.caretPosition + 1;
        }
        // TODO: clamp the values properly
        return addedChar;
    }
    
    return text[index];
}

Also note that this can be generalized a little more for re-use and fexiblity.