The common answer on the web for this question is to set the
readonly attribute in the input tag:
<input id="my-datepicker" readonly="true" name="thedate" />
This indeed works (for most browsers, anyway). However, the input will usually will be rendered as disabled (grayed out) by the browser, which can be confusing to the user.
Instead, try capturing the keypress event:[crayon-5c9377b7347e1287800175/]
The datepicker still fires so the user has the calendar to choose the date.