×
Namespaces

Variants
Actions

QML Day of Week & Time Dialog

From Nokia Developer Wiki
Jump to: navigation, search

This code snippet provides a Symbian-specific custom QML dialog for selecting day of week and time (DayOfWeekTimeDialog).

Article Metadata
Code ExampleTested with
SDK: Nokia Qt SDK 1.2
Devices(s): all devices based on Symbian Anna, Nokia Belle
Compatibility
Platform(s): Symbian Anna, Nokia Belle
Symbian
Device(s): All
Dependencies: Symbian Qt Quick Components 1.1
Platform Security
Capabilities: None
Article
Keywords: Qml, daytime
Created: Den123 (11 Mar 2012)
Last edited: kiran10182 (01 Nov 2013)

QML Day of Week & Time Dialog

Note.pngNote: This QML element has been added to the Symbian Community Qt Quick Component Extras. There are no similar dialogs in the Symbian Qt Quick Components.

Contents

Overview

The code snippet below shows the full QML-component that implements this functionality.

The component uses CommonDialog as a base and offers following settings:

  • curDay - day of the week: Qt.Monday, Qt.Tuesday, ... Qt.Sunday
  • curHour - hours: 0 - 23
  • curMinute - minutes: 0 - 59

Functions for dialog launching:

  • launch() - open dialog according to the settings curDay, curHour, curMinute
  • launchForNow() - set parameters according to the current moment and open dialog

Source code

DayOfWeekTimeDialog.qml:

import QtQuick 1.1
import com.nokia.symbian 1.1
import com.nokia.extras 1.1
 
CommonDialog {
id: root
titleText: qsTr( "Select Day and Time" ) // dialog title
 
privateCloseIcon: true // show close button in the right corner of dialogs title
buttonTexts: [ qsTr( "Ok" ) ] // Ok button
 
property int curDay; // Qt.Monday = 1, Qt.Tuesday = 2, ... Qt.Sunday = 7
property alias curHour: colHour.selectedIndex // 0 - 23
property alias curMinute: colMin.selectedIndex // 0 - 59
 
function launch() {
fillModelsIfEmpty()
colDay.selectedIndex = curDay - 1
tumbler.privateInitialize()
open()
}
 
function launchForNow() {
var x = new Date()
curMinute = x.getMinutes()
curHour = x.getHours()
curDay = dayIdxByLocalizedDayName( Qt.formatDateTime( x, "dddd" ) )
launch()
}
 
onButtonClicked: accept() // ok was pressed
 
content: Item {
id: content
height: screen.currentOrientation === Screen.Portrait ? 260 : 250 // in real project move this values to separate js-file
width: screen.currentOrientation === Screen.Portrait ? 330 : 400
anchors.horizontalCenter: parent.horizontalCenter
 
Tumbler {
id: tumbler
anchors.fill: parent
anchors.margins: platformStyle.paddingSmall
columns: [colDay, colHour, colMin]
onChanged: root.curDay = colDay.selectedIndex + 1
 
privateDelayInit: true
 
TumblerColumn {
id: colDay
height: parent.height
width: 190
items: dayModel
label: qsTr( "Days of the Week" )
}
 
TumblerColumn {
id: colHour
height: parent.height
 
items: hourModel
label: qsTr( "Hrs" )
}
 
TumblerColumn {
id: colMin
height: parent.height
 
items: minModel
label: qsTr( "Mins" )
}
}
}
 
 
function localizedDayNameByIdx( idx )
{
if( idx >= Qt.Monday && idx <= Qt.Sunday )
{
var myDate = new Date()
 
myDate.setFullYear( 1980, 2, 17 ) // March 17, 1980 - we know, it was monday
myDate.setDate( myDate.getDate() + idx - 1 ) // Qt.Monday = 1
 
return Qt.formatDateTime( myDate, "dddd" )
}
 
return ""
}
 
function dayIdxByLocalizedDayName( dayName )
{
var res = -1
 
var myDate = new Date()
myDate.setFullYear( 1980, 2, 17 ) // March 17, 1980 - we know, it was monday
for( var i = 0; i < 7; i ++)
if( Qt.formatDateTime( myDate, "dddd" ) == dayName )
{
res = i + 1;
break
}
else
myDate.setDate( myDate.getDate() + 1 )
 
return res
}
 
 
 
// private
function fillModelsIfEmpty()
{
if( !dayModel.count )
{
var myDate = new Date()
myDate.setFullYear( 1980, 2, 17 ) // March 17, 1980 - we know, it was monday :)
for( var i = 0; i < 7; i ++)
{
dayModel.append( { "value" : Qt.formatDateTime( myDate, "dddd" ) } )
myDate.setDate( myDate.getDate() + 1 )
}
 
for( i = 0; i < 24; i++ )
hourModel.append( { "value" : i >= 10 ? i : "0" + i } );
 
for( i = 0; i < 60; i++ )
minModel.append( { "value" : i >= 10 ? i : "0" + i } );
}
}
 
ListModel { id: dayModel }
ListModel { id: hourModel }
ListModel { id: minModel }
}

How to use

DayOfWeekTimeDialog {
id: dlg
curDay: Qt.Saturday // Saturday, 23:59
curHour: 23
curMinute: 59
 
onAccepted: console.log( dlg.localizedDayNameByIdx( curDay ) + ", time: " + curHour + ":" + curMinute )
}
 
ToolButton {
text: "Launch dialog"
onClicked: dlg.launchForNow()
}


Links

This page was last modified on 1 November 2013, at 00:43.
84 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.

×