jquery-ui/demos/datepicker/date-formats.html

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Datepicker - Format date</title>
	<link rel="stylesheet" href="../../themes/base/all.css">
	<script src="../../external/jquery/jquery.js"></script>
	<script src="../../external/globalize/globalize.js"></script>
	<script src="../../external/date.js"></script>
	<script src="../../external/localization.js"></script>
	<script src="../../ui/core.js"></script>
	<script src="../../ui/widget.js"></script>
	<script src="../../ui/button.js"></script>
	<script src="../../ui/position.js"></script>
	<script src="../../ui/datepicker.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<script>
	$(function() {
		$( "#datepicker" ).datepicker();
		$( "#format" ).change(function() {
			var format;
			switch( $( this ).val() ) {
				case "short":
					$( "#datepicker" ).datepicker( "option", "dateFormat", {
						date: "short"
					});
					break;
				case "long":
					$( "#datepicker" ).datepicker( "option", "dateFormat", {
						date: "long"
					});
					break;
				case "iso":
					$( "#datepicker" ).datepicker( "option", "dateFormat", {
						pattern: "yyyy-MM-dd"
					});
					break;
			}
		});
	});
	</script>
</head>
<body>

<p>Date: <input type="text" id="datepicker" size="30"/></p>

<p>Format options:<br />
	<select id="format">
		<option value="short">Short - M/d/yy in "en" locale</option>
		<option value="long">Long - MMMM d, y in "en" locale</option>
		<option value="iso">ISO 8601 - yyyy-MM-dd</option>
	</select>
</p>

<div class="demo-description">
<p>Display date feedback in a variety of ways.  Choose a date format from the dropdown, then click on the input and select a date to see it in that format.</p>
</div>
</body>
</html>
Demos: Cleanup. 2012-09-10 15:33:46 +00:00			`<!doctype html>`
mime-type and eol-style 2009-01-02 03:56:06 +00:00			`<html lang="en">`
			`<head>`
Datepicker demos: Coding standards. 2010-09-10 12:50:53 +00:00			`<meta charset="utf-8">`
updated the demo captions, and reordered the examples navigation 2009-01-19 22:42:58 +00:00			`<title>jQuery UI Datepicker - Format date</title>`
All: Rename all files, removing the "jquery.ui." prefix; - By executing https://gist.github.com/jzaefferer/893fcf70b7eebc1dc271; Fixes #9464 Closes gh-1029 2013-12-02 18:36:12 +00:00			`<link rel="stylesheet" href="../../themes/base/all.css">`
Build: Reorganize external directory Put each external library into its own directory. Move jquery.js to external. Ref gh-1266 2014-06-10 11:55:45 +00:00			`<script src="../../external/jquery/jquery.js"></script>`
Datepicker: Update tests and demos for new structure 2013-08-30 12:27:19 +00:00			`<script src="../../external/globalize/globalize.js"></script>`
			`<script src="../../external/date.js"></script>`
			`<script src="../../external/localization.js"></script>`
All: Rename all files, removing the "jquery.ui." prefix; - By executing https://gist.github.com/jzaefferer/893fcf70b7eebc1dc271; Fixes #9464 Closes gh-1029 2013-12-02 18:36:12 +00:00			`<script src="../../ui/core.js"></script>`
			`<script src="../../ui/widget.js"></script>`
Datepicker: Update tests and demos for new structure 2013-08-30 12:27:19 +00:00			`<script src="../../ui/button.js"></script>`
			`<script src="../../ui/position.js"></script>`
All: Rename all files, removing the "jquery.ui." prefix; - By executing https://gist.github.com/jzaefferer/893fcf70b7eebc1dc271; Fixes #9464 Closes gh-1029 2013-12-02 18:36:12 +00:00			`<script src="../../ui/datepicker.js"></script>`
Datepicker demos: Coding standards. 2010-09-10 12:50:53 +00:00			`<link rel="stylesheet" href="../demos.css">`
			`<script>`
mime-type and eol-style 2009-01-02 03:56:06 +00:00			`$(function() {`
Datepicker demos: Coding standards. 2010-09-10 12:50:53 +00:00			`$( "#datepicker" ).datepicker();`
			`$( "#format" ).change(function() {`
Datepicker: Use Globalize 1.0.0 2013-11-30 12:22:17 +00:00			`var format;`
			`switch( $( this ).val() ) {`
			`case "short":`
			`$( "#datepicker" ).datepicker( "option", "dateFormat", {`
			`date: "short"`
			`});`
			`break;`
			`case "long":`
			`$( "#datepicker" ).datepicker( "option", "dateFormat", {`
			`date: "long"`
			`});`
			`break;`
			`case "iso":`
			`$( "#datepicker" ).datepicker( "option", "dateFormat", {`
			`pattern: "yyyy-MM-dd"`
			`});`
			`break;`
			`}`
Datepicker demos: Coding standards. 2010-09-10 12:50:53 +00:00			`});`
mime-type and eol-style 2009-01-02 03:56:06 +00:00			`});`
			`</script>`
			`</head>`
			`<body>`

Fixed some spacing issues for the format dropdown and added a label. 2009-01-08 22:28:45 +00:00			`<p>Date: <input type="text" id="datepicker" size="30"/></p>`

			`<p>Format options:<br />`
mime-type and eol-style 2009-01-02 03:56:06 +00:00			`<select id="format">`
Datepicker: Use Globalize 1.0.0 2013-11-30 12:22:17 +00:00			`<option value="short">Short - M/d/yy in "en" locale</option>`
			`<option value="long">Long - MMMM d, y in "en" locale</option>`
			`<option value="iso">ISO 8601 - yyyy-MM-dd</option>`
Fixed some spacing issues for the format dropdown and added a label. 2009-01-08 22:28:45 +00:00			`</select>`
			`</p>`
mime-type and eol-style 2009-01-02 03:56:06 +00:00
Datepicker demos: Coding standards. 2010-09-10 12:50:53 +00:00			`<div class="demo-description">`
			`<p>Display date feedback in a variety of ways. Choose a date format from the dropdown, then click on the input and select a date to see it in that format.</p>`
Demos: Cleanup. 2012-09-10 15:33:46 +00:00			`</div>`
mime-type and eol-style 2009-01-02 03:56:06 +00:00			`</body>`
			`</html>`