showDatePicker

Content:
- Examples

A DatePicker in mobile UIs enables users to select dates using a visual calendar interface.

dtp = ui.showDatePicker( date, options, onSelect ) → ui object: DatePicker

### options Props
format: String. Moment date format. Default is "YYYY-MM-DD"
portrait: Boolean. Display the date picker in portrait view. Default is detective in the size of the screen.
future: String. The future value until which the dialog will render dates in the following format "YYYY-MM-DD"
past: String. The past until which the dialog will render dates in the following format "YYYY-MM-DD".

### Date formatting
DatePicker dialog uses moment js library, see https://momentjs.com/docs/ for more date formatting values.
Sample values are:
* "MMMM Do YYYY" : December 13th 2023
"dddd" : Wednesday
"MMM Do YY": Dec 13th 23

Examples

Example - Default click to expand contents

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

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

    showDatePicker()
    {
        // Display the date picker dialog
        ui.showDatePicker( this.onSelect )
    }

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

Copy All

Example - With initial value and options object click to expand contents

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

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

    showDatePicker()
    {
        // Display the date picker dialog
        var opt = {
            portrait: true,
            format: "YYYY Do MMM"
        }
        ui.showDatePicker("2022-12-25", opt, this.onSelect);
    }

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

Copy All

Example - Dark mode with date limits click to expand contents

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

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

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

    showDatePicker()
    {
        // Display the date picker dialog
        var opt = {
            past: "2023-12-05",
            future: "2023-12-25"
        }
        ui.showDatePicker("2023-12-15", opt, this.onSelect)
    }

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

Copy All

Examples

Example - Default click to expand contents

Example - With initial value and options object click to expand contents

Example - Dark mode with date limits click to expand contents

loading