最近在qml 中用到了 日期选择功能, 发现Qt 提供的calendar 不太好用,于是自己将calendar 加工了一下。
Datepicker.qml
import QtQuick 2.0
import QtQuick.Controls 1.2
TextField
{
property string dateValue
Calendar{
id: calendar
anchors.topMargin: 0
anchors.top: parent.bottom
visible: false
activeFocusOnTab: true
onReleased: {
text = date;
text = text.substr(0, 10);
dateValue = text;
visible = false;
}
}
Button{
id: downBtn
width: 22
anchors.right: parent.right
anchors.rightMargin: 0
anchors.bottom: parent.bottom
anchors.bottomMargin: 0
anchors.top: parent.top
anchors.topMargin: 0
iconSource: "../../images/arrow_down.png"
onClicked: calendar.visible = !calendar.visible
}
onDateValueChanged: {
text = dateValue;
calendar.selectedDate = dateValue;
}
}
在 需要的地方 就可以使用了(别忘了import Datepicker.qml 的路径,Button 添加自己的icon路径,我是用的Qt 自带的icon):
DatePicker{
dateValue: (new Date()).toLocaleString(Qt.locale(), "yyyy-MM-dd")
onDateValueChanged: //myDate = dateValue
}
呵呵, 很简单吧,TextField + Calendar + Button 就实现 下拉式日期选择框 了。我用的是Qt5.3。