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
 

最近的回复

  • E

    是不是好久都没有人了,站主找到工作了,还是说划水了

    read more
  • 请问一下如果原Qt桌面软件支持拖拽外部文件进去(比如把在用资源管理器里的一张图片拖拽到软件界面上就会显示这张图片),转成Webassembly之后这种拖拽操作还是否有效?劳烦大佬帮我试试看,可以的话我就学QML了

    read more
  • H
    Toou 2D 拿来即用,为简单而生。

    简称T2D,是一款采用自身模块规范编写的轻量级UI框架,遵循Qt书写与组织形式门槛极低无需深入学习简单易用可拿来即用,丰富的控件模块适合界面的快速开发,让程序人员拥有更多的精力来实现业务逻辑与算法。

    统一交互规范,丰富的Ui控件几十种常用控件放弃了Qt Controls 及 Controls 2 来提高性能。

    完善的主题系统,业务逻辑与界面主题设计分离,可通过简单修改变量自定义主题皮肤。灵活的多主题皮肤绑定机制、在不需要重启App即实现一键换肤

    ini皮肤配置规则与每一个控件融合。可在应用内配置也可在应用外动态扩展配置。

    框架自动化安装支持动态库、静态库多模式编译。使用方便更安全更自由。

    提供丰富Demo、全面的帮助文档,Api查阅快速方便。项目必备开源框架!

    已经集成最新版 Font Awesome 4.7

    开源地址:https://github.com/ShowFL/Toou-2D

    read more
  • 刚刚毕业,工作用QT开发,以后有问题多多请教各位前辈😬 抱拳了。

    read more

关注我们

微博
QQ群