9

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

Rob Fox
  • 5,355
  • 7
  • 37
  • 63

3 Answers3

7

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...

<input type="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

Community
  • 1
  • 1
Adriano Monecchi
  • 1,135
  • 1
  • 14
  • 34
  • Still shows the clear button, tested on iOS7 safari (iPad AIR). – Rob Fox Mar 06 '14 at 08:10
  • @Rob Fox, I see. - Have you tried to place the !important declaration just in case the browser is not taking it as a priority? - I've just tested this on iOS7 as well and it seems to work out of the box. [see image.](http://cl.ly/image/3v2f2t1U0t3c) – Adriano Monecchi Mar 06 '14 at 08:31
  • Yeah, indeed "Limpar" in portuguese means "to Clear" in english, at least within the context we're talking about. Have you got any progress on that btw? – Adriano Monecchi Mar 06 '14 at 17:11
  • Hey @Rob Fox, I'm so sorry, but it turns out I totally missed the point of your question...Now by taking a look carefully on the image you provided I understand what you mean with "to remove the clear button" - You're talking about the button within the popover on iOS on the iPad as also on the iPhone, right?. I was thinking you were mentioning the clear button on date input such like this [see image](http://cl.ly/image/2s1P3y3w3t2E). Well, so let's research about it! Are you developing a web app or an hybrid/native app? – Adriano Monecchi Mar 06 '14 at 17:30
  • aha! Yes I'm developing a hybrid app and can't figure out how to remove this detail – Rob Fox Mar 06 '14 at 19:21
  • Hey @RobFox - As for now, I've exhausted all my attempts in order to find a solution for this issue, as I believe there's no way to solve it other than implementing a javascript/library/framework or even a single JS/jQuery plugin to recreate the date-picker on iOS with an alike experience as the native one. – Adriano Monecchi Mar 07 '14 at 02:29
  • When relying on webkit browsers built-in support for HTML/5 `` types, it turns out that the only way out for customizing their default appearance is to style "pseudo-elements" when available, and unless you're overriding this with a different javascript/library/framework, then you're stuck with the browser's or even the OS's native appearance, be it on a mobile or on a desktop browser. It seems that when specifying the date `` calendar picker on most up-to-date mobile browsers, it always reflects the OS style. Also, there are no ways to styling the native calendar picker. – Adriano Monecchi Mar 07 '14 at 02:34
  • Implementing a JS library or framework on a project is not always the desired approach, but there are a few alternative solutions out there that could even help you to extend styling and functionality. Here's what I've came across: [Spinning wheel for webkit iPhone](http://goo.gl/OAgR6) - [Mobiscroll Date/Time Scroller](http://goo.gl/MRMkZ9). Also, you could implement other solutions as the ones proposed on Sencha Touch, Phone Gap, Titanium and so on. An will always depend on device's interpretation of it though. I wish you good luck with that dude! – Adriano Monecchi Mar 07 '14 at 03:21
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/49206/discussion-between-rob-fox-and-monecchi) – Rob Fox Mar 07 '14 at 06:23
0

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.

VyasKuldeep
  • 11
  • 2
0

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

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

Tested in current Versions of FF, Chrome, Edge

AliBimbali
  • 1