JQuery Datepicker

Typing in dates in a date field is never fun. It’s cumbersome. There is always a possibility of typing in the wrong format. There are far superior techniques that can be used and implemented when populating date fields.

JQuery is one tool that can be used to format date fields. JQuery is a set Javascript libraries that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.

JQuery has a component called JQuery UI, that provides low-level interaction like animation, advanced effects and themeable widgets use to build highly interactive web applications.

1. Download JQuery UI.

You can build your own custom JQuery scripts directly from JQuery’s website. You can select which feature you want installed. You can also select a specific theme. By selecting only the theme and features that you want, you can create a lean, strip-down version of JQuery. The download will include the following folders: css, js, development-bundle.

2. A Sample Datepicker Page

I created a simple HTML page that display how Datepicker works. In this example, I’m referencing Jquery UI from a local file. You can use a CDN if you want. I’m using the Smoothness theme and its supplied CSS.

The HTML input form needs to have an ID. In this case, we are using the id=”datepicker” for the date field. We are forcing the datepicker to use the ISO 8601 format which is “yy-mm-dd.”

<link href="css/smoothness/jquery-ui-1.8.18.custom.css" rel="Stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>
<script type="text/javascript">
// <![CDATA[
  $(function() {
  $( "#datepicker" ).datepicker({dateFormat: 'yy-mm-dd'});
  });
// ]]>
</script>

Here’s a demo.