• 415阅读
  • 1回复

DateTimePickerDialog组件 [复制链接]

上一主题 下一主题
离线XChinux
 

只看楼主 倒序阅读 楼主  发表于: 06-01
最近经常写QML,放一个日期时间选择对话框组件:
DateTimePickerDialog.qml
  1. import QtQuick 2.12
  2. import QtQuick.Controls 2.12
  3. import QtQuick.Layouts 1.12
  4. Dialog {
  5.     id: root
  6.     property alias dateVisible: dateLayout.visible
  7.     property alias timeVisible: timeLayout.visible
  8.     signal dateTimeFinished(string dateString, string timeString)
  9.     function parse(strDateTime)
  10.     {
  11.         let now = new Date();
  12.         if (strDateTime.length > 0)
  13.         {
  14.             now.setTime(Date.parse(strDateTime));
  15.         }
  16.         setDateTime(now.getFullYear(),
  17.                                 now.getMonth() + 1,
  18.                                 now.getDate(),
  19.                                 now.getHours(),
  20.                                 now.getMinutes(),
  21.                                 now.getSeconds());
  22.     }
  23.     function setDate(iYear, iMonth, iDay)
  24.     {
  25.         yearTumbler.currentIndex = iYear - parseInt(yearTumbler.model[0]);
  26.         monthTumbler.currentIndex = iMonth - 1;
  27.         dayTumbler.currentIndex = iDay - 1;
  28.     }
  29.     function setTime(iHour, iMin, iSec)
  30.     {
  31.         hourTumbler.currentIndex = iHour;
  32.         minsTumbler.currentIndex = iMin;
  33.         secsTumbler.currentIndex = iSec;
  34.     }
  35.     function setDateTime(iYear, iMonth, iDay, iHour, iMin, iSec)
  36.     {
  37.         yearTumbler.currentIndex = iYear - parseInt(yearTumbler.model[0]);
  38.         monthTumbler.currentIndex = iMonth - 1;
  39.         dayTumbler.currentIndex = iDay - 1;
  40.         hourTumbler.currentIndex = iHour;
  41.         minsTumbler.currentIndex = iMin;
  42.         secsTumbler.currentIndex = iSec;
  43.     }
  44.     RowLayout {
  45.         anchors.centerIn: parent
  46.         spacing: dateLayout.visible && timeLayout.visible ? 10 : 0
  47.         //width: dateLayout.visible && timeLayout.visible ? 500 : 300
  48.         RowLayout {
  49.             id: dateLayout
  50.             Tumbler {
  51.                 id: yearTumbler
  52.                 Layout.preferredWidth: 50
  53.                 delegate: delegateComponent
  54.             }
  55.             Label {
  56.                 Layout.alignment: Qt.AlignVCenter
  57.                 Layout.preferredWidth: 6
  58.                 text: '-'
  59.             }
  60.             Tumbler {
  61.                 id: monthTumbler
  62.                 Layout.preferredWidth: 30
  63.                 model: ["01","02","03","04","05","06","07","08","09","10","11","12"]
  64.                 delegate: delegateComponent
  65.             }
  66.             Label {
  67.                 Layout.alignment: Qt.AlignVCenter
  68.                 Layout.preferredWidth: 6
  69.                 text: '-'
  70.             }
  71.             Tumbler {
  72.                 id: dayTumbler
  73.                 Layout.preferredWidth: 30
  74.                 model: ["01","02","03","04","05","06","07","08","09","10",
  75.                     "11","12","13","14","15","16","17","18","19","20",
  76.                     "21","22","23","24","25","26","27","28","29","30","31"]
  77.                 delegate: delegateComponent
  78.             }
  79.         }
  80.         RowLayout {
  81.             id: timeLayout
  82.             Tumbler {
  83.                 id: hourTumbler
  84.                 Layout.preferredWidth: 30
  85.                 delegate: delegateComponent
  86.             }
  87.             Label {
  88.                 Layout.alignment: Qt.AlignVCenter
  89.                 Layout.preferredWidth: 6
  90.                 text: ':'
  91.             }
  92.             Tumbler {
  93.                 id: minsTumbler
  94.                 Layout.preferredWidth: 30
  95.                 delegate: delegateComponent
  96.             }
  97.             Label {
  98.                 Layout.alignment: Qt.AlignVCenter
  99.                 Layout.preferredWidth: 6
  100.                 text: ':'
  101.             }
  102.             Tumbler {
  103.                 id: secsTumbler
  104.                 Layout.preferredWidth: 30
  105.                 delegate: delegateComponent
  106.             }
  107.         }
  108.     }
  109.     onAccepted: {
  110.         let now = new Date();
  111.         now.setFullYear(parseInt(yearTumbler.currentItem.text));
  112.         now.setMonth(monthTumbler.currentIndex);
  113.         now.setDate(dayTumbler.currentIndex + 1);
  114.         now.setHours(hourTumbler.currentIndex);
  115.         now.setMinutes(minsTumbler.currentIndex);
  116.         now.setSeconds(secsTumbler.currentIndex);
  117.         let yyyy = now.getFullYear();
  118.         let mon = now.getMonth() + 1;
  119.         mon = mon < 10 ? ('0' + mon) : mon;
  120.         let dd = now.getDate();
  121.         dd = dd < 10 ? ('0' + dd) : dd;
  122.         let hh = now.getHours();
  123.         hh = hh < 10 ? ('0' + hh) : hh;
  124.         let mm = now.getMinutes();
  125.         mm = mm < 10 ? ('0' + mm) : mm;
  126.         let ss = now.getSeconds();
  127.         ss = ss < 10 ? ('0' + ss) : ss;
  128.         dateTimeFinished(yyyy + '-' + mon + '-' + dd,
  129.                         hh + ':' + mm + ':' + ss);
  130.     }
  131.     standardButtons: Dialog.Ok | Dialog.Cancel
  132.     Component {
  133.         id: delegateComponent
  134.         Label {
  135.             text: modelData
  136.             opacity: 1.0 - Math.abs(Tumbler.displacement) / (Tumbler.tumbler.visibleItemCount / 2)
  137.             horizontalAlignment: Text.AlignHCenter
  138.             verticalAlignment: Text.AlignVCenter
  139.             font.pixelSize: root.font.pixelSize * 1.25
  140.         }
  141.     }
  142.     Component.onCompleted: {
  143.         let arr = [];
  144.         for (var i = 1900; i <= 2050; i++)
  145.         {
  146.             arr.push(i);
  147.         }
  148.         yearTumbler.model = arr;
  149.         arr = [];
  150.         for (var i = 0; i < 24; i++)
  151.         {
  152.             arr.push(i < 10 ? ('0' + i) : i);
  153.         }
  154.         hourTumbler.model = arr;
  155.         arr = [];
  156.         for (var i = 0; i < 59; i++)
  157.         {
  158.             arr.push(i < 10 ? ('0' + i) : i);
  159.         }
  160.         minsTumbler.model = arr;
  161.         secsTumbler.model = arr;
  162.         let now = new Date();
  163.         setDateTime(now.getFullYear(), now.getMonth() + 1, now.getDate(),
  164.             now.getHours(), now.getMinutes(), now.getSeconds());
  165.     }
  166. }





二笔 openSUSE Vim N9 BB10 XChinux@163.com 网易博客 腾讯微博
承接C++/Qt、Qt UI界面、PHP及预算报销系统开发业务
在线liudianwu

只看该作者 1楼 发表于: 06-01
老大,最好再贴个gif动图,图文并茂,可能会更有吸引力,更加有说服力!
专业各种自定义控件编写+UI定制+输入法定制+视频监控+工业控制+仪器仪表+嵌入式linux+各种串口网络通信,童叟无欺,量大从优,欢迎咨询购买定制!你正好需要,我正好专业!QQ:517216493 微信:feiyangqingyun Email:feiyangqingyun@163.com
群号:853086607(Qt交流大会,雨田哥群,不定期上传作品,解答作品中相关问题!) 312125701(QtQML多多指教群) 46679801(Qt开发技术交流群-5000人大群)
快速回复
限100 字节
 
上一个 下一个