showTimePicker

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 click to expand contents

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

Example - With initial value, options and theme color click to expand contents

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

Example - Dark mode click to expand contents

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

Examples

Example - Default click to expand contents

Example - With initial value, options and theme color click to expand contents

Example - Dark mode click to expand contents

loading