jQuery UI DatePicker Built-In Date Formats

The jQuery UI DatePicker offers plenty of functionality to the developer, and even though well-documented, at times you could miss out on some useful built-in functions. One such functionality is the built-in date formats, available as constants.

We all know how to change the date format for the DatePicker. To change the dateformat to something like “14 Sep 2011” , is as simple as this:

jQuery UI DateFormat

However the API defines some built-in date formats as given in this table below, which is very useful if you are following common standards or RFC formats

image

Here’s how to use one of these formats in your code. We will use the TIMESTAMP format to select the UNIX timestamp. 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Built-in Date Formats in jQuery UI DatePicker</title>
<link rel="Stylesheet" type="text/css" href="
http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.16/themes/base/jquery-ui.css"
/>
<script type="text/javascript" 
src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.min.js">
</script>
<script type="text/javascript" 
src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.16/jquery-ui.min.js">
</script>
<script type="text/javascript">
    $(function () {
        var fmt = {
            dateFormat: $.datepicker.TIMESTAMP
        };

        $("#datepic").datepicker(fmt);
    });
</script>
</head>
<body>
<input id="datepic"/>
</body>
</html>

Now when the user selects a date from the datepicker, the timestamp is displayed in the input
jQueryui datepicker timestamp

No comments:

Post a Comment