I have a form I've put together using Bootstrap 3. Some of the fields are for date input, and I'm using Bootstrap 3 Datepicker to pop up calendars. I have put onkeydown="return false;" on the input controls to prevent free text from being inserted.

The trouble is, users can still (and will) clear the text box with the little X that bootstrap puts in there. Is it possible to remove this functionality?

Here's the datepicker markup. It's enabled depending upon the index value of a drop down list. I'm using webforms:

<div class="col-sm-3">
    <div class='input-group date' id='dateEnd'>
    <asp:TextBox ID="datepickerEnd" runat="server" CssClass="form-control datepickerEnd" Enabled="False" placeholder="Specify to date" onkeydown="return false;" />
    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
    </span>
    </div>
</div>

I have a form I've put together using Bootstrap 3. Some of the fields are for date input, and I'm using Bootstrap 3 Datepicker to pop up calendars. I have put onkeydown="return false;" on the input controls to prevent free text from being inserted.

The trouble is, users can still (and will) clear the text box with the little X that bootstrap puts in there. Is it possible to remove this functionality?

Here's the datepicker markup. It's enabled depending upon the index value of a drop down list. I'm using webforms:

<div class="col-sm-3">
    <div class='input-group date' id='dateEnd'>
    <asp:TextBox ID="datepickerEnd" runat="server" CssClass="form-control datepickerEnd" Enabled="False" placeholder="Specify to date" onkeydown="return false;" />
    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
    </span>
    </div>
</div>

• javascript
• html
• twitter-bootstrap

• Show your code to display this Datepicker – Reptar Commented Mar 3, 2015 at 12:37
• So you're really trying to prevent the user from entering something that isn't a numeric date? Isn't there a better way to do that than disallowing all keyboard input? This bootstrap 3 demo doesn't have the 'X' FWIW; it's probably some script that runs on all inputs on your page that you'll need to add an exception to. – Rup Commented Mar 3, 2015 at 12:39
• @bbvanee Code has been added. – Tom Pickles Commented Mar 3, 2015 at 12:42
• This es in IE only. right? – Jitendra Pancholi Commented Mar 3, 2015 at 12:46
• @JitendraPancholi Yes, I only just realised. IE8 is my target browser for this solution also. – Tom Pickles Commented Mar 3, 2015 at 12:48

2 Answers 2

try below code

.clear::-ms-clear {
    display: none;
}

<input type="text" class="clear" />

Fiddle: http://jsfiddle/n57t00bh/ Check this in IE

The character is not inserted by Bootstrap, but by Internet Explorer from versions 10 and up. To remove the cross option, style your input using the ::ms-clear pseudo-selector.

::-ms-clear {
    display: none;
}