load qml calendar from textField display abouve textField

[jfinn88]

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



TextField {
id: beginDateTextField
style: TextFieldUserLogStyle {}
placeholderText: qsTr("yyyy-mm-dd")
KeyNavigation.tab: endDateTextField
onAccepted: {
endDateTextField.forceActiveFocus();
endDateTextField.selectAll();
}
onFocusChanged: {
if(calendarRect1.visible == false){
view_rect.state = "CALENDARSHOW"
calendarRect1.visible = true
}
}
Rectangle {
x: 94
y: 2
anchors.right: parent.right
width: 26
height: 36
radius: 8
anchors.rightMargin: 2
border.width: 1
border.color: "#c9c9c9"
Image{
id: begingDateImage
width: 20
height: 20
anchors.centerIn: parent
source:"arrow_up.png"
}
MouseArea {
onClicked: {
//action_calendarShow.trigger()
if(calendarRect1.visible == false){
view_rect.state = "CALENDARSHOW"
calendarRect1.visible = true
}
}
}
}
}


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



Rectangle {
id: calendarRect1
width: parent.width
height: 215
Layout.fillWidth: true
anchors.top: parent.top
anchors.topMargin: 60
visible: false
Calendar {
id: calendar1
height: 230
anchors.fill: parent
style: CalendarStyle {
dayDelegate: Item {
Rectangle {
id: rect1
anchors.fill: parent
Label {
id: dayDelegateText1
text: styleData.date.getDate()
anchors.centerIn: parent
horizontalAlignment: Text.AlignRight
font.pixelSize: Math.min(parent.height/3, parent.width/3)
color: styleData.selected ? "red" : "black"
font.bold: styleData.selected
}
MouseArea {
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
width: styleData.selected ? parent.width / 2 : 0
height: styleData.selected ? parent.height / 2 : 0
Rectangle{
anchors.fill: parent
color: "transparent"
border.color: "red"
}
onClicked: {
beginDateTextField.text = Qt.formatDate(calendar1.selectedDate,"yyyy-MM-dd");
}
}
}
}
}
}
}


update: found solution:



TextField {
id: beginDateTextField
style: TextFieldUserLogStyle {}
placeholderText: qsTr("yyyy-mm-dd")
KeyNavigation.tab: endDateTextField
onAccepted: {
endDateTextField.forceActiveFocus();
endDateTextField.selectAll();
}
// onFocusChanged: {
// if(calendarRect1.visible == false){
// calendarRect1.visible = true
// }
// }
Rectangle {
x: 94
y: 2
anchors.right: parent.right
width: 26
height: 36
radius: 8
anchors.rightMargin: 2
border.width: 1
border.color: "#c9c9c9"
Image{
id: begingDateImage
width: 20
height: 20
anchors.centerIn: parent
source:"arrow_up.png"
}
MouseArea {
anchors.fill:parent
onClicked: {
if(calendarRect1.visible == false){
calendarRect1.visible = true
}
else if(calendarRect1.visible == true){
calendarRect1.visible = false
}
}
}
}
}


calendar code



Rectangle {
id: calendarRect1
x: 215
//width: parent.width
height: 200
width: 200
//Layout.fillWidth: true
anchors.top: parent.top
anchors.topMargin: 339
visible: false
Calendar {
id: calendar1
height: 230
anchors.fill: parent
style: CalendarStyle {
dayDelegate: Item {
Rectangle {
id: rect1
anchors.fill: parent
Label {
id: dayDelegate1
text: styleData.date.getDate()
anchors.centerIn: parent
horizontalAlignment: Text.AlignRight
font.pixelSize: Math.min(parent.height/3, parent.width/3)
color: styleData.selected ? "red" : "black"
font.bold: styleData.selected
}
MouseArea {
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
width: styleData.selected ? parent.width / 2 : 0
height: styleData.selected ? parent.height / 2 : 0
Rectangle{
anchors.fill: parent
color: "transparent"
border.color: "red"
}
onClicked: {
beginDateTextField.text = Qt.formatDate(calendar1.selectedDate,"yyyy-MM-dd");
}
}
}
}
}
}
}