DatePicker and TimePicker Dialogs in MeeGo Qt Quick Extras Components
hamishwillee
(Talk | contribs) m (moved DatePicker and TimePicker Dialog For MeeGo-Harmattan to DatePicker and TimePicker Dialogs in MeeGo Qt Quick Extras Components: Standadised title format) |
hamishwillee
(Talk | contribs) m (Text replace - "Category:MeeGo" to "Category:MeeGo Harmattan") |
||
| (3 intermediate revisions by one user not shown) | |||
| Line 1: | Line 1: | ||
| − | + | [[Category:Qt Quick]][[Category:MeeGo Harmattan]][[Category:UI]] | |
| − | {{Abstract|This article | + | {{Abstract|This article demonstrates how to use [http://harmattan-dev.nokia.com/docs/library/html/qt-components-extras/qt-components-meego-extrasdatepickerdialog.html DatePickerDialog] and [http://harmattan-dev.nokia.com/docs/library/html/qt-components-extras/qt-components-meego-extrastimepickerdialog.html TimePickerDialog] from the MeeGo Qt Quick Components Extras. These handy components allow users to select dates and times using "tumblers".}} |
| − | + | ---- | |
| + | [[File:meego datepicker 01.png|400x300px]] [[File:meego datepicker 02.png|400x300px]] [[File:meego datepicker 02.png|400x300px]] | ||
{{ArticleMetaData <!-- v1.2 --> | {{ArticleMetaData <!-- v1.2 --> | ||
|sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] --> | |sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] --> | ||
| Line 12: | Line 13: | ||
|signing= <!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer --> | |signing= <!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer --> | ||
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. --> | |capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. --> | ||
| − | |keywords= | + | |keywords= DatePickerDialog, TimePickerDialog |
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese --> | |language= <!-- Language category code for non-English topics - e.g. Lang-Chinese --> | ||
|translated-by= <!-- [[User:XXXX]] --> | |translated-by= <!-- [[User:XXXX]] --> | ||
| Line 24: | Line 25: | ||
|author= [[User:gaba88]] | |author= [[User:gaba88]] | ||
}} | }} | ||
| − | + | == Code snippet == | |
| − | == | + | Note that as these are part of the extras component, we need to include {{Icode|import com.nokia.extras 1.0}} in our QML script. |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
<code javascript> | <code javascript> | ||
| − | |||
import QtQuick 1.1 | import QtQuick 1.1 | ||
import com.nokia.meego 1.0 | import com.nokia.meego 1.0 | ||
| Line 95: | Line 84: | ||
</code> | </code> | ||
| − | |||
| − | |||
| − | |||
Latest revision as of 13:51, 13 June 2012
This article demonstrates how to use DatePickerDialog and TimePickerDialog from the MeeGo Qt Quick Components Extras. These handy components allow users to select dates and times using "tumblers".
Article Metadata
Tested with
SDK: Qt SDK 1.1.3
Devices(s): N950
Compatibility
Platform(s): MeeGo Harmattan
Article
Keywords: DatePickerDialog, TimePickerDialog
Created: gaba88
(30 Sep 2011)
Last edited: hamishwillee
(13 Jun 2012)
Code snippet
Note that as these are part of the extras component, we need to include import com.nokia.extras 1.0 in our QML script.
import QtQuick 1.1
import com.nokia.meego 1.0
import com.nokia.extras 1.0
Page{
id:dialogPage
function showTimePicker(){
timePickerDialog.open()
}
function showDatePicker(){
datePickerDialog.open()
}
function timePickerAccepted(){
dateLabel.text = "Selected Time: "+timePickerDialog.hour+":"+timePickerDialog.minute+":"+timePickerDialog.second
}
function datePickerAccepted(){
dateLabel.text = "Selected Date: "+datePickerDialog.day+"/"+datePickerDialog.month+"/"+datePickerDialog.year
}
ButtonColumn{
id:buttonColumn
anchors.top: parent.top ; anchors.topMargin: 20
width: parent.width
Button{
text: "Show Date Picker"
onClicked: {
showDatePicker()
}
}
Button{
text: "Show Timer Picker"
onClicked: {
showTimePicker()
}
}
}
Label{
id:dateLabel
anchors.top:buttonColumn.bottom ; anchors.topMargin: 20
width: buttonColumn.width; height: buttonColumn.height
}
DatePickerDialog{
id:datePickerDialog
titleText: "Select Date"
onAccepted: {datePickerAccepted()}
}
TimePickerDialog{
id:timePickerDialog
titleText: "Select Time"
acceptButtonText: "Confirm"
rejectButtonText: "Reject"
onAccepted: timePickerAccepted()
}
}
