jQuery UI: Changing the date format for Datepicker


jQuery UI Changing the date format for Datepicker Tutorial. The dateFormat option is one of the localization options. Setting this option allows you to quickly and easily set the format of selected dates using a variety of short-hand references. The format of dates can be a combination of any of the following characters:

  • d day of month (single digit where applicable)
  • dd day of month (two digits)
  • m month of year (single digit where applicable)
  • mm month of year (two digits)
  • y year (two digits)
  • yy year (four digits)
  • D short day name
  • DD full day name
  • M short month name
  • MM long month name
  • '...' any literal text string
  • @ - UNIX timestamp (milliseconds since 01/01/1970)
	$(function(){
		var pickerOpts = {
			dateFormat:"d MM yy"
		};	
		$("#date").datepicker(pickerOpts);
	});
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="development-bundle/themes/ui-lightness/jquery.ui.all.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery UI Datepicker Example 1</title>
<script type="text/javascript" src="development-bundle/jquery-1.4.2.js"></script>
<script type="text/javascript" src="development-bundle/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="development-bundle/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="development-bundle/ui/jquery.effects.core.js"></script>
<script type="text/javascript" src="development-bundle/ui/jquery.effects.bounce.js"></script>
<script type="text/javascript" src="development-bundle/ui/jquery.ui.datepicker.js"></script>
<script type="text/javascript">
	$(function(){
		var pickerOpts = {
			dateFormat:"d MM yy"
		};	
		$("#date").datepicker(pickerOpts);
	});
</script>
</head>
<body>
<label>Enter a date: </label><input id="date">
</body>
</html>
jQuery UI Changing the date format for datepicker tutorial

predefined date formats for datepicker

The complete set of predefined date formats

Option value Date format
$.datepicker.ATOM "yy-mm-dd"
$.datepicker.COOKIE "D, dd M y"
$.datepicker.ISO_8601 "yy-mm-dd"
$.datepicker.RFC_822 "D, d M y"
$.datepicker.RFC_850 "DD, dd-M-y"
$.datepicker.RFC_1036 "D, d M y"
$.datepicker.RFC_1123 "D, d M yy"
$.datepicker.RFC_2822 "D, d M yy"
$.datepicker.RSS "D, d M y"
$.datepicker.TIMESTAMP @ (UNIX timestamp)
$.datepicker.W3C "yy-mm-dd"

example:

	$(function(){
		var pickerOpts = {
			dateFormat: $.datepicker.ATOM
		};	
		$("#date").datepicker(pickerOpts);
	});
jQuery UI Datepicker date format tutorial



Bookmark and Share Tag: jQuery, JavaScript, JavaScript Framework, User Interface Category: JavaScript Post : September 21st 2010 Read: 86,023

advertisements


blog comments powered by Disqus