发帖 回复
返回列表
  • 5123阅读
  • 3回复

DateTimePickerDialog组件 [复制链接]

 上一主题 下一主题
离线XChinux
总版主
 
只看楼主 倒序阅读 楼主  发表于: 2019-06-01
最近经常写QML，放一个日期时间选择对话框组件：
DateTimePickerDialog.qml
复制代码
  1. import QtQuick 2.12
  2. import QtQuick.Controls 2.12
  3. import QtQuick.Layouts 1.12
  5. Dialog {
  6.     id: root
  7.     property alias dateVisible: dateLayout.visible
  8.     property alias timeVisible: timeLayout.visible
  10.     signal dateTimeFinished(string dateString, string timeString)
  12.     function parse(strDateTime)
  13.     {
  14.         let now = new Date();
  15.         if (strDateTime.length > 0)
  16.         {
  17.             now.setTime(Date.parse(strDateTime));
  18.         }
  19.         setDateTime(now.getFullYear(),
  20.                                 now.getMonth() + 1,
  21.                                 now.getDate(),
  22.                                 now.getHours(),
  23.                                 now.getMinutes(),
  24.                                 now.getSeconds());
  25.     }
  27.     function setDate(iYear, iMonth, iDay)
  28.     {
  29.         yearTumbler.currentIndex = iYear - parseInt(yearTumbler.model[0]);
  30.         monthTumbler.currentIndex = iMonth - 1;
  31.         dayTumbler.currentIndex = iDay - 1;
  32.     }
  34.     function setTime(iHour, iMin, iSec)
  35.     {
  36.         hourTumbler.currentIndex = iHour;
  37.         minsTumbler.currentIndex = iMin;
  38.         secsTumbler.currentIndex = iSec;
  39.     }
  41.     function setDateTime(iYear, iMonth, iDay, iHour, iMin, iSec)
  42.     {
  43.         yearTumbler.currentIndex = iYear - parseInt(yearTumbler.model[0]);
  44.         monthTumbler.currentIndex = iMonth - 1;
  45.         dayTumbler.currentIndex = iDay - 1;
  46.         hourTumbler.currentIndex = iHour;
  47.         minsTumbler.currentIndex = iMin;
  48.         secsTumbler.currentIndex = iSec;
  49.     }
  51.     RowLayout {
  52.         anchors.centerIn: parent
  53.         spacing: dateLayout.visible && timeLayout.visible ? 10 : 0
  54.         //width: dateLayout.visible && timeLayout.visible ? 500 : 300
  55.         RowLayout {
  56.             id: dateLayout
  57.             Tumbler {
  58.                 id: yearTumbler
  59.                 Layout.preferredWidth: 50
  60.                 delegate: delegateComponent
  61.             }
  63.             Label {
  64.                 Layout.alignment: Qt.AlignVCenter
  65.                 Layout.preferredWidth: 6
  66.                 text: '-'
  67.             }
  69.             Tumbler {
  70.                 id: monthTumbler
  71.                 Layout.preferredWidth: 30
  72.                 model: ["01","02","03","04","05","06","07","08","09","10","11","12"]
  73.                 delegate: delegateComponent
  74.             }
  76.             Label {
  77.                 Layout.alignment: Qt.AlignVCenter
  78.                 Layout.preferredWidth: 6
  79.                 text: '-'
  80.             }
  82.             Tumbler {
  83.                 id: dayTumbler
  84.                 Layout.preferredWidth: 30
  85.                 model: ["01","02","03","04","05","06","07","08","09","10",
  86.                     "11","12","13","14","15","16","17","18","19","20",
  87.                     "21","22","23","24","25","26","27","28","29","30","31"]
  88.                 delegate: delegateComponent
  89.             }
  90.         }
  91.         RowLayout {
  92.             id: timeLayout
  93.             Tumbler {
  94.                 id: hourTumbler
  95.                 Layout.preferredWidth: 30
  96.                 delegate: delegateComponent
  97.             }
  99.             Label {
  100.                 Layout.alignment: Qt.AlignVCenter
  101.                 Layout.preferredWidth: 6
  102.                 text: ':'
  103.             }
  105.             Tumbler {
  106.                 id: minsTumbler
  107.                 Layout.preferredWidth: 30
  108.                 delegate: delegateComponent
  109.             }
  111.             Label {
  112.                 Layout.alignment: Qt.AlignVCenter
  113.                 Layout.preferredWidth: 6
  114.                 text: ':'
  115.             }
  117.             Tumbler {
  118.                 id: secsTumbler
  119.                 Layout.preferredWidth: 30
  120.                 delegate: delegateComponent
  121.             }
  122.         }
  123.     }
  125.     onAccepted: {
  126.         let now = new Date();
  127.         now.setFullYear(parseInt(yearTumbler.currentItem.text));
  128.         now.setMonth(monthTumbler.currentIndex);
  129.         now.setDate(dayTumbler.currentIndex + 1);
  130.         now.setHours(hourTumbler.currentIndex);
  131.         now.setMinutes(minsTumbler.currentIndex);
  132.         now.setSeconds(secsTumbler.currentIndex);
  133.         let yyyy = now.getFullYear();
  134.         let mon = now.getMonth() + 1;
  135.         mon = mon < 10 ? ('0' + mon) : mon;
  136.         let dd = now.getDate();
  137.         dd = dd < 10 ? ('0' + dd) : dd;
  138.         let hh = now.getHours();
  139.         hh = hh < 10 ? ('0' + hh) : hh;
  140.         let mm = now.getMinutes();
  141.         mm = mm < 10 ? ('0' + mm) : mm;
  142.         let ss = now.getSeconds();
  143.         ss = ss < 10 ? ('0' + ss) : ss;
  144.         dateTimeFinished(yyyy + '-' + mon + '-' + dd,
  145.                         hh + ':' + mm + ':' + ss);
  146.     }
  148.     standardButtons: Dialog.Ok | Dialog.Cancel
  150.     Component {
  151.         id: delegateComponent
  152.         Label {
  153.             text: modelData
  154.             opacity: 1.0 - Math.abs(Tumbler.displacement) / (Tumbler.tumbler.visibleItemCount / 2)
  155.             horizontalAlignment: Text.AlignHCenter
  156.             verticalAlignment: Text.AlignVCenter
  157.             font.pixelSize: root.font.pixelSize * 1.25
  158.         }
  159.     }
  161.     Component.onCompleted: {
  162.         let arr = [];
  163.         for (var i = 1900; i <= 2050; i++)
  164.         {
  165.             arr.push(i);
  166.         }
  167.         yearTumbler.model = arr;
  169.         arr = [];
  170.         for (var i = 0; i < 24; i++)
  171.         {
  172.             arr.push(i < 10 ? ('0' + i) : i);
  173.         }
  174.         hourTumbler.model = arr;
  176.         arr = [];
  177.         for (var i = 0; i < 59; i++)
  178.         {
  179.             arr.push(i < 10 ? ('0' + i) : i);
  180.         }
  181.         minsTumbler.model = arr;
  182.         secsTumbler.model = arr;
  184.         let now = new Date();
  185.         setDateTime(now.getFullYear(), now.getMonth() + 1, now.getDate(),
  186.             now.getHours(), now.getMinutes(), now.getSeconds());
  187.     }
  188. }
共4条评分 ，好评度+1 ，贡献值+1 ，金钱+1 ，威望+1
20091001753 好评度 +1 - 2019-09-17
20091001753 贡献值 +1 - 2019-09-17
20091001753 威望 +1 - 2019-09-17
20091001753 金钱 +1 - 2019-09-17
二笔 openSUSE Vim N9 BB10 XChinux@163.com 网易博客 腾讯微博
承接C++/Qt、Qt UI界面、PHP及预算报销系统开发业务
回复
举报
分享到 淘江湖 新浪 QQ微博 QQ空间 开心 人人 豆瓣 网易微博 百度 鲜果 白社会 飞信
离线liudianwu
总版主
只看该作者 1楼 发表于: 2019-06-01
老大，最好再贴个gif动图，图文并茂，可能会更有吸引力，更加有说服力！
欢迎关注微信公众号：Qt实战/Qt入门和进阶(各种开源作品、经验整理、项目实战技巧，专注Qt/C++软件开发，视频监控、物联网、工业控制、嵌入式软件、国产化系统应用软件开发) QQ：517216493  WX：feiyangqingyun  QQ群：751439350
回复
举报
离线feifeishine
新手上路
只看该作者 2楼 发表于: 2019-10-04
厉害
回复
举报
离线自强不吸
侠客
只看该作者 3楼 发表于: 2019-10-09
月份变化了  日期不会自动变啊   2月没有31天
自强不吸！
回复
举报
发帖 回复
返回列表
快速回复
限100 字节
 
上一个 下一个