Calendar: Fix demos after widget split

fnagel · fnagel · commit 66385d42270e · 2014-06-19T23:04:04.000+02:00
diff --git a/demos/calendar/buttonbar.html b/demos/calendar/buttonbar.html
@@ -24,7 +24,7 @@
 </head>
 <body>
 
-<p>Date: <input type="text" id="calendar"></p>
+<div id="calendar"></div>
 
 <div class="demo-description">
 <p>Display a button for selecting Today's date and a Done button for closing the calendar with the boolean <code>showButtonPanel</code> option.  Each button is enabled by default when the bar is displayed, but can be turned off with additional options.  Button text is customizable.</p>
diff --git a/demos/calendar/date-formats.html b/demos/calendar/date-formats.html
@@ -16,24 +16,17 @@
 	<link rel="stylesheet" href="../demos.css">
 	<script>
 	$(function() {
-		$( "#calendar" ).calendar();
+		var calendar = $( "#calendar" ).calendar(),
+			value;
+
 		$( "#format" ).change(function() {
-			var format;
-			switch( $( this ).val() ) {
-				case "short":
-					$( "#calendar" ).calendar( "option", "dateFormat", {
-						date: "short"
-					});
-					break;
-				case "long":
-					$( "#calendar" ).calendar( "option", "dateFormat", {
-						date: "long"
-					});
-					break;
+			value = $( this ).val();
+			switch( value ) {
 				case "iso":
-					$( "#calendar" ).calendar( "option", "dateFormat", {
-						pattern: "yyyy-MM-dd"
-					});
+					calendar.calendar( "option", "dateFormat", { pattern: "yyyy-MM-dd" } );
+					break;
+				default:
+					calendar.calendar( "option", "dateFormat", { date: value } );
 					break;
 			}
 		});
@@ -42,7 +35,7 @@
 </head>
 <body>
 
-<p>Date: <input type="text" id="calendar" size="30"/></p>
+<div id="calendar"></div>
 
 <p>Format options:<br />
 	<select id="format">
diff --git a/demos/calendar/dropdown-month-year.html b/demos/calendar/dropdown-month-year.html
@@ -25,7 +25,7 @@
 </head>
 <body>
 
-<p>Date: <input type="text" id="calendar"></p>
+<div id="calendar"></div>
 
 <div class="demo-description">
 <p>Show month and year dropdowns in place of the static month/year header to facilitate navigation through large timeframes.  Add the boolean <code>changeMonth</code> and <code>changeYear</code> options.</p>
diff --git a/demos/calendar/localization.html b/demos/calendar/localization.html
@@ -16,22 +16,23 @@
 	<link rel="stylesheet" href="../demos.css">
 	<script>
 	$(function() {
-		Globalize.locale( "de-DE" );
-		$( "#calendar" ).calendar();
+		var calendar = $( "#calendar" ).calendar(),
+			date = calendar.calendar( "valueAsDate" );
+
 		$( "#locale" ).change(function() {
-			// TODO refresh the current value to convert to the selected locale
 			Globalize.locale( $(this).val() );
+			calendar.calendar( "valueAsDate", date );
 		});
 	});
 	</script>
 </head>
 <body>
 
-<p>Date: <input type="text" id="calendar"/>&nbsp;
-	<select id="locale">
-		<option value="de-DE" selected>German (Deutsch)</option>
-		<option value="en">English</option>
-	</select></p>
+<div id="calendar"></div>
+<select id="locale">
+	<option value="de-DE" selected>German (Deutsch)</option>
+	<option value="en">English</option>
+</select></p>
 
 <div class="demo-description">
 <p>Localize the calendar calendar language and format (English / Western formatting is the default).  The calendar includes built-in support for languages that read right-to-left, such as Arabic and Hebrew.</p>
diff --git a/demos/calendar/multiple-month.html b/demos/calendar/multiple-month.html
@@ -25,7 +25,7 @@
 </head>
 <body>
 
-<p>Date: <input type="text" id="calendar"></p>
+<div id="calendar"></div>
 
 <div class="demo-description">
 <p>Set the <code>numberOfMonths</code> option to an integer of 2 or more to show multiple months in a single calendar.</p>
diff --git a/demos/calendar/other-months.html b/demos/calendar/other-months.html
@@ -30,7 +30,7 @@
 </head>
 <body>
 
-<p>Date: <input type="text" id="calendar"></p>
+<div id="calendar"></div>
 
 <div class="demo-description">
 <p>The calendar can show dates that come from other than the main month
diff --git a/demos/calendar/show-week.html b/demos/calendar/show-week.html
@@ -24,7 +24,7 @@
 </head>
 <body>
 
-<p>Date: <input type="text" id="calendar"></p>
+<div id="calendar"></div>
 
 <div class="demo-description">
 <p>The calendar can show the week of the year. The calculation follows
