Remove 'clear' Button On Date Input (ios Safari)

Is it possible to remove the 'clear' button of a input field on iOS Safari (image)? I have tried using required but it doesn't work on iOS6 or iOS7.

Solution 1:

Actually, this is pretty straight forward to be achieved by specifying a "pseudo-class" for all up-to-date browsers.

If setting the input to "required" to eliminate the clear button does not work...

<inputtype="date" required="required" />

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

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

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

E.g: (Hide the spinner from date input)

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

On IE, it could be achieved by targeting Internet Explorer 10+ specifying the ::-ms-clear pseudo-element:

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

I've built an example on JSFiddle which makes use of specific pseudo-elements in order to style the input date control.

Additionally, you would found these two stacks very helpful: disable input=time clear button and css input-date how to get rid of x and up/down arrow elements

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

Solution 2:

I tried all things which are mentioned above but none of them worked.

However you can Handle clear button event by mentioning change event.

HTML FILE :

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

when user click on Clear, it will send empty string as a value in this event , so you can do whatever you want to do by checking value as empty string. Below is the code :

.ts file code :

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 todays date as default date when user hits clear. It worked for me.

Solution 3:

The clear-Button can be disabled by setting the required-Attribute - which seems kinda logical as required Inputs shouldn't be cleared.

<inputtype="date" name="foo" value="2018-06-08" required />

Tested in current Versions of FF, Chrome, Edge