Remove the clear button to enter the date (iOS safari)

Question

Is it possible to remove the "clear" button in the input field <input type="date"> on iOS Safari ( image )? I tried using, but it does not work on iOS6 or iOS7.

Answer 1

In fact, it is quite simple to be achieved by specifying a “pseudo-class” for all modern browsers.

If the installation is “required” to eliminate the clear button does not work ...

 <input type="date" required="required" /> 

- Then try the following pseudo- class -webkit-clear-button to make it style specifically for webkit-based browsers:

 /* Hide the clear button from date input */ input[type="date"]::-webkit-clear-button { -webkit-appearance: none; display: none; } 

You can also explore other interesting pseudo-elements to style the date input.

For example: (Hide counter from input date)

 /* Hide the spin button from date input */ input[type="date"]::-webkit-inner-spin-button { -webkit-appearance: none; display: none; } 

In IE, this can be achieved by targeting Internet Explorer 10+ with the pseudo element ::-ms-clear :

 input[type="date"]::-ms-clear { display: none; } 

I built an example on JSFiddle that uses specific pseudo-elements to stylize an input date control.

In addition, you would find that these two stacks are very useful: disable input = clear time button and css input-date how to get rid of the x and up / down arrow elements

Here's an interesting article about Pseudo-Elements and how to use them to control form styles: http://goo.gl/Y69VN6

Answer 2

I tried all the things mentioned above, but none of them worked.

However, you can handle the button clear event by mentioning the change event.

HTML FILE:

 <input type="date" (change)="dateChanged($event)" /> 

when the user clicks the Clear button, he sends an empty string as the value in this event, so you can do whatever you want by checking the value as an empty string. Below is the code:

Code of the .ts file:

 dateChanged(event){ if(event.target.value='' || event.target.value.length==0){ //your code , whatever you want to do when user hit clear in Date control. } } 

In my case, I wanted to set the current date as the default date when the user clicks the Clear button. It worked for me.