Back

showDateTimePicker

JS Py

Hello World

Content:
- Examples

A DateTimePicker in mobile UI design combines date and time selection in one interface.

dtp = ui.showDateTimePicker( date?, time?, format?, onSelect? ) → ui object: DateTimePicker

If you want a date picker only see DatePicker or if you want time picker only see TimePicker

Examples

Example - Default

class Main extends App
{
    onStart()
    {
        this.main = ui.addLayout("main", "Linear", "VCenter,FillXY")

        this.btn = ui.addButton(this.main, "Show Date Time Picker", "Primary")
        this.btn.setOnTouch( this.btn_onTouch )
    }

    btn_onTouch()
    {
        ui.showDateTimePicker( this.onDateTime )
    }

    onDateTime( val )
    {
        ui.showPopup( val )
    }
}

class Main extends App
    onStart()
        this.main = ui.addLayout("main", "Linear", "VCenter,FillXY")

        this.btn = ui.addButton(this.main, "Show Date Time Picker", "Primary")
        this.btn.setOnTouch( this.btn_onTouch )

    btn_onTouch()
        ui.showDateTimePicker( this.onDateTime )

    onDateTime( val )
        ui.showPopup( val )

Copy All Run

Example - With initial values, format and custom theme

class Main extends App
{
    onStart()
    {
        // Set the primary theme color
        ui.setThemeColor( "#673ab7" );

        // Create a fullscreen layout with objects vertically centered
        this.main = ui.addLayout("main", "Linear", "VCenter,FillXY")

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

    btn_onTouch()
    {
        // Show the datetime picker dialog and passing initial date and time
        // date format : "YYYY-MM-DD"
        // time format : "HH:MM:SS"
        // value format: LLL
        ui.showDateTimePicker("2023-10-10", "17:00:00", "LLL", this.onDateTime )
    }

    onDateTime( val )
    {
        ui.showPopup( val )
    }
}

class Main extends App
    onStart()
        # Set the primary theme color
        ui.setThemeColor( "#673ab7" )

        # Create a fullscreen layout with objects vertically centered
        this.main = ui.addLayout("main", "Linear", "VCenter,FillXY")

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

    btn_onTouch()
        # Show the datetime picker dialog and passing initial date and time
        # date format : "YYYY-MM-DD"
        # time format : "HH:MM:SS"
        # value format: LLL
        ui.showDateTimePicker("2023-10-10", "17:00:00", "LLL", this.onDateTime )

    onDateTime( val )
        ui.showPopup( val )

Copy All Run

Example - Dark mode

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

        this.main = ui.addLayout("main", "Linear", "VCenter,FillXY")

        this.btn = ui.addButton( this.main, "Show Date Time Picker", "Primary" )
        this.btn.setOnTouch( this.btn_onTouch )
    }

    btn_onTouch()
    {
        ui.showDateTimePicker( this.onDateTime )
    }

    onDateTime( val )
    {
        ui.showPopup( val )
    }
}

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

        this.main = ui.addLayout("main", "Linear", "VCenter,FillXY")

        this.btn = ui.addButton( this.main, "Show Date Time Picker", "Primary" )
        this.btn.setOnTouch( this.btn_onTouch )

    btn_onTouch()
        ui.showDateTimePicker( this.onDateTime )

    onDateTime( val )
        ui.showPopup( val )

Copy All Run

String: “Default value for date of the form "YYYY-MM-DD"”

String: “Default value for time of the form "HH:SS"”

String: “The format of the value that will be pass to the `onSelect` callback. Default is `"YYYY-MM-DD HH:SS"`. You can refer to for more date time formats. Sample formats: `"MMMM Do YYYY”, “ h:ss a"`”, “ `"dddd"`”, “ `"MMM Do YY"`”, “ `"LLL"`”

function()