×
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 -)
 
gaba88 (Talk | contribs)
m (Gaba88 - removed the draft category)
Line 1: Line 1:
[[Category:Draft]][[Category:Qt]][[Category:Qt Quick]][[Category:MeeGo]]
+
[[Category:Qt]][[Category:Qt Quick]][[Category:MeeGo]][[Category:MeeGo 1.2 Harmattan]]
[[Category:MeeGo 1.2 Harmattan]]
+
 
+
 
{{Abstract|This article explains how to use DatePickerDialog and TimePickerDialog in your application for MeeGo-Harmattan Devices. }}  
 
{{Abstract|This article explains how to use DatePickerDialog and TimePickerDialog in your application for MeeGo-Harmattan Devices. }}  
  

Revision as of 10:34, 30 September 2011

This article explains how to use DatePickerDialog and TimePickerDialog in your application for MeeGo-Harmattan Devices.

Article Metadata
Tested with
Devices(s): N950
Compatibility
Platform(s): MeeGo Harmattan
Article
Keywords: Qt Quick Component for MeeGo Harmattan
Created: gaba88 (30 Sep 2011)
Last edited: gaba88 (30 Sep 2011)

Introduction

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

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()
}
}

ScreenShots

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

125 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×