How to check HTML version?

Question

I created a website and one input is for date using <input type="date" name="rcdate" />. It is very handy but it only works for Chrome. The output when I process it using PHP is YYYY-MM-DD format.

The problem is when someone uses an outdated browser (Note: Firefox, IE), the UI is not working (Note: displays a textbox) and the user is prompted to input the date him/herself and the format is always inconsistent and MySQL format for the date is YYYY-MM-DD.

Can anyone provide an HTML version checker so that the user will have a message that his/her browser is not compatible with my site? Thanks. Any other suggestions on how to bypass this is welcome as well.

EDIT: My code for processing date are as follows:

<?php
if(isset($_POST['rcdate'])){ $rcdate= $_POST['rcdate']; }
$strSQL = "Insert INTO nqascorecard (
    `RcDate`
    VALUES (
    '$rcdate'
    )";
$rs = mysql_query($strSQL) or die(mysql_error());
?>

Where is your code to process the date and insert into the db? This looks like an HTML 5 input type: http://stackoverflow.com/questions/6731303/how-to-detect-html-5-compatibility-in-browser — Revent, Jun 11 '13 at 00:12
PHP, or server-side processing in general, would be relevant only if you decided to make it accept date formats other than the YYYY-MM-DD format that `input type=date` is supposed to produce. That would be messy, and the more formats you accept, the more often you interpret data wrongly (e.g., 7/4/2013 as April 7 when the user meant July 7). — Jukka K. Korpela, Jun 11 '13 at 06:05

score 3 · Answer 1 · answered Jun 11 '13 at 00:26

3

It would be much better to use something like Modernizr to detect if the date type is supported and implement a javascript fall back for a date picker if it doesn't. Not many desktop browsers support the date input method. See http://caniuse.com/#feat=input-datetime

answered Jun 11 '13 at 00:26

adear11

935
6
11

I think it is useful but it may take time before I can implement modernizr to my work. Great idea though. Thanks. – J.A.W.S. Ibañez II Jun 11 '13 at 00:50
It wouldn't really take any longer to implement than a browser sniffer to tell them to upgrade their browser. It would literally take like 10 lines of javascript. And I see in your other comment that you are implementing for a particular company, if that is the case, can't you find out what browser they use and code to that? – adear11 Jun 11 '13 at 00:56
There are different varieties of browsers used. Most employees use IE and Firefox while most bosses use Chrome, Rockmelt, Opera and Safari. – J.A.W.S. Ibañez II Jun 11 '13 at 08:47

score 2 · Accepted Answer · answered Jun 11 '13 at 05:58

There is no way to “check HTML version” in general, but you can use feature checks with Modernizr or directly in your JavaScript code. That is, you can e.g. check whether the browser recognizes the type=date attribute (so that it is reflected in the DOM). However, the issue here is really: what should you do if the feature (like input type=date) is not supported? If you have a good backup plan, like using a JavaScript widget, why not simply use it instead of input type=date? Moreover, it is possible that the feature check does not really work: a browser might recognize type=date but fail to provide a reasonable UI that implements it.

When support to input type=date has become widespread and when (or if) has been properly localized (current HTML5 drafts are messy about this, and implementations tend to localize by system locale, not page locale), you can use input type=date with simple backup: if the browser does not support it (so that it falls back to a simple text input box), insert instructions that tell the user to use the yyyy-mm-dd format. Or, to be on the safer side, put those instructions into the static content and remove them with JavaScript if you can detect that the browser has real support to input type=date.

score 1 · Answer 3 · answered Jun 11 '13 at 00:25

1

The HTML5 "date" input type is not currently supported by Firefox and Internet Explorer according to w3schools http://www.w3schools.com/html/html5_form_input_types.asp

However, there are JavaScript-based calendars like this one form jQuery UI http://jqueryui.com/datepicker/ that are built to be cross-browser compatible, so I would recommend using something like that so you don't have to do browser-sniffing.

answered Jun 11 '13 at 00:25

Andy Haskell

677
5
16

Great answer... However the company that will be using this may have disabled the javascript function for their IE/Firefox browser. Limited internet connectivity and authorization for the user may pose a problem when I implement this on their intaranet. – J.A.W.S. Ibañez II Jun 11 '13 at 00:31
1

Please don't refer to w3schools.com, there's a reason (many reasons) for interventions like http://www.w3fools.com/! Better refer to something like http://caniuse.com/#search=date or https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#Browser_compatibility – Volker E. Jun 11 '13 at 01:29

How to check HTML version?

3 Answers3