Time Edit field in QML
-
I need to implement a
TimeEdit(HH:MM:SS) field in QML similar toQTimeEditin QT C++. In QML I didn't find TimeEdit and I have implemented the control similar to TimeEdit usingTextFieldand 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) } } }wrote on 15 Sept 2017, 20:55 last edited by mostefaHi @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 textYour 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 ...
-
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 textYour 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 ...
wrote on 16 Sept 2017, 08:33 last edited by Praveen_2017@mostefa Thanks it almost works but backspace is not working.
For Example : If i enter12:12:12and try to clear the value usingbackspacethen it's not working. My expectation is that it should become00:00:00. Is there any way to achieve this ? -
@mostefa Thanks it almost works but backspace is not working.
For Example : If i enter12:12:12and try to clear the value usingbackspacethen it's not working. My expectation is that it should become00:00:00. Is there any way to achieve this ?wrote on 16 Sept 2017, 09:41 last edited by@Praveen_2017 said in Time Edit field in QML:
@mostefa Thanks it almost works but backspace is not working.
For Example : If i enter12:12:12and try to clear the value usingbackspacethen it's not working. My expectation is that it should become00:00:00. Is there any way to achieve this ?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 said in Time Edit field in QML:
@mostefa Thanks it almost works but backspace is not working.
For Example : If i enter12:12:12and try to clear the value usingbackspacethen it's not working. My expectation is that it should become00:00:00. Is there any way to achieve this ?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])$ / }wrote on 16 Sept 2017, 10:03 last edited byThis post is deleted! -
@Praveen_2017 said in Time Edit field in QML:
@mostefa Thanks it almost works but backspace is not working.
For Example : If i enter12:12:12and try to clear the value usingbackspacethen it's not working. My expectation is that it should become00:00:00. Is there any way to achieve this ?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])$ / } -
wrote on 19 Sept 2017, 13:35 last edited by
@LeLev I didn't get ... Can you please explain ?
-
wrote on 19 Sept 2017, 14:18 last edited by
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
-
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.
-
wrote on 19 Sept 2017, 14:29 last edited by
@LeLev That's why I directed the rest of my comment to pra7 :)
11/13