Time Edit field in QML

pra7

I need to implement a TimeEdit(HH:MM:SS) field in QML similar to QTimeEdit in QT C++. In QML I didn't find TimeEdit and I have implemented the control similar to TimeEdit using TextField and if I add inputMask then the Regular expression is not at all validated, Is there any way that I can achieve this? Following is the code.

import QtQuick 2.7
    import QtQuick.Window 2.2
    import QtQuick.Controls 2.2
    
    Window {
        visible: true
        width: 640
        height: 480
        title: qsTr("Time Edit")
    
        TextField{
            id:textEditTD
            text : ""
            inputMethodHints: Qt.ImhDigitsOnly
    
            inputMask: "dd:dd:dd; "
            validator: RegExpValidator { regExp: /^([0-1]?[0-9]|2[0-3]):([0-5][0-9]):[0-5][0-9]$ / }
    
            width:100
            height:50
            background:Rectangle{
                color:"transparent"
                border.color: "red"
                border.width:2
                radius:(width * 0.05)
            }
        }
    }

mostefa

@pra7

Hi @pra7

Your code is correct but you have to add an input mask also

inputMask: "99:99:99"//input mask
text: "00:00:00" //default text

Your code will code to something like this:

import QtQuick 2.7
    import QtQuick.Window 2.2
    import QtQuick.Controls 2.2

    Window {
        visible: true
        width: 640
        height: 480
        title: qsTr("Time Edit")

        TextField{
            id:textEditTD
            text : "00:00:00"
            inputMask: "99:99:99"
            inputMethodHints: Qt.ImhDigitsOnly
            validator: RegExpValidator { regExp: /^([0-1]?[0-9]|2[0-3]):([0-5][0-9]):[0-5][0-9]$ / }

            width:100
            height:50
            background:Rectangle{
                color:"transparent"
                border.color: "red"
                border.width:2
                radius:(width * 0.05)
            }
        }
    }

This should work ...

Praveen_2017

@mostefa Thanks it almost works but backspace is not working.
For Example : If i enter 12:12:12 and try to clear the value using backspace then it's not working. My expectation is that it should become 00:00:00. Is there any way to achieve this ?

mostefa

@Praveen_2017 said in Time Edit field in QML:

@mostefa Thanks it almost works but backspace is not working.
For Example : If i enter 12:12:12 and try to clear the value using backspace then it's not working. My expectation is that it should become 00:00:00. Is there any way to achieve this ?

Hi @Praveen_2017

What if you match backspace for each digits in your expressions?

You have to change your regExp on your validator to something like this:

validator: RegExpValidator { regExp: /^([0-1\s]?[0-9\s]|2[0-3\s]):([0-5\s][0-9\s]):([0-5\s][0-9\s])$ / }

Praveen_2017

This post is deleted!

pra7

@mostefa Thanks !!!it's working :-)

ODБOï

@pra7 Go SOLVED

pra7

@LeLev I didn't get ... Can you please explain ?

ODБOï

Im not regExp pro but this is working
TextField{
id:textEditTD
text : "00:00:00"
inputMask: "99:99:99"
inputMethodHints: Qt.ImhDigitsOnly
validator: RegExpValidator { regExp: /^([0-1\s]?[0-9\s]|2[0-3\s]):([0-5\s][0-9\s]):([0-5\s][0-9\s])$ / }

          width:100
          height:50
      }

LA

Eeli K

@LeLev Maybe @pra7 meant "Go SOLVED"... which means marking a topic as solved so that others can see the original problem was solved in the thread. It's under "Topic Tools" menu for the one who has started the thread.

ODБOï

@Eeli-K this is @pra7 s topic not mine ^^

Eeli K

@LeLev That's why I directed the rest of my comment to pra7 :)

ODБOï

@Eeli-K sorry I have read your comment incorrectly :p

Solved Time Edit field in QML