×
Namespaces

Variants
Actions
(Difference between revisions)

DatePicker and TimePicker Dialogs in MeeGo Qt Quick Extras Components

From Nokia Developer Wiki
Jump to: navigation, search
gaba88 (Talk | contribs)
(Gaba88 -)
 
hamishwillee (Talk | contribs)
m (Text replace - "Category:MeeGo" to "Category:MeeGo Harmattan")
 
(7 intermediate revisions by 2 users not shown)
Line 1: Line 1:
[[Category:Draft]][[Category:Qt]][[Category:Qt Quick]][[Category:MeeGo]]
+
[[Category:Qt Quick]][[Category:MeeGo Harmattan]][[Category:UI]]
[[Category:MeeGo 1.2 Harmattan]]
+
{{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".}}  
 
+
----
{{Abstract|This article explains how to use DatePickerDialog and TimePickerDialog in your application for MeeGo-Harmattan Devices. }}  
+
[[File:meego datepicker 01.png|400x300px]] [[File:meego datepicker 02.png|400x300px]] [[File:meego datepicker 02.png|400x300px]]
 
+
{{ArticleMetaData <!-- v1.2 -->
{{ArticleMetaData
+
|sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
 +
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
 
|devices= N950
 
|devices= N950
|sdk= [https://www.developer.nokia.com/info/sw.nokia.com/id/da8df288-e615-443d-be5c-00c8a72435f8/Qt_SDK.html Qt SDK 1.1.3]
+
|sdk= [http://www.developer.nokia.com/info/sw.nokia.com/id/da8df288-e615-443d-be5c-00c8a72435f8/Qt_SDK.html Qt SDK 1.1.3]
 
|platform= MeeGo Harmattan
 
|platform= MeeGo Harmattan
|keywords= Qt Quick Component for MeeGo Harmattan
+
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
|creationdate= 2011/09/30
+
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
 +
|signing= <!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
 +
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 +
|keywords= DatePickerDialog, TimePickerDialog
 +
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 +
|translated-by= <!-- [[User:XXXX]] -->
 +
|translated-from-title= <!-- Title only -->
 +
|translated-from-id= <!-- Id of translated revision -->
 +
|review-by= <!-- After re-review: [[User:username]] -->
 +
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 +
|update-by= <!-- After significant update: [[User:username]]-->
 +
|update-timestamp= <!-- After significant update: YYYYMMDD -->
 +
|creationdate= 20110930
 
|author= [[User:gaba88]]
 
|author= [[User:gaba88]]
 
}}
 
}}
 
+
== Code snippet ==
== Introduction ==
+
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.  
DatePickerDialog and TimePickerDialog are two small but important UI components. Using which Developer can query for date and time in his application.
+
 
+
This article explains how to use both of these component within your MeeGo-Harmattan Application.
+
 
+
These two components are not part of the normal Qt Quick Components for MeeGo, instead they included in the Extras Section of Qt Quick Component.
+
 
+
So prior to using these component one need to include ''' import com.nokia.extras 1.0 ''' in applications QML script.  
+
 
+
Lets have a look at the QML code and the Screenshots to get a better understanding.
+
 
+
== Code Snippet ==
+
  
 
<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 83: Line 84:
  
 
</code>
 
</code>
 
== ScreenShots ==
 
[[File:meego_datepicker_01.png|400x300px]] [[File:meego_datepicker_02.png|400x300px]] [[File:meego_datepicker_02.png|400x300px]]
 

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".


Meego datepicker 01.png Meego datepicker 02.png Meego datepicker 02.png

Article Metadata
Tested with
Devices(s): N950
Compatibility
Platform(s): MeeGo Harmattan
Article
Keywords: DatePickerDialog, TimePickerDialog
Created: gaba88 (30 Sep 2011)
Last edited: hamishwillee (13 Jun 2012)

[edit] 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()
}
}
This page was last modified on 13 June 2012, at 13:51.
84 page views in the last 30 days.