Providing an HTML5 Date Input control with Fallback

By Robert Gravelle

The HTML5 Date Input control has been long awaited and makes inputting dates simple for both the user and the Web developer. Unfortunately, not all browsers support it, so it is still a good idea to provide a fallback. The advantage to going the fallback route rather than only offering the JavaScript-based widget is that you can improve loading speed for those users who are using a compatible browser.

In this tutorial, we'll be building an Accrued Interest calculator that accepts a start and end date to create the period. The fallback will be provided via a jQuery date picker control.

The Form Markup

The form, which contains four input fields and a button, doesn't require any additional code to make it backwards compatible. The start and end portfolio inputs are of type number so that HTML5 aware browsers will only permit numeric input and display up and down arrow buttons. The additional STEP attribute will make each arrow button click increment the value by the specified number. Each input field has a SPAN beside it to display validation errors:

<form>
<div id="container">
<table border="0" cellpadding="2" align="center">
<tbody>
<tr>
<td align="right"><label for="principalAmount">Principal amount: $</label></td>
<td><input id="principalAmount" name="principalAmount" size="15" type="number" /></td>
</tr>
<tr>
<td align="right"><label for="interestRatePerAnnum">Interest rate (per annum): %</label></td>
<td><input id="interestRatePerAnnum" name="interestRatePerAnnum" size="15" type="number" /></td>
</tr>
<tr>
<td align="right"><label for="startDate">Period start date:</label></td>
<td><input id="startDate" name="startDate" type="date" /></td>
</tr>
<tr>
<td align="right"><label for="endDate">Period end date:</label></td>
<td><input id="endDate" name="endDate" type="date" /></td>
</tr>
<tr>
<td colspan="2" height="35" align="center" valign="center"><input id="btnCalc" onclick="calculateAccruedInterest(this.form);" size="15" type="button" value="CALCULATE" /></td>
</tr>
<tr>
<td height="35" align="right" valign="bottom">Actual/365 Fixed day count factor:</td>
<td height="35" align="left" valign="bottom">&nbsp;</td>
</tr>
<tr>
<td height="26" align="right" valign="bottom">Actual/Actual ISDA day count factor:</td>
<td height="26" align="left" valign="bottom">&nbsp;</td>
</tr>
<tr>
<td height="35" align="right" valign="bottom">Actual/365 Fixed Interest:</td>
<td height="35" align="left" valign="bottom">&nbsp;</td>
</tr>
<tr>
<td height="26" align="right" valign="bottom">Actual/Actual ISDA Interest:</td>
<td height="26" align="left" valign="bottom">&nbsp;</td>
</tr>
</tbody>
</table>
</div>
</form>

A table helps right align the labels and present the fields in a tabular format. Here is what the form looks like without any style applied. The border of one helps see the table's role in formatting. Note that this form doesn't have the calculation code behind it, but the button does link to a similar calculator to compute annualized returns on my website if you're interested:

<form>
<div id="container">
<table border="0" cellpadding="2" align="center">
<tbody>
<tr>
<td align="right"><label for="principalAmount">Principal amount: $</label></td>
<td><input id="principalAmount" name="principalAmount" size="15" type="number" /></td>
</tr>
<tr>
<td align="right"><label for="interestRatePerAnnum">Interest rate (per annum): %</label></td>
<td><input id="interestRatePerAnnum" name="interestRatePerAnnum" size="15" type="number" /></td>
</tr>
<tr>
<td align="right"><label for="startDate">Period start date:</label></td>
<td><input id="startDate" name="startDate" type="date" /></td>
</tr>
<tr>
<td align="right"><label for="endDate">Period end date:</label></td>
<td><input id="endDate" name="endDate" type="date" /></td>
</tr>
<tr>
<td colspan="2" height="35" align="center" valign="center"><input id="btnCalc" size="15" type="button" value="CALCULATE" /></td>
</tr>
<tr>
<td height="35" align="right" valign="bottom">Actual/365 Fixed day count factor:</td>
<td height="35" align="left" valign="bottom">&nbsp;</td>
</tr>
<tr>
<td height="26" align="right" valign="bottom">Actual/Actual ISDA day count factor:</td>
<td height="26" align="left" valign="bottom">&nbsp;</td>
</tr>
<tr>
<td height="35" align="right" valign="bottom">Actual/365 Fixed Interest:</td>
<td height="35" align="left" valign="bottom">&nbsp;</td>
</tr>
<tr>
<td height="26" align="right" valign="bottom">Actual/Actual ISDA Interest:</td>
<td height="26" align="left" valign="bottom">&nbsp;</td>
</tr>
</tbody>
</table>
</div>
</form>

Dynamically Loading the jQuery Libraries

The jQuery code can be downloaded from the googleapis server so that we don't have to host anything. The way that we test for support of the HTML5 date picker is to dynamically create one using the document.createElement() function in conjunction with setAttribute(). The former is used to create a generic input element (which defaults to text type). Then, the setAttribute is used to change the type to "date".

If we were successful in creating the date control, the type would remain set to "date". Any type that is recognized by the browser is simply ignored so that it remains what it was previously. Hence, if datefield.type=="date" evaluates to false, we need to bring in the jQuery script and CSS files.

There are several ways to dynamically load scripts, but oddly, the most surefire one is to use the tried and true document.write() function to add the tag to the document as it loads.

The Date Pickers in Action

Here is the html5 date picker as it appears in Opera 9:

html5_date_picker_in_opera_9

Internet Explorer uses the jQuery fallback:

jquery_date_picker_in_ie

Conclusion

As we saw here today, there's no reason why you can't have the best of both words: present HTML5 controls where supported and use a fallback in browsers that do not recognize them. In the next article, we will be adding validation and number crunching code to complete our calculator.



Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •  
Thanks for your registration, follow us on our social networks to keep up-to-date