Skip to main content
Version: v11.8.5

Custom Date Picker in Mobile


In this document, learn how to show the custom date picker instead of the native picker in a mobile project.

Custom date picker works similar to the one that renders in the web project. You can use the web version of the date picker for the mobile projects as well. To do this, set the Show Custom Picker property from the properties panel of the Date and Datetime widgets from a mobile project.

Date Pickers in Web and Mobile

Typically for a web project, on clicking the date, a custom picker opens when it renders on a web browser, and it uses the native picker when it renders on a mobile browser, as shown below.

note

The following screenshots were taken from android version 7.0 and iPhone version 14. Therefore, the date pickers may vary slightly depending on the device version.

Date Picker in Web

web custom picker

Date Picker in Android

mobile native picker

Date Picker in iOS

mobile native picker

How it Works

To display the custom date picker like the web version of it, enable the Show Custom Picker property from the properties panel.

showcustompicker_prop

When setting the Show Custom Picker property to true, the Show DatePicker On property and Date Entry Mode property will enable. For more information, see datetime properties.

Custom Picker for Web Apps with Mobile View

To show a custom picker instead of a native picker for a web app rendered in a mobile, set the showcustompicker property in the markup as shown below. This applies to Date, Time and Datetime widgets.

note

The markup extension is specifically for web apps to customize web projects to render mobile views with the custom date picker.

<wm-date name="date1" showcustompicker="true"></wm-date>

output