Skip to content

Commit 31f52bd

Browse files
jzaeffererjzaefferer
committed
Added template composition example (with $data. prefix workaround).
1 parent 5e980d1 commit 31f52bd

File tree

2 files changed

+206
-0
lines changed

2 files changed

+206
-0
lines changed

‎datepicker-rewrite/alternative-template.html

Lines changed: 205 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,205 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<script src="../jquery-1.4.4.js"></script>
6+
<script src="../ui/jquery.ui.core.js"></script>
7+
<script src="../ui/jquery.ui.widget.js"></script>
8+
<script src="../ui/jquery.ui.button.js"></script>
9+
<script src="../ui/jquery.ui.position.js"></script>
10+
<script src="jquery.tmpl.js"></script>
11+
<script src="../external/jquery.global.js"></script>
12+
<script src="../external/jquery.global.de-DE.js"></script>
13+
<script src="../external/jquery.global.ja-JP.js"></script>
14+
<script src="localization.js"></script>
15+
<script src="date.js"></script>
16+
<script src="picker.js"></script>
17+
<link rel="stylesheet" href="../themes/base/jquery.ui.all.css">
18+
<title>jQuery UI Datepicker Rewrite</title>
19+
<style>
20+
body { font:62.5% Verdana,Arial,sans-serif; }
21+
.ui-datepicker-multi-3 { width: 51em !important; }
22+
</style>
23+
</head>
24+
<body>
25+
<select id="culture">
26+
<option value="en-US">en-US</option>
27+
<option value="de-DE">de-DE</option>
28+
<option value="ja-JP">ja-JP</option>
29+
</select>
30+
<input id="inline-output" />
31+
<div id="datepicker-inline-default"></div>
32+
<div id="datepicker-inline-multi"></div>
33+
<div id="datepicker-inline"></div>
34+
<input id="datepicker" type="text" />
35+
<input id="datepicker2" type="text" />
36+
<script>
37+
$( function() {
38+
$( "#culture" ).change( function() {
39+
$.global.preferCulture( $( this ).val() );
40+
$( ":ui-datepicker" ).datepicker( "refresh" );
41+
})
42+
$( "#datepicker-inline-default" ).datepicker( {
43+
select: function( event, ui ) {
44+
$( "#inline-output" ).val( ui.date );
45+
}
46+
});
47+
$( "#datepicker-inline-multi" ).datepicker( {
48+
tmpl: "#ui-datepicker-multi-tmpl",
49+
select: function( event, ui ) {
50+
$( "#inline-output" ).val( ui.date );
51+
}
52+
})
53+
$( "#datepicker-inline" ).datepicker( {
54+
tmpl: "#ui-datepicker-weeks-tmpl",
55+
select: function( event, ui ) {
56+
$( "#inline-output" ).val( ui.date );
57+
},
58+
eachDay: function( day ) {
59+
if ( day.lead && day.date > 20 ) {
60+
day.selectable = false;
61+
day.render = true;
62+
day.title = "These are the days of last month";
63+
day.extraClasses = "ui-state-disabled";
64+
}
65+
if ( day.lead && day.date < 3 ) {
66+
day.selectable = true;
67+
day.render = true;
68+
day.extraClasses = "ui-state-disabled";
69+
}
70+
if ( day.date == 1 ) {
71+
day.extraClasses = "ui-state-error";
72+
day.title = "Something bad explaining the error highlight";
73+
}
74+
if ( day.today ) {
75+
day.title = "A good day!";
76+
}
77+
}
78+
});
79+
$( "#datepicker, #datepicker2" ).datepicker();
80+
});
81+
</script>
82+
83+
<script id="ui-datepicker-month" type="text/x-jquery-tmpl">
84+
<table class="ui-datepicker-calendar">
85+
<thead>
86+
<tr>
87+
{{each(index, day) $data.weekdays()}}
88+
<th class=""><span title="${day.fullname}">${day.shortname}</span></th>
89+
{{/each}}
90+
</tr>
91+
</thead>
92+
<tbody>
93+
{{each(index, week) $data.days()}}
94+
<tr>
95+
{{each(index, day) week.days}}
96+
<td>
97+
{{if day.render}}
98+
{{if day.selectable}}
99+
<a title="${day.title}" class="ui-state-default{{if day.current}} ui-state-active{{/if}}{{if day.today}} ui-state-highlight{{/if}} ${day.extraClasses}" href="#">
100+
${day.date}
101+
</a>
102+
{{/if}}
103+
{{if !day.selectable}}
104+
<span title="${day.title}" class="{{if day.current}} ui-state-active{{/if}}{{if day.today}} ui-state-highlight{{/if}} ${day.extraClasses}">
105+
${day.date}
106+
</span>
107+
{{/if}}
108+
{{/if}}
109+
</td>
110+
{{/each}}
111+
</tr>
112+
{{/each}}
113+
</tbody>
114+
</table>
115+
</script>
116+
117+
<script id="ui-datepicker-tmpl" type="text/x-jquery-tmpl">
118+
<div class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
119+
<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all">
120+
<a class="ui-datepicker-prev ui-corner-all" title="${labels.prevText}"><span class="ui-icon ui-icon-circle-triangle-w">${labels.prevText}</span></a>
121+
<a class="ui-datepicker-next ui-corner-all" title="${labels.nextText}"><span class="ui-icon ui-icon-circle-triangle-e">${labels.nextText}</span></a>
122+
<div class="ui-datepicker-title">
123+
<span class="ui-datepicker-month">${date.monthname()}</span> <span class="ui-datepicker-year">${date.year()}</span>
124+
</div>
125+
</div>
126+
{{tmpl(date) "#ui-datepicker-month"}}
127+
<div class="ui-datepicker-buttonpane ui-widget-content">
128+
<button class="ui-datepicker-current">${labels.currentText}</button>
129+
<button class="ui-datepicker-close">${labels.closeText}</button>
130+
</div>
131+
</div>
132+
</script>
133+
134+
<script id="ui-datepicker-weeks-tmpl" type="text/x-jquery-tmpl">
135+
<div class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
136+
<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all">
137+
<a class="ui-datepicker-prev ui-corner-all" title="${labels.prevText}"><span class="ui-icon ui-icon-circle-triangle-w">${labels.prevText}</span></a>
138+
<a class="ui-datepicker-next ui-corner-all" title="${labels.nextText}"><span class="ui-icon ui-icon-circle-triangle-e">${labels.nextText}</span></a>
139+
<div class="ui-datepicker-title">
140+
<span class="ui-datepicker-month">${date.monthname()}</span> <span class="ui-datepicker-year">${date.year()}</span>
141+
</div>
142+
</div>
143+
<table class="ui-datepicker-calendar">
144+
<thead>
145+
<tr>
146+
<th>${labels.weekHeader}</th>
147+
{{each(index, day) date.weekdays()}}
148+
<th class=""><span title="${day.fullname}">${day.shortname}</span></th>
149+
{{/each}}
150+
</tr>
151+
</thead>
152+
<tbody>
153+
{{each(index, week) date.days()}}
154+
<tr>
155+
<td>${week.number}</td>
156+
{{each(index, day) week.days}}
157+
<td>
158+
{{if day.render}}
159+
{{if day.selectable}}
160+
<a title="${day.title}" class="ui-state-default{{if day.current}} ui-state-active{{/if}}{{if day.today}} ui-state-highlight{{/if}} ${day.extraClasses}" href="#">
161+
${day.date}
162+
</a>
163+
{{/if}}
164+
{{if !day.selectable}}
165+
<span title="${day.title}" class="{{if day.current}} ui-state-active{{/if}}{{if day.today}} ui-state-highlight{{/if}} ${day.extraClasses}">
166+
${day.date}
167+
</span>
168+
{{/if}}
169+
{{/if}}
170+
</td>
171+
{{/each}}
172+
</tr>
173+
{{/each}}
174+
</tbody>
175+
</table>
176+
</div>
177+
</script>
178+
179+
<script id="ui-datepicker-multi-tmpl" type="text/x-jquery-tmpl">
180+
<div class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all ui-datepicker-multi-3 ui-datepicker-multi">
181+
{{each(index, month) date.months(2)}}
182+
<div class="ui-datepicker-group">
183+
<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix {{if month.first}}ui-corner-left{{/if}}{{if month.last}}ui-corner-right{{/if}}">
184+
{{if month.first}}
185+
<a class="ui-datepicker-prev ui-corner-all" title="${labels.prevText}"><span class="ui-icon ui-icon-circle-triangle-w">${labels.prevText}</span></a>
186+
{{/if}}
187+
{{if month.last}}
188+
<a class="ui-datepicker-next ui-corner-all" title="${labels.nextText}"><span class="ui-icon ui-icon-circle-triangle-e">${labels.nextText}</span></a>
189+
{{/if}}
190+
<div class="ui-datepicker-title">
191+
<span class="ui-datepicker-month">${month.monthname()}</span> <span class="ui-datepicker-year">${month.year()}</span>
192+
</div>
193+
</div>
194+
{{tmpl(month) "#ui-datepicker-month"}}
195+
</div>
196+
{{/each}}
197+
<div class="ui-datepicker-row-break"></div>
198+
<div class="ui-datepicker-buttonpane ui-widget-content">
199+
<button class="ui-datepicker-current">${labels.currentText}</button>
200+
<button class="ui-datepicker-close">${labels.closeText}</button>
201+
</div>
202+
</div>
203+
</script>
204+
</body>
205+
</html>

‎datepicker-rewrite/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
</style>
2323
</head>
2424
<body>
25+
<a href="alternative-template.html">Alternative templating example</a>
2526
<select id="culture">
2627
<option value="en-US">en-US</option>
2728
<option value="de-DE">de-DE</option>

0 commit comments

Comments
 (0)