Back

showTimePicker

JS Py

Hello World

Content:
- Examples

A Time Picker in mobile UI design allows users to select a specific time.

tpk = ui.showTimePicker( time, options, onSelect ) → ui object: TimePicker

Examples

Example - Default

class Main extends App
{
    onStart()
    {
        // Creates a layout with objects verticaly centered.
        this.main = ui.addLayout( "main", "Linear", "VCenter,FillXY")

        // button to show time picker
        this.btn = ui.addButton( this.main, "Show Time Picker")
        this.btn.setOnTouch( this.showTimePicker )
    }

    showTimePicker()
    {
        // show time picker
        ui.showTimePicker( this.onSelect )
    }

    onSelect( value )
    {
        ui.showPopup( value );
    }
}

class Main extends App
    onStart()
        # Creates a layout with objects verticaly centered.
        this.main = ui.addLayout( "main", "Linear", "VCenter,FillXY")

        # button to show time picker
        this.btn = ui.addButton( this.main, "Show Time Picker")
        this.btn.setOnTouch( this.showTimePicker )

    showTimePicker()
        # show time picker
        ui.showTimePicker( this.onSelect )

    onSelect( value )
        ui.showPopup( value )

Copy All Run

Example - With initial value, options and theme color

class Main extends App
{
    onStart()
    {
        ui.setThemeColor( "#673ab7" )

        // Creates a layout with objects verticaly centered.
        this.main = ui.addLayout("main", "Linear", "VCenter,FillXY")

        // Add a button to the main layout to show time picker when click
        this.btn = ui.addButton(this.main, "Show Time Picker")
        this.btn.setOnTouch( this.showTimePicker )
    }

    showTimePicker()
    {
        // show time picker dialog with initial value
        ui.showTimePicker("08:24", "Portrait", this.onSelect)
    }

    onSelect( value )
    {
        ui.showPopup( value );
    }
}

class Main extends App
    onStart()
        ui.setThemeColor( "#673ab7" )

        # Creates a layout with objects verticaly centered.
        this.main = ui.addLayout("main", "Linear", "VCenter,FillXY")

        # Add a button to the main layout to show time picker when click
        this.btn = ui.addButton(this.main, "Show Time Picker")
        this.btn.setOnTouch( this.showTimePicker )

    showTimePicker()
        # show time picker dialog with initial value
        ui.showTimePicker("08:24", "Portrait", this.onSelect)

    onSelect( value )
        ui.showPopup( value )

Copy All Run

Example - Dark mode

class Main extends App
{
    onStart()
    {
        ui.setTheme( "dark" )

        // Creates a layout with objects verticaly centered.
        this.main = ui.addLayout("main", "Linear", "VCenter,FillXY")

        // Add a button to the main layout to show time picker when click
        this.btn = ui.addButton(this.main, "Show Time Picker")
        this.btn.setOnTouch( this.showTimePicker )
    }

    showTimePicker()
    {
        // show time picker dialog with initial value
        ui.showTimePicker("08:24", "Portrait", this.onSelect)
    }

    onSelect( value )
    {
        ui.showPopup( value );
    }
}

class Main extends App
    onStart()
        ui.setTheme( "dark" )

        # Creates a layout with objects verticaly centered.
        this.main = ui.addLayout("main", "Linear", "VCenter,FillXY")

        # Add a button to the main layout to show time picker when click
        this.btn = ui.addButton(this.main, "Show Time Picker")
        this.btn.setOnTouch( this.showTimePicker )

    showTimePicker()
        # show time picker dialog with initial value
        ui.showTimePicker("08:24", "Portrait", this.onSelect)

    onSelect( value )
        ui.showPopup( value )

Copy All Run

String: “A default time value to which the timepicker begins. Value is of the form `HH”

String: “A comma separated options.
Orientation: `Portrait`”, “ `Landscape`
Format: `24H`”, “ `12H`”

function()