A DateTimePicker in mobile UI design combines date and time selection in one interface.
If you want a date picker only see DatePicker or if you want time picker only see TimePicker
Examples
Example - Default click to expand contents
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 )
}
}
{
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 )
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 )
Example - With initial values, format and custom theme click to expand contents
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 )
}
}
{
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 )
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 )
Example - Dark mode click to expand contents
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 )
}
}
{
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 )
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 )