5
Views
3
Comments
[Input Mask React] Input Mask React combine with Input date
inputmask-react
Reactive icon
Forge asset by João Barata
Application Type
Reactive
Service Studio Version
11.54.41 (Build 63060)

Hi there, 
For a customer, I need to create a pattern, in which I'm going to use an input date. The need here is to be able to select a date with a native date picker AND being able to enter a date manually. To avoid errors, I'm using Input Mask React so the user is sure to enter a valid date format. However, using a mask seems to disable the date picker functionality. 
Anyone already seen this issue ? 
Regards, 
Vincent

2023-09-06 07-26-35
Sudip Pal

Hey @Vincent Perhirin 

I have a work around for that. If you want to show that calendar Icon and on click of that if you want to open date picker then follow the below approach

Use InputWithIcon instead of Input inside date picker widget

Then onClick of that CalendarIcon open the date picker.

This might help you.


Thanks,

Sudip

2025-04-10 11-25-12
Diogo Reis

Hi.

You should use the date picker from OutSystems UI.

This widget will only accept dates/datetimes and the picker will function smoothly.

UserImage.jpg
Vincent Perhirin

Hi @Diogo Reis
The issue with the datepicker from Outsystems is that the picker itself is always opening below the input. 
In my case, sometimes I need the picker to be opened above the input. 

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.