Qt Qml 下拉式日期选择框

 

最近在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。