outsystems Date Picker Issue

Arkyadeep Bharadwaj

Solved

Question

i am using outsaystems datepicker control and i am using seteditableinput at oninitialize of Datepicker for this reason this field user can enter but i have mentioned the date format like below but stull user is able to enter any data in textbox.any thing i am missing.

in service studio

In UI

02 Apr

Gourav Shrivastava

Champion

Solution

Replying to Arkyadeep Bharadwaj's comment on 07 Apr 2026 08:37:30

Hello @Arkyadeep Bharadwaj

I have made some changes in JS to strictly follow the date format. You can check here and let me know any changes you want

https://personal-eewexkfl.outsystemscloud.com/TestDatepicker/test

Thanks

Gourav Shrivastava

See solution in context

TestDatepickerImproved.oml

08 Apr

Rounak Rawat

Hii @Arkyadeep Bharadwaj,

I’m unable to replicate this issue on my end; the Date Picker appears to be working as expected.
could you please share oml file.

Thank you

02 Apr

Siya

MVP

@Rounak Rawat : It is reproducable for that you need to set DatePickerSetEditableInput with Id of the DatePicker ( not the id of the text box inside it)

@Arkyadeep Bharadwaj : Looks like this is by design. May be using some Js this could be prevented. btw what I have observed is as soon as the focus is lost the invalid values are cleared. . Let’s wait to see if someone has a workaround.

02 Apr

2 replies

Last reply 02 Apr

Show thread

Hide thread

Arkyadeep Bharadwaj

yes you are correct i think we have to restrict the input with help of JS.let me check.

02 Apr

Siya

MVP

Replying to Arkyadeep Bharadwaj's comment on 02 Apr 2026 08:56:42

I attached Js that seems working - prevent text input and accept only numbers and auto format ( Note : AI. generated code and use it with caution). Please see if it works for you.

Note : Input to this Js should be Id of DatePicker not the Id of the text input.

Js.txt

02 Apr

Saugat Biswas

AI Generated

Hi @Arkyadeep Bharadwaj,

Let's first understand that DatePicker is not an equivalent of Input validator.

The DatePicker is essentially:

A Text Input
With a calendar popup
With automatic parsing after focus is lost

Until validation happens:

Users can type any characters
Format is only applied when:
- Date is picked from calendar
- Validation logic runs

Secondly, DateFormat is NOT an input mask. When you set:

TextDateFormat = "dd/MM/yyyy"

This means:

How the date is shown visually when selected from calendar
How OutSystems tries to parse it

It does not prevent writing any text in the text input.

Solution: There are a couple of ways to handle this:

Option 1: Validate on Change / On Blur

Add custom validation when the value changes.

Example logic (Reactive):

Event: OnChange or OnBlur
Validate:
- Value is not null
- Value matches expected date format
If invalid:
- Show validation message
- Reset value

Option 2: Make it calendar‑only (strict)

User can only pick date from calendar
No manual typing

Option 3: Use a masked Text Input alongside DatePicker

Use a Text Input
Apply:
- Input mask (Forge / JS)
- Regex validation
Convert to Date in logic.

Hope this helps,

Cheers,

Saugat

02 Apr

This answer was AI-generated. Please read it carefully and use the forums for clarifications

1 reply

02 Apr

Show thread

Hide thread

Arkyadeep Bharadwaj

I have gone through the documentation.i have added Javascript already.now it's working fine.user can enter only dd/mm/yyyy format now.i was thinking that this date format only it will accept if user entered.

Thanks

02 Apr

Saugat Biswas

Please ensure to mark the correct response as solution. This helps community members to directly reach for solution in case they come across similar issue.

Cheers,

Saugat

02 Apr

4 replies

Last reply 08 Apr

Show thread

Hide thread

Arkyadeep Bharadwaj

i unmarked your solution because i tried with solution 1 and solution 3 both are not working.i have attached my OML file.can you please check and revert back.if i miss anything please let me know.if it will work i will mark your reply as solution.

TestDatepicker.oml

07 Apr

Gourav Shrivastava

Champion

Solution

Replying to Arkyadeep Bharadwaj's comment on 07 Apr 2026 08:37:30

Hello @Arkyadeep Bharadwaj

I have made some changes in JS to strictly follow the date format. You can check here and let me know any changes you want

https://personal-eewexkfl.outsystemscloud.com/TestDatepicker/test

Thanks

Gourav Shrivastava

TestDatepickerImproved.oml

08 Apr

Gourav Shrivastava

Champion

Replying to your comment on 08 Apr 2026 06:36:56

One more thing, if you don't want post-validation of dates and month you can replace this code in js block, so you will get instant validation of invalid dates

const input = document.querySelector(".input-date input:nth-of-type(2)");
input.addEventListener("input", function (e) {
let value = e.target.value.replace(/\D/g, "");
let day = value.substring(0, 2);
let month = value.substring(2, 4);
let year = value.substring(4, 8);

//Restrict DAY
if (day.length === 2) {
if (parseInt(day) < 1) day = "01";
if (parseInt(day) > 31) day = "31";
}

// Restrict MONTH
if (month.length === 2) {
if (parseInt(month) < 1) month = "01";
if (parseInt(month) > 12) month = "12";
}

// Combine with formatting
let formatted = day;
if (month) formatted += "/" + month;
if (year) formatted += "/" + year;

e.target.value = formatted;
});

Thanks

Gourav Shrivastava

08 Apr

Arkyadeep Bharadwaj

Replying to Gourav Shrivastava's comment on 08 Apr 2026 06:43:35

its working fine.thanks for your support.

08 Apr

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

See the full guidelines