I'm building a web app using Bootstrap styling. I have a datepicker equipped textbox scenario where I would like to avoid the hassle of date string validation. I'm thinking I can simply check for empty string values (no input) as the only necessary validation and disable keyboard input. This way the only input possible is through the datepicker.

My only problem is that the applying the disabled attribute to the datepicker box disables clicking, and the datepicker is shown via the on click for the textbox.

Thus my question is this: how can I disable input for a textbox while still allowing clicking?

I'm building a web app using Bootstrap styling. I have a datepicker equipped textbox scenario where I would like to avoid the hassle of date string validation. I'm thinking I can simply check for empty string values (no input) as the only necessary validation and disable keyboard input. This way the only input possible is through the datepicker.

My only problem is that the applying the disabled attribute to the datepicker box disables clicking, and the datepicker is shown via the on click for the textbox.

Thus my question is this: how can I disable input for a textbox while still allowing clicking?

• javascript
• jquery
• textbox
• disabled-input
• bootstrap-datepicker

• Why don't you use something other than a textbox? e.g. clickable text, button – colti Commented Aug 22, 2014 at 21:48
• if you really want the textbox to be disabled then you can place an element in front of the disabled input and catch the click on that element. – Sizzling Code Commented Aug 22, 2014 at 21:51

1 Answer 1

You can use the readonly attribute instead of disabled.

While disabled elements do not respond to events (such as click or hover), readonly elements behave just like regular elements, although they are not editable. Disabled elements are also not sent on form submits.

JSFiddle