Results 1 to 1 of 1

Thread: load qml calendar from textField display abouve textField

  1. #1
    Join Date
    Jun 2016
    Posts
    99
    Thanks
    18
    Thanked 1 Time in 1 Post
    Qt products
    Qt5
    Platforms
    Unix/X11

    Default load qml calendar from textField display abouve textField

    I added a image to a textField obj and then added a mouse area to the image, I want this mouseArea to display the calendar above the textField and not sure if using a loader and a component would be the right way or hiding and showing the calendar in a rect....

    textField code

    Qt Code:
    1. TextField {
    2. id: beginDateTextField
    3. style: TextFieldUserLogStyle {}
    4. placeholderText: qsTr("yyyy-mm-dd")
    5. KeyNavigation.tab: endDateTextField
    6. onAccepted: {
    7. endDateTextField.forceActiveFocus();
    8. endDateTextField.selectAll();
    9. }
    10. onFocusChanged: {
    11. if(calendarRect1.visible == false){
    12. view_rect.state = "CALENDARSHOW"
    13. calendarRect1.visible = true
    14. }
    15. }
    16. Rectangle {
    17. x: 94
    18. y: 2
    19. anchors.right: parent.right
    20. width: 26
    21. height: 36
    22. radius: 8
    23. anchors.rightMargin: 2
    24. border.width: 1
    25. border.color: "#c9c9c9"
    26. Image{
    27. id: begingDateImage
    28. width: 20
    29. height: 20
    30. anchors.centerIn: parent
    31. source:"arrow_up.png"
    32. }
    33. MouseArea {
    34. onClicked: {
    35. //action_calendarShow.trigger()
    36. if(calendarRect1.visible == false){
    37. view_rect.state = "CALENDARSHOW"
    38. calendarRect1.visible = true
    39. }
    40. }
    41. }
    42. }
    43. }
    To copy to clipboard, switch view to plain text mode 

    current calendar code (not sure if I should move to component and load it or display on top of current qml) ?

    Qt Code:
    1. Rectangle {
    2. id: calendarRect1
    3. width: parent.width
    4. height: 215
    5. Layout.fillWidth: true
    6. anchors.top: parent.top
    7. anchors.topMargin: 60
    8. visible: false
    9. Calendar {
    10. id: calendar1
    11. height: 230
    12. anchors.fill: parent
    13. style: CalendarStyle {
    14. dayDelegate: Item {
    15. Rectangle {
    16. id: rect1
    17. anchors.fill: parent
    18. Label {
    19. id: dayDelegateText1
    20. text: styleData.date.getDate()
    21. anchors.centerIn: parent
    22. horizontalAlignment: Text.AlignRight
    23. font.pixelSize: Math.min(parent.height/3, parent.width/3)
    24. color: styleData.selected ? "red" : "black"
    25. font.bold: styleData.selected
    26. }
    27. MouseArea {
    28. anchors.horizontalCenter: parent.horizontalCenter
    29. anchors.verticalCenter: parent.verticalCenter
    30. width: styleData.selected ? parent.width / 2 : 0
    31. height: styleData.selected ? parent.height / 2 : 0
    32. Rectangle{
    33. anchors.fill: parent
    34. color: "transparent"
    35. border.color: "red"
    36. }
    37. onClicked: {
    38. beginDateTextField.text = Qt.formatDate(calendar1.selectedDate,"yyyy-MM-dd");
    39. }
    40. }
    41. }
    42. }
    43. }
    44. }
    45. }
    To copy to clipboard, switch view to plain text mode 

    update: found solution:

    Qt Code:
    1. TextField {
    2. id: beginDateTextField
    3. style: TextFieldUserLogStyle {}
    4. placeholderText: qsTr("yyyy-mm-dd")
    5. KeyNavigation.tab: endDateTextField
    6. onAccepted: {
    7. endDateTextField.forceActiveFocus();
    8. endDateTextField.selectAll();
    9. }
    10. // onFocusChanged: {
    11. // if(calendarRect1.visible == false){
    12. // calendarRect1.visible = true
    13. // }
    14. // }
    15. Rectangle {
    16. x: 94
    17. y: 2
    18. anchors.right: parent.right
    19. width: 26
    20. height: 36
    21. radius: 8
    22. anchors.rightMargin: 2
    23. border.width: 1
    24. border.color: "#c9c9c9"
    25. Image{
    26. id: begingDateImage
    27. width: 20
    28. height: 20
    29. anchors.centerIn: parent
    30. source:"arrow_up.png"
    31. }
    32. MouseArea {
    33. anchors.fill:parent
    34. onClicked: {
    35. if(calendarRect1.visible == false){
    36. calendarRect1.visible = true
    37. }
    38. else if(calendarRect1.visible == true){
    39. calendarRect1.visible = false
    40. }
    41. }
    42. }
    43. }
    44. }
    To copy to clipboard, switch view to plain text mode 

    calendar code

    Qt Code:
    1. Rectangle {
    2. id: calendarRect1
    3. x: 215
    4. //width: parent.width
    5. height: 200
    6. width: 200
    7. //Layout.fillWidth: true
    8. anchors.top: parent.top
    9. anchors.topMargin: 339
    10. visible: false
    11. Calendar {
    12. id: calendar1
    13. height: 230
    14. anchors.fill: parent
    15. style: CalendarStyle {
    16. dayDelegate: Item {
    17. Rectangle {
    18. id: rect1
    19. anchors.fill: parent
    20. Label {
    21. id: dayDelegate1
    22. text: styleData.date.getDate()
    23. anchors.centerIn: parent
    24. horizontalAlignment: Text.AlignRight
    25. font.pixelSize: Math.min(parent.height/3, parent.width/3)
    26. color: styleData.selected ? "red" : "black"
    27. font.bold: styleData.selected
    28. }
    29. MouseArea {
    30. anchors.horizontalCenter: parent.horizontalCenter
    31. anchors.verticalCenter: parent.verticalCenter
    32. width: styleData.selected ? parent.width / 2 : 0
    33. height: styleData.selected ? parent.height / 2 : 0
    34. Rectangle{
    35. anchors.fill: parent
    36. color: "transparent"
    37. border.color: "red"
    38. }
    39. onClicked: {
    40. beginDateTextField.text = Qt.formatDate(calendar1.selectedDate,"yyyy-MM-dd");
    41. }
    42. }
    43. }
    44. }
    45. }
    46. }
    47. }
    To copy to clipboard, switch view to plain text mode 
    Last edited by jfinn88; 22nd September 2016 at 23:05.

Similar Threads

  1. Showing Android keyboard from QML TextField
    By MarkoSan in forum Qt Quick
    Replies: 4
    Last Post: 20th January 2016, 07:48
  2. Validate TextField
    By porterneon in forum Qt Quick
    Replies: 0
    Last Post: 12th November 2014, 15:57
  3. Syncing Android Calendar with our own calendar?
    By Awareness in forum Qt for Embedded and Mobile
    Replies: 0
    Last Post: 16th February 2014, 20:17
  4. TextField Completer
    By folibis in forum Qt Quick
    Replies: 1
    Last Post: 23rd December 2013, 13:44
  5. Replies: 0
    Last Post: 24th January 2012, 07:07

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Digia, Qt and their respective logos are trademarks of Digia Plc in Finland and/or other countries worldwide.