How To Remove Up Down Arrow Keys From Asp:textbox Texmode:date?

How to remove Up Down arrow keys from asp:textbox texmode:date? I have textbox with textmode date and I just want the calender arrow ?? how can I achieve this? in picture how can

Solution 1:

Just use this:

<Style>input[type=date]::-webkit-inner-spin-button {
        -webkit-appearance: none;
         display: none;
         }
    </style>

Or you can use datepicker. Just

Download AjaxControlToolkit.dll from web, add it to bin folder, then Add reference and then add

<%@ Register Assembly="AjaxControlToolkit"Namespace="AjaxControlToolkit" TagPrefix="cc1" %> 

to your aspx page. Style Part

<styletype="text/css">.cal_Theme1.ajax__calendar_container   {
background-color: #DEF1F4;
border:solid 1px#77D5F7;
}

.cal_Theme1.ajax__calendar_header  {
background-color: #ffffff;
margin-bottom: 4px;
}

.cal_Theme1.ajax__calendar_title,
.cal_Theme1.ajax__calendar_next,
.cal_Theme1.ajax__calendar_prev    {
color: #004080;
padding-top: 3px;
}

.cal_Theme1.ajax__calendar_body    {
background-color: #ffffff;
border: solid 1px#77D5F7;
}

.cal_Theme1.ajax__calendar_dayname {
text-align:center;
font-weight:bold;
margin-bottom: 4px;
margin-top: 2px;
color: #004080;
}
</style>

Your TextBox

<asp:TextBoxID="txtDate"runat="server"AutoComplete="off"></asp:TextBox><cc1:CalendarExtenderID="ceFromDate"CssClass= " cal_Theme1"TargetControlID="txtDate"Format="dd-MMM-yyyy"runat="server"/>

It will appear like this.