0

In ASPX page I have few text boxes which should accept only values in date format. I added TextMode="Date" property to set this, It is working as expected like entering and removing date in Chrome browser but in Microsoft Edge browser I cannot remove the date entered(Edge browser doesn't show 'X' button inside text box like Chrome).

<asp:TextBox ID="txtSample" runat="server" TextMode="Date">

Is there a simple way to fix( like adding 'X' button inside text box) instead of customer calendars?

Date in Edge:

enter image description here

Date in Chrome:

enter image description here

Jaggi
  • 170
  • 2
  • 5
  • 16
  • edited to an answer instead of comment. – Frank Furter Oct 21 '19 at 16:25
  • 1
    The 'x' button in chrome will be removed at some point, as Microsoft has been working with Google to update the chromium form controls. https://blogs.windows.com/msedgedev/2019/10/15/form-controls-microsoft-edge-chromium/ – Austen Holland Oct 21 '19 at 16:39
  • @AustenHolland - Thanks for letting me know. What is the solution to clear the entered date now? – Jaggi Oct 21 '19 at 16:42
  • The first thing that comes to mind would to add your own "x button" either beside, or on top of the input where the chrome "x" is now. Then use JavaScript to set the input value to nothing on click. See the answer below by @Frank Furter for an example of this. – Austen Holland Oct 21 '19 at 16:46

1 Answers1

1

There's no default clear button that Edge provides so a solution would be to create your own function to clear the value of the field.

function clearDate() {
    var input = document.getElementById("txtSample");
    input.value = "";
}

The output HTML would look something like this:

<input type="date" id="txtSample" placeholder="12-12-2017">
<button onclick="clearDate()">clear</button>

You would still have the Chrome UI however so you might want to remove the Chrome version entirely using:

#txtSample::-webkit-clear-button {
    display: none;
}
Frank Furter
  • 508
  • 1
  • 6
  • 15
  • As @AustenHolland has mentioned, the inconsistencies between Chrome and Edge should be resolved in the future. – Frank Furter Oct 21 '19 at 16:46
  • Furter - Thanks for you reply. Is it possible to modify your answer to support asp textbox control instead input(generic Control) – Jaggi Oct 21 '19 at 17:18
  • @Jaggi I'm unfamiliar with how the ASP textbox is rendered, so I've based my example on the output of HTML. I have updated the CSS in my example however to target the element with an ID of txtSample instead. – Frank Furter Oct 22 '19 at 07:33