DatePicker Component

Properties

backgroundColor
  Specifies the DatePicker's background color as an red-green-blue-alpha RRGGBBAA or red-green-blue RRGGBB string. If an Image has been set, the color change will not be visible until the Image is removed.
Data type: color
Designer Writable true <datepicker name="datepickerName" backgroundColor="FFecf316">
Code Writeable true datepickerName.backgroundColor = "FFecf316"
Code Readable true let variable = datepickerName.backgroundColor

day
  Returns the Day of the month that was last picked using the DatePicker.
Data type: number
Designer Writable false
Code Writeable false
Code Readable true let variable = datepickerName.day

enabled
  Specifies whether the DatePicker should be active and clickable.
Data type: boolean
Designer Writable true <datepicker name="datepickerName" enabled="true">
Code Writeable true datepickerName.enabled = true
Code Readable true let variable = datepickerName.enabled

fontBold
  Specifies whether the text of the DatePicker should be bold. Some fonts do not support bold.
Data type: boolean
Designer Writable true <datepicker name="datepickerName" fontBold="true">
Code Writeable true datepickerName.fontBold = true
Code Readable true let variable = datepickerName.fontBold

fontItalic
  Specifies whether the text of the DatePicker should be italic. Some fonts do not support italic.
Data type: boolean
Designer Writable true <datepicker name="datepickerName" fontItalic="true">
Code Writeable true datepickerName.fontItalic = true
Code Readable true let variable = datepickerName.fontItalic

fontSize
  Specifies the text font size of the DatePicker, measured in sp(scale-independent pixels).
Data type: number
Designer Writable true <datepicker name="datepickerName" fontSize="0">
Code Writeable true datepickerName.fontSize = 0
Code Readable true let variable = datepickerName.fontSize

fontTypeface
  Specifies the text font face of the DatePicker as 'serif', 'sans serif', or 'monospace'.
Data type: string
Designer Writable true <datepicker name="datepickerName" fontTypeface="monospace">
Code Writeable false
Code Readable false

height
  Specifies the DatePicker's vertical height, measured in pixels.
Data type: number
Designer Writable false
Code Writeable true datepickerName.height = 48
Code Readable true let variable = datepickerName.height

heightPercent
  Specifies the DatePicker's vertical height as a percentage of the Screen's Height.
Data type: number
Designer Writable false
Code Writeable true datepickerName.heightPercent = "25%"
Code Readable false

image
  Specifies the path of the DatePicker's image. If there is both an Image and a BackgroundColor specified, only the Image will be visible.
Data type: string
Designer Writable true <datepicker name="datepickerName" image="cat.png">
Code Writeable true datepickerName.image = "cat.png"
Code Readable true let variable = datepickerName.image

instant
  Returns instant of the date that was last picked using the DatePicker.
Data type: InstantInTime
Designer Writable false
Code Writeable false
Code Readable true let variable = datepickerName.instant

month
  Returns the number of the Month that was last picked using the DatePicker.
Data type: number
Designer Writable false
Code Writeable false
Code Readable true let variable = datepickerName.month

monthInText
  Returns the name of the Month that was last picked using the DatePicker.
Data type: string
Designer Writable false
Code Writeable false
Code Readable true let variable = datepickerName.monthInText

shape
  Specifies the shape of the DatePicker. The valid values for this property are'round', 'rectangle' and 'oval'. The Shape will not be visible if an Image is used.
Data type: number
Designer Writable true <datepicker name="datepickerName" shape="oval">
Code Writeable false
Code Readable false

showFeedback
  Specifies if a visual feedback should be shown when a DatePicker with an assigned Image is pressed.
Data type: boolean
Designer Writable true <datepicker name="datepickerName" showFeedback="true">
Code Writeable true datepickerName.showFeedback = true
Code Readable true let variable = datepickerName.showFeedback

text
  Specifies the text displayed by the DatePicker.
Data type: string
Designer Writable true <datepicker name="datepickerName" text="Test text">
Code Writeable true datepickerName.text = "Test text"
Code Readable true let variable = datepickerName.text

textAlignment
  Specifies the alignment of the DatePicker's text. Valid values are 'left', 'right' and 'center'.
Data type: string
Designer Writable true <datepicker name="datepickerName" textAlignment="center">
Code Writeable false
Code Readable false

textColor
  Specifies the text color of the DatePicker as an red-green-blue-alpha RRGGBBAA or red-green-blue RRGGBB string.
Data type: color
Designer Writable true <datepicker name="datepickerName" textColor="FFed32be">
Code Writeable true datepickerName.textColor = "FFed32be"
Code Readable true let variable = datepickerName.textColor

visible
  Specifies whether the DatePicker should be visible on the screen. Value is true if the DatePicker is showing and false if hidden.
Data type: boolean
Designer Writable true <datepicker name="datepickerName" visible="true">
Code Writeable true datepickerName.visible = true
Code Readable true let variable = datepickerName.visible

width
  Specifies the horizontal width of the DatePicker, measured in pixels.
Data type: number
Designer Writable false
Code Writeable true datepickerName.width = 220
Code Readable true let variable = datepickerName.width

widthPercent
  Specifies the horizontal width of the DatePicker as a percentage of the Screen's Width.
Data type: number
Designer Writable false
Code Writeable true datepickerName.widthPercent = "22%"
Code Readable false

year
  Returns the Year that was last picked using the DatePicker.
Data type: number
Designer Writable false
Code Writeable false
Code Readable true let variable = datepickerName.year

class
  The styling class of the the component
Data type: string
Designer Writable true <datepicker name="datepickerName" class="Test class">
Code Writeable false
Code Readable false

id
  The styling id of the the component
Data type: string
Designer Writable true <datepicker name="datepickerName" id="Test id">
Code Writeable false
Code Readable false

name
  The name of the component that will be used to refer to it in code.
Data type: string
Designer Writable true <datepicker name="datepickerName" name="testComponent">
Code Writeable false
Code Readable false

Methods

Method name Description Parameters
launchPicker Launches the DatePicker dialog. The AfterDateSet event will be run after the user confirms their selection.
datepickerName.launchPicker()
setDateToDisplay Allows the user to set the date to be displayed when the date picker opens. Valid values for the month field are 1-12 and 1-31 for the day field.
datepickerName.setDateToDisplay(year, month, day)
datepickerName.setDateToDisplay(0, 0, 0)
year number
month number
day number
setDateToDisplayFromInstant Allows the user to set the date from the instant to be displayed when the date picker opens.
datepickerName.setDateToDisplayFromInstant(instant)
datepickerName.setDateToDisplayFromInstant(6548943121)
instant InstantInTime
addEventListener Method used to create event listeners.
See Events below for samples.
eventName string
eventCallbackFunction callback

Events

Event name Description Parameters
afterDateSet Event that runs after the user chooses a Date in the dialog.
datepickerName.addEventListener(
    "afterDateSet",
    function () {
        //Your code here
    }
)
gotFocus Indicates the cursor moved over the DatePicker so it is now possible to click it.
datepickerName.addEventListener(
    "gotFocus",
    function () {
        //Your code here
    }
)
lostFocus Indicates the cursor moved away from the DatePicker so it is now no longer possible to click it.
datepickerName.addEventListener(
    "lostFocus",
    function () {
        //Your code here
    }
)
touchDown Indicates that the DatePicker was pressed down.
datepickerName.addEventListener(
    "touchDown",
    function () {
        //Your code here
    }
)
touchUp Indicates that the DatePicker has been released.
datepickerName.addEventListener(
    "touchUp",
    function () {
        //Your code here
    }
)