×
Namespaces

Variants
Actions
(Difference between revisions)

Date

From Nokia Developer Wiki
Jump to: navigation, search
hkaliste (Talk | contribs)
hamishwillee (Talk | contribs)
m (Hamishwillee - Bot update - Add ArticleMetaData)
 
(4 intermediate revisions by 3 users not shown)
Line 1: Line 1:
__NOTOC__
+
{{ArticleMetaData <!-- v1.2 -->
 +
|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= <!-- Devices tested against - e.g. ''devices=Nokia 6131 NFC, Nokia C7-00'') -->
 +
|sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Qt SDK 1.1.4]) -->
 +
|platform= <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
 +
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 +
|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= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
 +
|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= 20091109
 +
|author= [[User:Kbwiki]]
 +
}}
 +
[[Category:Guarana UI]]
 
=Inheritance=  
 
=Inheritance=  
<code>Nokia.Widget
+
<code>
     | - Nokia.Date
+
Nokia.Date
 +
     | - Nokia.Widget
 +
        |- Nokia.Class (basic class)
 
</code>
 
</code>
  

Latest revision as of 13:36, 30 July 2012

Article Metadata
Article
Created: User:Kbwiki (09 Nov 2009)
Last edited: hamishwillee (30 Jul 2012)

Contents

[edit] Inheritance

Nokia.Date
| - Nokia.Widget
|- Nokia.Class (basic class)

[edit] 1 - Description

The most popular use of this component is a form where one of the fields is a date. Such forms may ask for a birth date, friends' birthdays, or even a date for an appointment. The Date component will display three fields, day, month, and year. The developer can choose the order of the fields. The user will input the date in the fields.


[edit] 2 - Visual Design

Datepicker01.png

[edit] 3 - Component Dependencies

[edit] 3.1 CSS

<!-- Themeroller CSS -->
<link rel="stylesheet" href="themes/themeroller/<theme>/Themeroller.css" type="text/css" media="screen">
<!-- Specific Theme/Resolution CSS -->
<link rel="stylesheet" href="/themes/nokia/ext-theme/<theme>/<resolution>/custom.css" type="text/css" media="screen">


[edit] 3.2 Javascript

<!-- jQuery file -->
<script src="/lib/jquery/jQuery.js" type="text/javascript" charset="utf-8"></script>
<!-- Guarana file -->
<script src="/lib/Guarana.js" type="text/javascript" charset="utf-8"></script>

[edit] 4 - Functional Specifications/Requirements

[edit] 4.1 - Options

  • element: 'selector'
    • jQuery selector or the DOM reference to become the container of the component.
  • format: String
    • Defines the date format used by the component.
  • title: String
    • Defines the title used by the component.
  • yearRange: int
    • Defines the range of years used by the component.
  • i18n: String
    • Defines the internationalisation.
  • setDateDelay: int
    • Defines the time used in component interaction.
  • roundedCorners: boolean
    • Defines whether the component has rounded corners.
  • active: Class
    • Defines the CSS class used when active.
  • monthNames: Object[]
    • A list of month names.
  • monthNamesShort: Object[]
    • A list of month names in short mode.
  • dayNames: Object[]
    • A list of day names.
  • dayNamesShort: Object[]
    • A list of day names in short mode.


[edit] 4.2 - Events - Callbacks

  • create: function()
    • Scope: [this.element]
  • setDay: function(day)
    • Scope: [this.element]
  • setMonth: function(month)
    • Scope: [this.element]
  • setYear: function(year)
    • Scope: [this.element]
  • setDate: function(date)
    • Scope: [this.element]

[edit] 4.3 - Methods

  • getDate: function()
    • Returns the component date.
    • return [jQuery collection]
  • formatDate: function(format, date)
    • Formats the date according to a specific format.
    • return [jQuery collection]
  • setDay: function(day)
    • Sets the day property.
    • return [void]
  • setMonth: function(month)
    • Sets the month property.
    • return [void]
  • setYear: function(year)
    • Sets the year property.
    • return [int]
  • setDate: function(date)
    • Sets the date property.
    • return [void]


[edit] 4.4- Default options

  • element: 'body',
  • format: 'dd/mm/yy',
  • title: 'Pick a date',
  • yearRange: 10,
  • i18n: ,
  • setDateDelay: 800,


[edit] 5 - Component Demo

[edit] 5.1 HTML

<div id="datepicker"></div>

[edit] 5.2 Javascript

var datepicker = new Nokia.DatePicker({
     i18n: 'pt-BR',
     element: '#datepicker',
     yearRange: 5,
     roundedCorners: true,
     create: function() {
          //alert('Datepicker: created', this);
     },
     setDay: function(day) {
          //alert('Datepicker: setDay', this, day);
     },
     setMonth: function(month) {
          //alert('Datepicker: setMonth', this, month);
     },
     setYear: function(year) {
          //alert('Datepicker: setYear', this, year);
     },
     setDate: function(date) {
          //alert('Datepicker: setDate', this, date);
     }
};

[edit] 6 - Nokia WRT Browser Compatibility:

 

▴   S60 3.1 S60 3.2 S60 5.0
Date NO  YES  YES 

 

This page was last modified on 30 July 2012, at 13:36.
40 page views in the last 30 days.
×