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:

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

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

About The Author

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.

jQuery UI DatePicker Built-In Date Formats

About The Author

No comments:

Labels