Back

addDatePicker

JS Py

Hello World

Content:
- Properties
- Methods

Adds a date picker component to the app.

dtp = ui.addDatePicker( date, options ) → Object: DatePicker Component

Properties

These are the setter and getter properties for the addDatePicker Component.

format

Example - Default

class Main extends App
{
    onStart()
    {
        // Creates a fullscreen layout with objects vertically centered.
        this.main = ui.addLayout( "main", "Linear", "Top,VCenter", 1, 1 )
        this.main.setMargins( 0.01, 0.01, 0.01, 0.01 )

        // Add a button to the main layout
        this.btn = ui.addButton( this.main, "Show Date Picker", "Secondary" )
        this.btn.setOnTouch( this.showDatePicker )

        // Initialize date picker
        this.dtp = ui.addDatePicker()
    }

    showDatePicker()
    {
        // Display the date picker dialog
        this.dtp.show()
    }
}

from hybrid import ui

def OnStart():
    global dtp
    # Creates a fullscreen layout with objects vertically centered.
    main = ui.addLayout("main", "Linear", "Top,Vcenter", 1, 1)
    main.setMargins(0.01, 0.01, 0.01, 0.01)

    # Add a button to the main layout
    btn = ui.addButton(main, "Show Date Picker", "Secondary")
    btn.setOnTouch(showDatePicker)

    # Initialize date picker
    dtp = ui.addDatePicker()

def showDatePicker(event):
    # Display the date picker dialog
    dtp.show()

Copy All Run

Example - With initial value & portrait

class Main extends App
{
    onStart()
    {
        // Creates a fullscreen layout with objects vertically centered.
        this.main = ui.addLayout( "main", "Linear", "Top,VCenter", 1, 1 )
        this.main.setMargins( 0.01, 0.01, 0.01, 0.01 )

        // Add a button to the main layout
        this.btn = ui.addButton( this.main, "Show Date Picker", "Secondary" )
        this.btn.setOnTouch( this.showDatePicker )

        // With initial value. Date must be of the form "YYYY-MM-DD"
        this.dtp = ui.addDatePicker( "2022-12-25", "Portrait" )
    }

    showDatePicker()
    {
        // Display the date picker dialog
        this.dtp.show()
    }
}

from hybrid import ui

def OnStart():
    global dtp
    # Creates a fullscreen layout with objects vertically centered.
    main = ui.addLayout("main", "Linear", "Top,Vcenter", 1, 1)
    main.setMargins(0.01, 0.01, 0.01, 0.01)

    # Add a button to the main layout
    btn = ui.addButton(main, "Show Date Picker", "Secondary")
    btn.setOnTouch(showDatePicker)

    # With initial value. Date must be of the form "YYYY-MM-DD"
    dtp = ui.addDatePicker("2022-12-25", "Portrait")

def showDatePicker(event):
    # Display the date picker dialog
    dtp.show()

Copy All Run

Example - With limits & callback

class Main extends App
{
    onStart()
    {
        // Creates a fullscreen layout with objects vertically centered.
        this.main = ui.addLayout( "main", "Linear", "Top,VCenter", 1, 1 )
        this.main.setMargins( 0.01, 0.01, 0.01, 0.01 )

        // Add a button to the main layout
        this.btn = ui.addButton( this.main, "Show Date Picker", "Secondary" )
        this.btn.setOnTouch( this.showDatePicker )

        // With initial value. Date must be of the form "YYYY-MM-DD"
        this.dtp = ui.addDatePicker( "2022-12-25", "Portrait" )
        this.dtp.setOnSelect( this.onSelect )
    }

    showDatePicker()
    {
        // Display the date picker dialog
        this.dtp.show()
    }

    onSelect( value )
    {
        console.log( value )
    }
}

from hybrid import ui
from native import app

def OnStart():
    global dtp
    # Creates a fullscreen layout with objects vertically centered.
    main = ui.addLayout("main", "Linear", "Top,Vcenter", 1, 1)
    main.setMargins(0.01, 0.01, 0.01, 0.01)

    # Add a button to the main layout
    btn = ui.addButton(main, "Show Date Picker", "Secondary")
    btn.setOnTouch(showDatePicker)

    # With initial value. Date must be of the form "YYYY-MM-DD"
    dtp = ui.addDatePicker("2022-12-25", "Portrait")
    dtp.setOnSelect(onSelect)

def showDatePicker(event):
    # Display the date picker dialog
    dtp.show()

def onSelect(value):
    app.ShowPopup(value)

Copy All Run

Methods

The following methods are available on the DatePicker object:

hide()

isVisible() → Boolean

setFormat( format )

setLimits( past, future )

setOnSelect( callback )

show()

String: “A default date value to which the datepicker begins. Format `YYYY-MM-DD`”

String: comma “,” separated: “`Portrait` `Landscape`”

String: “A date format. Can be `YYYY-MM-DD` `MM-DD-YYYY` `DD-MM-YYYY`”

String: “Date in the past of the form `YYYY-MM-DD`”

String: “Date in the future of the form `YYYY-MM-DD`”

String: Sets or returns the format of the selected date. Values are YYYY-MM-DD MM-DD-YYYY or DD-MM-YYYY

function( date )

dtp.hide
Hide the date picker dialog

dtp.isVisible
Get the current visibility of the date picker

dtp.setFormat
Sets the format of the date to be passed into the onSelect callback

dtp.setLimits
Set a limit to which the date picker dialog can render a date

dtp.setOnSelect
Sets a callback function to execute when date picker dialog is submitted

dtp.show
Show the date picker the dialog