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.