ipad detecting date as a telephone number and inserting a tel link - ios

Question

I have the following for a responsive project:
<table>
<tr>
<td>Besteldatum</td>
<td itemprop="description">
24-2-2014
</td>
</tr>
<tr>
<td>Losse editie</td>
<td itemprop="description">
2014-02
</td>
</tr>
</table>
Strangely enough the ipad places a link in the first as if it were a telephone, check the image:
If I inspect in the ipad I see that the HTML is converted into the following:
<table>
<tbody><tr>
<td>Besteldatum</td>
<td itemprop="description">
24-2-2014
</td>
</tr>
<tr>
<td>Losse editie</td>
<td itemprop="description">
2014-02
</td>
</tr>
</table>
I think the ipad is detecting this date as a telephone number and placing this link automatically. I have other links with the tel link so I would like a solution that does not cancel the other tel links.
Never seen this, can anybody help?

Answer 1

This is default behaviour in iOS. It means that users can simply click a phone number on a web page to make a phone call. Unfortunately it does pick up some non-phone numbers sometimes depending on the formatting.
You have a few options. Here are a couple. Either disable iOS phone number detection by adding this meta tag:
<meta name="format-detection" content="telephone=no">
This maybe a bad idea because it will remove the phone number detection for the entire page making real phone numbers non-clickable.
or override the styles that are being applied with something like...
a[href^=tel] {
color: #your_color;
text-decoration: none;
pointer-events: none;
}
If you have some genuine phone numbers on the page, you may wish to add a class to the non-phone parent in order to differentiate:
.date a[href^=tel] {
color: #your_color;
text-decoration: none;
pointer-events: none;
}