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/cldrjs/cldr.js"></script>
	<script src="../../external/cldrjs/cldr/supplemental.js"></script>
	<script src="../../external/cldrjs/cldr/event.js"></script>
	<script src="../../external/jquery/jquery.js"></script>
	<script src="../../external/globalize/globalize.js"></script>
+	<script src="../../external/globalize/globalize/date.js"></script>
+	<script src="../../external/globalize/globalize/message.js"></script>
	<script src="../../external/localization.js"></script>
	<script src="../../external/date.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/calendar.js"></script>
	<script src="../../ui/datepicker.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<script>
	$(function() {
		var value,
			datepicker = $( "#datepicker" ).datepicker();

		$( "#format" ).on( "change", function() {
			value = $( this ).val();

			if ( value === "iso" ) {
				datepicker.datepicker( "option", "dateFormat", { pattern: "yyyy-MM-dd" } );
			} else {
				datepicker.datepicker( "option", "dateFormat", { date: value } );
			}
		});
	});
	</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">`
Datepicker: Use Globalize 1.0.0 - Update demos 2014-09-04 18:47:48 +00:00			`<script src="../../external/cldrjs/cldr.js"></script>`
			`<script src="../../external/cldrjs/cldr/supplemental.js"></script>`
			`<script src="../../external/cldrjs/cldr/event.js"></script>`
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>`
Datepicker: Use Globalize 1.0.0 - Update demos 2014-09-04 18:47:48 +00:00			`+ <script src="../../external/globalize/globalize/date.js"></script>`
			`+ <script src="../../external/globalize/globalize/message.js"></script>`
Datepicker: Update tests and demos for new structure 2013-08-30 12:27:19 +00:00			`<script src="../../external/localization.js"></script>`
Datepicker: Use Globalize 1.0.0 - Update demos 2014-09-04 18:47:48 +00:00			`<script src="../../external/date.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>`
Calendar: Add calendar widget Add calendar widget by copying and renaming datepicker widget files. Remove datepicker functionality, options and methods from Calendar. Remove calendar functionality, options and methods from Datepicker. Adjust tests due to split and changed specification. Remove duplicated demo files and fix some demos. Simplify calendar generation, use CSS instead of inline styles. Fix destroy method. Make use of uniqueId method. Fix focus highlighting when month is changed. Add version property. Add common unit tests. Fix input keyboard handling. 2014-06-03 21:18:51 +00:00			`<script src="../../ui/calendar.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() {`
Calendar: Add calendar widget Add calendar widget by copying and renaming datepicker widget files. Remove datepicker functionality, options and methods from Calendar. Remove calendar functionality, options and methods from Datepicker. Adjust tests due to split and changed specification. Remove duplicated demo files and fix some demos. Simplify calendar generation, use CSS instead of inline styles. Fix destroy method. Make use of uniqueId method. Fix focus highlighting when month is changed. Add version property. Add common unit tests. Fix input keyboard handling. 2014-06-03 21:18:51 +00:00			`var value,`
			`datepicker = $( "#datepicker" ).datepicker();`

Datepicker: Remove core event/alias and deprecated module dependencies 2015-05-14 01:54:56 +00:00			`$( "#format" ).on( "change", function() {`
Calendar: Add calendar widget Add calendar widget by copying and renaming datepicker widget files. Remove datepicker functionality, options and methods from Calendar. Remove calendar functionality, options and methods from Datepicker. Adjust tests due to split and changed specification. Remove duplicated demo files and fix some demos. Simplify calendar generation, use CSS instead of inline styles. Fix destroy method. Make use of uniqueId method. Fix focus highlighting when month is changed. Add version property. Add common unit tests. Fix input keyboard handling. 2014-06-03 21:18:51 +00:00			`value = $( this ).val();`

			`if ( value === "iso" ) {`
			`datepicker.datepicker( "option", "dateFormat", { pattern: "yyyy-MM-dd" } );`
			`} else {`
			`datepicker.datepicker( "option", "dateFormat", { date: value } );`
Datepicker: Use Globalize 1.0.0 2013-11-30 12:22:17 +00:00			`}`
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>`