时间组件和日期组件

Qt Quick Control 1.x中是没有日期组件和时间组件，好在Qml够灵活，没有的东西可以自己来造。道生一，一生二，二生三，三生万物，瞬间回归到了哲学的本质。

时间控件

时间日期控件案例 - 图1

  1. import QtQuick 2.4
  2. import QtQuick.Controls 1.4
  3. Rectangle {
  4.     id: timeEdit
  5.     property string time
  6.     property int hour: 0
  7.     property int minute: 0
  8.     property int timePointWidth: 24
  9.     property int controlWidth: 20
  10.     property color selectionColor: 'blue'
  11.     property var theme: QtObject {
  12.         id: theme
  13.         objectName: "theme"
  14.         property string fontFamily: 'Microsoft YaHei'
  15.         property real fontSize: 14
  16.         property int fontWeight: Font.Normal
  17.         property color textColor: '#222222'
  18.         property color borderColor: '#D3D3D3'
  19.     }
  20.     border.width: 1
  21.     border.color: theme.borderColor
  22.     width: 80
  23.     height: 26
  24.     Row{
  25.         spacing:1
  26.         width: parent.width - control.width
  27.         height: parent.height
  28.         TextInput {
  29.             id: hours
  30.             height: parent.height
  31.             width: timePointWidth
  32.             color: theme.textColor
  33.             font {
  34.                 family: theme.fontFamily
  35.                 pixelSize: theme.fontSize - 1
  36.                 weight: theme.fontWeight
  37.             }
  38.             selectByMouse: true
  39.             maximumLength: 2
  40.             selectionColor: timeEdit.selectionColor
  41.             mouseSelectionMode: TextInput.SelectWords
  42.             validator: IntValidator{bottom: 0; top: 23;}
  43.             verticalAlignment: Text.AlignVCenter
  44.             horizontalAlignment: Text.AlignHCenter
  45.             text: hour < 10 ? '0'+ hour: hour >= 24 ? 0 : hour
  46.             onEditingFinished:{
  47.                 hour = parseInt(hours.text.trim())
  48.             }
  49.             onActiveFocusChanged: {
  50.                 if (activeFocus){
  51.                     hours.selectAll();
  52.                     minutes.deselect();
  53.                 }
  54.             }
  55.             onTextChanged: {
  56.                 if (activeFocus){
  57.                     hours.selectAll();
  58.                     minutes.deselect();
  59.                 }
  60.             }
  61.         }
  62.         Text {
  63.             id: separator
  64.             width:6
  65.             height: parent.height
  66.             verticalAlignment: Text.AlignVCenter
  67.             horizontalAlignment: Text.AlignHCenter
  68.             text: ":"
  69.         }
  70.         TextInput {
  71.             id: minutes
  72.             height: parent.height
  73.             width: timePointWidth
  74.             color: theme.textColor
  75.             font {
  76.                 family: theme.fontFamily
  77.                 pixelSize: theme.fontSize - 1
  78.                 weight: theme.fontWeight
  79.             }
  80.             selectByMouse: true
  81.             maximumLength: 2
  82.             selectionColor: timeEdit.selectionColor
  83.             mouseSelectionMode: TextInput.SelectWords
  84.             validator: IntValidator{bottom: 0; top: 59;}
  85.             verticalAlignment: Text.AlignVCenter
  86.             horizontalAlignment: Text.AlignHCenter
  87.             text: minute < 10 ? '0'+ minute: minute >= 60 ? 0 : minute
  88.             onEditingFinished:{
  89.                 minute = parseInt(minutes.text.trim())
  90.             }
  91.             onActiveFocusChanged: {
  92.                 if (activeFocus){
  93.                     minutes.selectAll();
  94.                     hours.deselect();
  95.                 }
  96.             }
  97.             onTextChanged: {
  98.                 if (activeFocus){
  99.                     minutes.selectAll();
  100.                     hours.deselect();
  101.                 }
  102.             }
  103.         }
  104.     }
  105.     Rectangle{
  106.         id: control
  107.         width: controlWidth
  108.         anchors.right: parent.right
  109.         anchors.rightMargin: 1
  110.         anchors.top: parent.top
  111.         anchors.topMargin: 1
  112.         anchors.bottom: parent.bottom
  113.         anchors.bottomMargin: 1
  114.         Button{
  115.             width: parent.width
  116.             height:  parseInt(parent.height / 2)
  117.             anchors.left: parent.left
  118.             anchors.top: parent.top
  119.             text: "︿"
  120.             onClicked: {
  121.                 if (minutes.activeFocus){
  122.                     minute = parseInt(minutes.text.trim())
  123.                     minute = minute + 1;
  124.                     if(minute > 59)
  125.                     {
  126.                         minute = 0
  127.                     }
  128.                 }else{
  129.                     hour = parseInt(hours.text.trim())
  130.                     hour = hour + 1;
  131.                     if(hour > 23){
  132.                         hour = 0;
  133.                     }
  134.                     if (!hours.activeFocus){
  135.                         hours.selectAll();
  136.                     }
  137.                 }
  138.             }
  139.         }
  140.         Button{
  141.             width: parent.width
  142.             height: parseInt(parent.height / 2)
  143.             anchors.left: parent.left
  144.             anchors.bottom: parent.bottom
  145.             text: "﹀"
  146.             onClicked: {
  147.                 if (minutes.activeFocus){
  148.                     minute = parseInt(minutes.text.trim())
  149.                     minute = minute - 1;
  150.                     if(minute < 0){
  151.                         minute = 59
  152.                     }
  153.                 }else{
  154.                     hour = parseInt(hours.text.trim())
  155.                     hour = hour - 1;
  156.                     if(hour < 0){
  157.                         hour = 23;
  158.                     }
  159.                     if (!hours.activeFocus){
  160.                         hours.selectAll();
  161.                     }
  162.                 }
  163.             }
  164.         }
  165.     }
  166. }
  1. import QtQuick 2.7
  2. import QtQuick.Controls 1.4
  3. import QtQuick.Layouts 1.1
  4. import QtQuick.Controls.Styles 1.4
  5. TextField
  6. {
  7.     property date originDate: new Date()       //原始时间
  8.     property string dateValue:"%1-%2-%3".arg(originDate.getFullYear()).arg(originDate.getMonth()+1).arg(originDate.getDate()); //显示的日期格式字符串
  9.     property alias selectedDate: calendar.selectedDate //获取设置后日期
  10.     property alias hour: timeEidt.hour                 //获取设置后小时
  11.     property alias minute: timeEidt.minute             //获取设置后分钟
  12.     property bool showDropDownButton: true  //是否显示下拉按钮
  13.     property bool canEditTime: false         //是否允许设置时间
  14.     property int timeEditorHeight: 30
  15.     property var theme: QtObject {
  16.         id: theme
  17.         objectName: "theme"
  18.         property string fontFamily: 'Microsoft YaHei'
  19.         property real fontSize: 14
  20.         property int fontWeight: Font.Normal
  21.         property color textColor: '#222222'
  22.         property color borderColor: '#D3D3D3'
  23.         property color sameMonthDateTextColor: "#444"
  24.         property color selectedDateColor: Qt.platform.os === "osx" ? "#3778d0" : "#3778d0"
  25.         property color selectedDateTextColor: "white"
  26.         property color differentMonthDateTextColor: "#bbb"
  27.         property color invalidDatecolor: "#dddddd"
  28.     }
  29.     readOnly:true
  30.     width: 150
  31.     textColor: theme.textColor
  32.     font {
  33.         family: theme.fontFamily
  34.         pixelSize: theme.fontSize - 1
  35.         weight: theme.fontWeight
  36.     }
  37.     property string __timeFormatter: {
  38.         var formatter = ' %1';
  39.         if (hour < 10){
  40.             formatter = ' 0%1'
  41.         }
  42.         if(minute < 10){
  43.             formatter = formatter + ':0%2'
  44.         }else{
  45.             formatter =formatter + ':%2'
  46.         }
  47.         return formatter;
  48.     }
  49.     text: canEditTime ? dateValue + __timeFormatter.arg(hour).arg(minute) : dateValue
  50.     Rectangle{
  51.         id: container
  52.         anchors.topMargin: 0
  53.         anchors.top: parent.bottom
  54.         implicitHeight:  canEditTime ? calendar.height + timeEditorHeight : calendar.height
  55.         implicitWidth: calendar.width
  56.         visible: false
  57.         border.width: 1
  58.         border.color: theme.borderColor
  59.         Calendar{
  60.             id: calendar
  61.             frameVisible: true
  62.             selectedDate: new Date()
  63.             activeFocusOnTab: true
  64.             onReleased: {
  65.                 dateValue = Qt.binding(function(){
  66.                     return "%1-%2-%3".arg(date.getFullYear()).arg(date.getMonth()+1).arg(date.getDate());
  67.                 })
  68.                 if (!canEditTime){
  69.                     container.visible = false
  70.                 }
  71.             }
  72.             style: CalendarStyle{
  73.                 navigationBar:  RowLayout{
  74.                     width: parent.width
  75.                     implicitWidth: parent.width
  76.                     spacing: 2
  77.                     Item{
  78.                         Layout.preferredWidth: 4
  79.                     }
  80.                     Button{
  81.                         Layout.alignment: Qt.AlignLeft
  82.                         text: "〈"
  83.                         onClicked: control.showPreviousMonth()
  84.                     }
  85.                     Label {
  86.                         Layout.alignment: Qt.AlignHCenter
  87.                         Layout.fillWidth: true
  88.                         verticalAlignment: Text.AlignVCenter
  89.                         antialiasing: true
  90.                         font {
  91.                             family: theme.fontFamily
  92.                             weight: theme.fontWeight
  93.                         }
  94.                         color: theme.textColor
  95.                         font.pixelSize: theme.fontSize + 2
  96.                         text: {
  97.                             var tempTitle =  styleData.title.split(' ');
  98.                             return tempTitle.length > 1 ? tempTitle[1] + ' ' + tempTitle[0] : styleData.title
  99.                         }
  100.                         horizontalAlignment: Text.AlignHCenter
  101.                     }
  102.                     Button{
  103.                         Layout.alignment: Qt.AlignRight
  104.                         text: "〉"
  105.                         onClicked:  control.showNextMonth()
  106.                     }
  107.                     Item{
  108.                         Layout.preferredWidth: 4
  109.                     }
  110.                 }
  111.                 dayOfWeekDelegate: Rectangle{
  112.                     implicitHeight: 24
  113.                     Text {
  114.                         anchors.centerIn: parent
  115.                         verticalAlignment: Text.AlignVCenter
  116.                         antialiasing: true
  117.                         font {
  118.                             family: theme.fontFamily
  119.                             weight: theme.fontWeight
  120.                         }
  121.                         color: theme.textColor
  122.                         font.pixelSize: theme.fontSize - 1
  123.                         text: {
  124.                             switch(styleData.dayOfWeek){
  125.                             case 0: return '日';
  126.                             case 1: return '一';
  127.                             case 2: return '二';
  128.                             case 3: return '三';
  129.                             case 4: return '四';
  130.                             case 5: return '五';
  131.                             case 6: return '六';
  132.                             }
  133.                         }
  134.                     }
  135.                 }
  136.                 dayDelegate: Item {
  137.                     Rectangle {
  138.                         anchors.fill: parent
  139.                         border.color: "transparent"
  140.                         color: styleData.date !== undefined && styleData.selected ? theme.selectedDateColor : "transparent"
  141.                         anchors.margins: styleData.selected ? -1 : 0
  142.                     }
  143.                     Label {
  144.                         anchors.centerIn: parent
  145.                         font.pointSize: 10
  146.                         text: styleData.date.getDate()
  147.                         verticalAlignment: Text.AlignVCenter
  148.                         antialiasing: true
  149.                         font {
  150.                             family: theme.fontFamily
  151.                             pixelSize: theme.fontSize
  152.                             weight: theme.fontWeight
  153.                         }
  154.                         horizontalAlignment: Text.AlignHCenter
  155.                         color: {
  156.                             var color = theme.invalidDatecolor;
  157.                             if (styleData.valid) {
  158.                                 color = styleData.visibleMonth ? theme.sameMonthDateTextColor : theme.differentMonthDateTextColor;
  159.                                 if (styleData.selected) {
  160.                                     color = theme.selectedDateTextColor;
  161.                                 }
  162.                             }
  163.                             return color;
  164.                         }
  165.                     }
  166.                 }
  167.             }
  168.         }
  169.         RowLayout{
  170.             visible: canEditTime
  171.             height: timeEditorHeight - 2
  172.             width: parent.width
  173.             anchors.top: calendar.bottom;
  174.             anchors.left: parent.left
  175.             Item{
  176.                 Layout.preferredWidth: 4
  177.             }
  178.             Text{
  179.                 anchors.leftMargin: 4
  180.                 Layout.preferredHeight:  parent.height
  181.                 Layout.preferredWidth: 40
  182.                 Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
  183.                 verticalAlignment: Text.AlignVCenter
  184.                 antialiasing: true
  185.                 font {
  186.                     family: theme.fontFamily
  187.                     pixelSize: theme.fontSize
  188.                     weight: theme.fontWeight
  189.                 }
  190.                 color: theme.textColor
  191.                 text: '时间:'
  192.             }
  193.             TimeEdit{
  194.                 id: timeEidt
  195.                 Layout.preferredHeight:  parent.height - 2
  196.                 Layout.preferredWidth: 80
  197.                 selectionColor: theme.selectedDateColor
  198.                 hour: originDate.getHours()
  199.                 minute: originDate.getMinutes()
  200.             }
  201.             Item{
  202.                 Layout.fillHeight: true
  203.                 Layout.fillWidth: true
  204.             }
  205.             Button{
  206.                 Layout.preferredWidth: 36
  207.                 Layout.preferredHeight: 26
  208.                 Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
  209.                 text: '取消'
  210.                 onClicked: {
  211.                     selectedDate = originDate
  212.                     timeEidt.hour = originDate.getHours();
  213.                     timeEidt.minute = originDate.getMinutes();
  214.                     container.visible = false
  215.                 }
  216.             }
  217.             Button{
  218.                 Layout.preferredWidth: 36
  219.                 Layout.preferredHeight: 26
  220.                 Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
  221.                 text: '确定'
  222.                 onClicked: {
  223.                     container.visible = false
  224.                 }
  225.             }
  226.             Item{
  227.                 Layout.preferredWidth: 4
  228.             }
  229.         }
  230.     }
  231.     MouseArea{
  232.         enabled: !showDropDownButton
  233.         anchors.fill: parent
  234.         onClicked: {
  235.             container.visible = !container.visible
  236.         }
  237.     }
  238.     Button{
  239.         visible: showDropDownButton
  240.         id: downBtn
  241.         width: 22
  242.         anchors.right: parent.right
  243.         anchors.rightMargin: 0
  244.         anchors.bottom: parent.bottom
  245.         anchors.bottomMargin: 0
  246.         anchors.top: parent.top
  247.         anchors.topMargin: 0
  248.         text: "﹀"
  249.         onClicked: container.visible = !container.visible
  250.     }
  251. }

http://idealife.github.io/2017/02/16/%E6%97%B6%E9%97%B4%E7%BB%84%E4%BB%B6%E5%92%8C%E6%97%A5%E6%9C%9F%E7%BB%84%E4%BB%B6/