QML 自定义日期组件



  • Qt 有控件QDateEdit,但是qml没有,今天我们来自己实现一个,非常简单哦

    创建默认qml工程

    创建自定义组件 QmlDateEdit.qml

    点击上下键,计算一下日期

    import QtQuick 2.0
    
    Rectangle {
        id: rect
        width: 150
        height: 30
        border.width: 1
        border.color: "gray"
    
        property var currentDate: new Date
    
        Component.onCompleted: {
            label.text = getFormat(currentDate)
        }
    
        function up(){
            var time = currentDate.getTime() + 1*24*60*60*1000
            currentDate.setTime(time)
            label.text = getFormat(currentDate)
        }
    
        function down(){
            var time = currentDate.getTime() - 1*24*60*60*1000
            currentDate.setTime(time)
            label.text = getFormat(currentDate)
        }
    
        function addZero(value){
            if(value<10){
                return '0' + value
            }
            else{
                return value
            }
        }
    
        function getFormat(date){
            var year = date.getFullYear()
            var month = date.getMonth()
            var day = date.getDate()
    
            return year + '/' + addZero(month+1) + '/' + addZero(day)
        }
    
        TextInput{
            id: label
            anchors.verticalCenter: parent.verticalCenter
            width: parent.width-imgUp.width
            readOnly: true
            selectByMouse: true
    
        }
        Image {
            id: imgUp
            source: "qrc:/up.png"
            anchors.right: parent.right
    
            MouseArea{
                anchors.fill: parent
                onClicked: up()
            }
        }
        Image {
            id: imgDown
            source: "qrc:/down.png"
            anchors.right: parent.right
            anchors.bottom: parent.bottom
    
            MouseArea{
                anchors.fill: parent
                onClicked: down()
            }
        }
    }
    
    

    main.qml调用组件

    import QtQuick 2.9
    import QtQuick.Window 2.2
    
    Window {
        visible: true
        width: 640
        height: 480
        title: qsTr("QML 自定义日期组件")
    
        QmlDateEdit{
            id: dateEdit
        }
    }
    
    

    效果

    0_1526990634491_20180522_200052.gif

    源代码

    https://gitee.com/chen227/qmlDateEdit

    Fork me on Gitee


Log in to reply
 

走马观花

最近的回复

  • 这个错误没多大影响,qt模块可以在QT setting里进行勾选

    read more
  • 如果对操作不是很熟悉或者是操作不便的话,也可以在Windows的命令行执行NDK的安装。参数是一样的:
    Windows命令行安装NDK

    read more
  • 忘记补充图片了。这里需要点击更新安装才行。😆
    点击更新安装

    read more
  • 问:
    如何在Qt Creator安装NDK呢?
    除了那个🔽 按钮外,还有别的办法吗?
    答:
    Qt Creaator 4.11中更加整合了Android SDK Manager。其实大家都可以不运行默认的Android SDK Manager,直接在Qt Creator中选项->设备->Android,就可以进行操作了。

    通过````高级选项……,启动一些Android SDK Manager,只需要带上参数ndk-bundle```。原来没有NDK的你,也可以通过Android SDK Manager安装了。很简单吧。
    Android SDK Manager安装NDK

    read more

关注我们

微博
QQ群