How to hide the input box in date picker widget and show only the calendar icon

can anyone please help me with my requirement that input box in "date picker" widget should be hidden and show only the calendar icon. It should take input from calendar as usual.  Thank you.
3 answers

Not sure why is that needed because the purpose of that box is to show the selected value. May be you understand that already and have another solution in place.

Answering to your question, you can add a class lets say .hide-datepicker on your date picker field. Then use the css ladder to reach to the input field and set the style to display none

The ladder might look like this


.hide-datepicker > .mx-compund-control > input {

display: none;


Please refer to your datepicker using dev tools.

The positioning of the calender gets a little messed up once you do this but you can adjust that as well using some css.


If you want to tweak and play around with css and hiding showing elements, use the dev tools (right click > Inspect) to play around with the css and then implement in you sass or css


Also you can use “visibility: hidden” css property for “.mx-compound-control input” class

.mx-compound-control input {
    visibility: hidden;
    min-width: 0;
    max-width: 0;
    padding: 0;
    border: 0;

This will retain the positioning of calendar 


I appreciate your answers. i have another question. i guess it will hide the text box every where i use the date picker widget. how can i ensure that i do the changes only on certain pages.