Time Edit field in QML



  • 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)
                }
            }
        }
    
    


  • @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 ...



  • @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 ?



  • @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])$ / }
    


  • This post is deleted!


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



  • @pra7 Go SOLVED



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



  • 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



  • @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.



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



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



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


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.