21
Views
8
Comments
Solved
Is there any way to hide the arrows in timepicker in reactive ?
Question
Application Type
Reactive

Is there any way to hide the arrows in timepicker in reactive ?

2023-11-22 10-51-50
Jozy Sohail
Solution

Hi,

Just write this css in your block or screen level css which is having the time picker.

.numInputWrapper span:after {

    display: none !important;  

  content: "";  

  position: absolute;

}

Attaching OML for reference. check the timepicker screen.

hope it helps.

Thanks

Timepicker.oml
2026-06-04 08-43-36
ssavva05

Can I hide the arrow boxes as well ?

doing this, will solve the Issues!

2023-11-22 10-51-50
Jozy Sohail
Solution


.flatpickr-calendar .numInputWrapper span:active, .flatpickr-calendar .numInputWrapper span:hover

{        

 background: transparent ;

}


add this class in your style sheet

2026-06-04 08-43-36
ssavva05
2023-11-22 10-51-50
Jozy Sohail
Solution


.flatpickr-calendar .numInputWrapper span:active, .flatpickr-calendar .numInputWrapper span:hover

{        

 background: transparent ;

}


add this class in your style sheet

2025-06-01 02-51-51
YASH PAL

yes i have done this using the css. just add display: none; property to your date picker class.

Please share screenshot or something like which timepicker you have used.


mostly the icon is present on the ::after css.

2026-06-04 08-43-36
ssavva05

2026-06-04 08-43-36
ssavva05

Is the input filed must be text ?

2025-06-01 02-51-51
YASH PAL

savvas can you give the url. so i can check the class and send to you

also give me a screenshot for which arrow you want to hide.

2023-11-22 10-51-50
Jozy Sohail
Solution

Hi,

Just write this css in your block or screen level css which is having the time picker.

.numInputWrapper span:after {

    display: none !important;  

  content: "";  

  position: absolute;

}

Attaching OML for reference. check the timepicker screen.

hope it helps.

Thanks

Timepicker.oml
2026-06-04 08-43-36
ssavva05

Can I hide the arrow boxes as well ?

doing this, will solve the Issues!

2023-11-22 10-51-50
Jozy Sohail
Solution


.flatpickr-calendar .numInputWrapper span:active, .flatpickr-calendar .numInputWrapper span:hover

{        

 background: transparent ;

}


add this class in your style sheet

2026-06-04 08-43-36
ssavva05
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.