使用Ubuntu DatePicker来选择时间

我们在Ubuntu QML应用设计中，我们可以使用DatePicker来选择我们所需要的时间。在这里，我们主要利用在Ubuntu
API网站介绍的资料来做一个demo来显示到底是什么一个东西。

import QtQuick 2.0
import Ubuntu.Components 1.1
import Ubuntu.Components.Pickers 1.0

/*!
\brief MainView with a Label and Button elements.
*/

MainView {
// objectName for functional testing purposes (autopilot-qt5)
objectName: "mainView"

// Note! applicationName needs to match the "name" field of the click manifest
applicationName: "datapicker.liu-xiao-guo"

/*
This property enables the application to change orientation
when the device is rotated. The default is false.
*/
//automaticOrientation: true

// Removes the old toolbar and enables new features of the new header.
useDeprecatedToolbar: false

width: units.gu(60)
height: units.gu(85)

Page {
title: i18n.tr("datapicker")

Flickable {
anchors.fill: parent
contentHeight: content.childrenRect.height

Column {
id: content
anchors.centerIn: parent

spacing: units.gu(1)
Label {
text: "Selected date: W" + datePicker.week + " - " +
Qt.formatDate(datePicker.date, "dddd, dd-MMMM-yyyy")
}
DatePicker {
id: datePicker
}

Label {
text: "Selected month: " + Qt.formatDate(datePicker1.date, "MMMM-yyyy")
}
DatePicker {
id: datePicker1
mode: "Years|Months"
}

Label {
text: "Selected time: " + Qt.formatTime(datePicker2.date, "hh:mm:ss")
}
DatePicker {
id: datePicker2
mode: "Hours|Minutes|Seconds"
}

Label {
text: "Selected date: " + Qt.formatDate(datePicker3.date, "dddd, dd-MMMM-yyyy")
}
DatePicker {
id: datePicker3
minimum: {
var d = new Date();
d.setFullYear(d.getFullYear() - 1);
return d;
}
maximum: Date.prototype.getInvalidDate.call()
}
}
}
}
}

我们应用的显示的结果如下：





项目的代码在： https://github.com/liu-xiao-guo/datepicker