51
Views
10
Comments
Remove calendar icon from input
Question

Hi,

My input type is date and I want to remove this calendar icon from here

MY variable bound to this is also of type date and input type is also date.

Thanks and Regards,

Suraj Borade

2025-02-10 17-24-13
Arun Rajput

Hi Suraj,

May I know why you want to remove date icon when your input or variable both are date type?


2018-11-06 14-26-44
Suraj Borade

Hi,

We want users just to type and don't select from calendar.

Note : We tried to do with text inputs but so much customization we have to do.

2021-03-18 21-03-15
Benjith Sam
 
MVP

Hi Suraj,

You can use CSS to hide the calendar icon of the input date picker.

 Please refer to this post:  https://stackoverflow.com/a/57893173


Kind regards,

Benjith Sam

2025-08-28 16-49-37
Sathish Selvaraj

@Suraj Borade Try this CSS to hide calendar icon

input[type="date"]::-webkit-inner-spin-button,

input[type="date"]::-webkit-calendar-picker-indicator {

    display: none;

    -webkit-appearance: none;

}

2024-06-01 07-14-16
Vaishali Thakur

Hey, @Suraj Borade 

In the CSS editor of your Theme or Screen, add this CSS code -

input[type="date"]::-webkit-inner-spin-button,

input[type="date"]::-webkit-calendar-picker-indicator {    

display: none;

-webkit-appearance: none; } 

This CSS will hide the calendar icon, if displays: none; not working then you have to write your class and add it to your input calendar OutSystems class does not allow you to overnight CSS so that time you have to add it there !important on your CSS Ex-

display: none !important  ; 

I hope this was helpful to you 

thanks

2018-11-06 14-26-44
Suraj Borade

Thank you guys, after trying this CSS, date format is changing to dd-m-yyyy. I want date format to consistent.

Apart from css, is there any other way too?

2025-02-10 17-24-13
Arun Rajput

Hi Suraj,

If you going with date type variable then you need to define date format or if you want like free text so I would suggest you to go with text type variable.

2024-06-01 07-14-16
Vaishali Thakur

hey, @Suraj Borade 

right now your problem is not solved. if you want the date format to be consistent. you have to check your expression logic maybe there is something wrong.

FormatDateTime(<YourDate>, "dd-MM-yyyy")  

I hope you understand.

thanks

2024-07-16 17-36-51
Shradha Rawlani

Hi Suraj,

Possible Solution

DATE->TEXT

->Change Data Type of your date input field and variable to Text

->It will allow user to type, icon will not appear

Regards

Shradha

2018-11-06 14-26-44
Suraj Borade

Hi Shradha,

I already informed if I have to go with text, I will have to do so much customizations.

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