发帖 回复
返回列表
  • 3951阅读
  • 1回复

qml实现的时间日期选择控件 [复制链接]

 上一主题 下一主题
离线自强不吸
侠客
 
只看楼主 倒序阅读 楼主  发表于: 2019-10-09
qml实现的时间日期选择控件，根据大小月份和闰平年自动切换天数。详细代码见附件 DateTimeSetting.zip (4 K) 下载次数:54


主要代码：
复制代码
  1. import QtQuick 2.0
  2. import QtQuick.Extras 1.4
  3. import QtQuick.Controls 1.4
  4. import QtQuick.Layouts 1.3
  5. import QtQuick.Controls.Styles 1.4
  7. Item {
  8.     id: calendar
  9.     visible: true
  10.     width: 514; height: 160;
  12.     property int curyear: 2019
  13.     property int curmonth: 8
  14.     property int curday: 4
  15.     property int hour: 1
  16.     property int minutes: 1
  18.     //time format
  19.     property string curTimeFormat: "24H"  //12H
  21.     Component.onCompleted: {
  22.         updateDate();//load DateTime
  23.     }
  25.     function updateDate(){
  26.         var info = "2019-10-09#00:55"; //获取到的数据为24小时制
  27.         var dateTime = info.split("#");
  28.         var dateString = dateTime[0].split("-");
  29.         var timeStr = dateTime[1].split(":");
  30.         curyear = parseInt(dateString[0]);
  31.         curmonth = parseInt(dateString[1])
  32.         curday = parseInt(dateString[2])
  34.         hour = parseInt(timeStr[0])
  35.         minutes = parseInt(timeStr[1])
  36.     }
  38.     onCurTimeFormatChanged: {
  39.         tumblerHourColumn.updateModel()
  40.     }
  42.     Component{
  43.         id: tumblerStyle
  45.         //Tumbler style
  46.         TumblerStyle{
  47.             id: style
  48.             delegate: Item{
  49.                 implicitHeight: (yearTumbler.height - padding.top - padding.bottom) / style.visibleItemCount
  50.                 opacity: 0.4 + Math.max(0, 1 - Math.abs(styleData.displacement)) * 0.6
  51.                 Text {
  52.                     id: label
  53.                     text: styleData.value
  54.                     font.pixelSize: 28
  55.                     color: "white";
  56.                     anchors.centerIn: parent
  57.                 }
  58.             }
  59.             property Component frame: Item {}
  60.             property Component background: Item {}
  61.             property Component separator: Item {}
  62.             property Component foreground: Item {}
  63.         }
  64.     }
  66.     //year
  67.     Tumbler {
  68.         id: yearTumbler
  69.         x: 4; width: 90; height: 160
  70.         style: tumblerStyle
  72.         TumblerColumn {
  73.             id: tumblerYearColum
  74.             width: 90
  76.             model: ListModel {
  77.                 Component.onCompleted: {
  78.                     for (var i = 2000; i < 2100; ++i) {
  79.                         append({value: i.toString()});
  80.                     }
  81.                 }
  82.             }
  83.             onCurrentIndexChanged: {
  84.                 //当前如果为2月  可能需要更新2月份天数    下标为1
  85.                 if(tumblerMonthColum.currentIndex === 1)
  86.                 {
  87.                     tumblerDayColumn.updateModel()
  88.                 }
  89.             }
  91.         }
  92.         Component.onCompleted: {
  93.             yearTumbler.setCurrentIndexAt(0,curyear-2000);
  94.         }
  95.     }
  97.     //month
  98.     Tumbler {
  99.         id: monthTumbler
  100.         anchors.left: yearTumbler.right
  101.         anchors.leftMargin: 20
  102.         width: 45; height: 160
  103.         style: tumblerStyle
  105.         TumblerColumn {
  106.             id: tumblerMonthColum
  107.             width: 45
  108.             model: ListModel {
  109.                 Component.onCompleted: {
  110.                     for (var i = 1; i <= 12; ++i) {
  111.                         append({value: i.toString()});
  112.                     }
  113.                 }
  114.             }
  116.             //update dayTumbler
  117.             onCurrentIndexChanged: {
  118.                 tumblerDayColumn.updateModel()
  119.             }
  120.         }
  122.         Component.onCompleted: {
  123.             monthTumbler.setCurrentIndexAt(0,curmonth-1)
  124.         }
  125.     }
  127.     //day
  128.     Tumbler{
  129.         id: dayTumbler
  130.         anchors.left: monthTumbler.right
  131.         anchors.leftMargin: 32
  132.         width: 45; height: 160
  133.         style: tumblerStyle
  135.         readonly property var days: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
  137.         TumblerColumn {
  138.             id: tumblerDayColumn
  139.             width: 45
  140.             model: 31
  142.             function updateModel() {
  144.                 var previousIndex = tumblerDayColumn.currentIndex;
  145.                 var newDays = dayTumbler.days[tumblerMonthColum.currentIndex]
  147.                 //闰年&2月份 下标+1
  148.                 if((tumblerYearColum.currentIndex%4 == 0) && (tumblerMonthColum.currentIndex == 1)){
  150.                     newDays = dayTumbler.days[tumblerMonthColum.currentIndex]+1
  151.                 }
  153.                 var array = [];
  154.                 for (var i = 0; i < newDays; ++i) {
  155.                     array.push(i + 1);
  156.                 }
  157.                 model = array;
  158.                 dayTumbler.setCurrentIndexAt(0, Math.min(newDays - 1, previousIndex));
  159.             }
  160.             onCurrentIndexChanged: {}
  161.         }
  162.         Component.onCompleted: {
  163.             dayTumbler.setCurrentIndexAt(0,curday-1)
  164.         }
  165.     }
  168.     //hour
  169.     Tumbler{
  170.         id: hourTumbler
  171.         anchors.left: dayTumbler.right
  172.         anchors.leftMargin: 28
  173.         width: 45; height: 160
  174.         style: tumblerStyle
  176.         readonly property var days: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
  178.         TumblerColumn {
  179.             id: tumblerHourColumn
  180.             width: 45
  181.             model: 24
  183.             function updateModel() {
  184.                  var array = [];
  185.                 if(curTimeFormat === "24H"){
  186.                     for (var i = 0; i < 24; ++i) {
  187.                         array.push(i);
  188.                     }
  189.                 }else if( curTimeFormat === "12H" ){
  190.                     for (var j = 1; j <= 12; ++j) {
  191.                         array.push(j);
  192.                     }
  193.                 }
  194.                 model = array;
  196.                 if(curTimeFormat === "12H"){
  197.                     var formatHour = (calendar.hour===0)?12:((calendar.hour+12)%12)
  198.                     hourTumbler.setCurrentIndexAt(0,formatHour-1);
  199.                 }else{
  200.                     hourTumbler.setCurrentIndexAt(0,calendar.hour)
  201.                 }
  202.             }
  204.             onCurrentIndexChanged: {}
  206.         }
  207.         Component.onCompleted: {
  208.             tumblerHourColumn.updateModel();
  209.         }
  210.     }
  212.     Tumbler{
  213.         id: minutesTumbler
  214.         anchors.left: hourTumbler.right
  215.         anchors.leftMargin: 30
  216.         width: 45; height: 160
  217.         style: tumblerStyle
  219.         TumblerColumn {
  220.             id: tumblerMinutesColumn
  221.             width: 45
  222.             model: ListModel {
  223.                 Component.onCompleted: {
  224.                     for (var i = 0; i < 60; ++i) {
  225.                         append({value: i.toString()});
  226.                     }
  227.                 }
  228.             }
  229.             onCurrentIndexChanged: {}
  230.         }
  231.         Component.onCompleted: {
  232.             minutesTumbler.setCurrentIndexAt(0,minutes)
  233.         }
  234.     }
  235. }
共4条评分 ，好评度+1 ，贡献值+1 ，金钱+1 ，威望+1
20091001753 好评度 +1 - 2019-10-12
20091001753 贡献值 +1 - 2019-10-12
20091001753 威望 +1 - 2019-10-12
20091001753 金钱 +1 - 2019-10-12
自强不吸！
回复
举报
分享到 淘江湖 新浪 QQ微博 QQ空间 开心 人人 豆瓣 网易微博 百度 鲜果 白社会 飞信
离线big_mouse
禁止发言
只看该作者 1楼 发表于: 2020-04-15
回复
举报
发帖 回复
返回列表
快速回复
限100 字节
 
上一个 下一个