Adding a calendar picker/helper to your application allow your end-users to quickly and easily pick dates in the correct format.
Adding a Calendar Picker
To add a date picker, open m-Painter and select the input field you would like to now utilize the picker.
![](/docs/images/datepicker1.png)
Next, in the element window, select “Calendar Picker.”
![](/docs/images/datepicker2.png)
Calendar Configuration
You will now be presented with configuration options for your Calendar Picker.
![](/docs/images/datepicker3.png)
Select a date format — You must select the format that matches your date’s format in the database.
Max Days in the past/future — Adding a number to either of these boxes will set a minimum/maximum date based on the number of days from today. For instance if you put “30” in each box, your user could only user the date picker to select a day within the window of 30 days ago through 30 days in the future.
Show Month/Year Selections? — This feature, when checked, allows the user to quickly switch to a different month or year, rather than paging through each month.
Remove Calendar Picker — Removes the calendar picker element from the input and reverts the input to a basic input.
Close — Closes the window without saving any changes.
Save — Saves your calendar picker configuration.
Once you have made all the changes you would like, please click the blue “Save” button. Run your application.
Runtime Example
![](/docs/images/datepicker4.png)