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

Will you give this article a +1 ? Thanks in advance


About The Author

Suprotim Agarwal
Suprotim Agarwal, Developer Technologies MVP (Microsoft Most Valuable Professional) is the founder and contributor for DevCurry, DotNetCurry and SQLServerCurry. He is the Chief Editor of a Developer Magazine called DNC Magazine. He has also authored two Books - 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook.

Follow him on twitter @suprotimagarwal.

No comments: