Skip to content

Commit 2d87cc2

Browse files
committed
Added template customization example, here week number rendering.
1 parent 51fbac0 commit 2d87cc2

File tree

3 files changed

+71
-3
lines changed

3 files changed

+71
-3
lines changed

datepicker-rewrite/date.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,7 @@ $.date = function ( datestring, formatstring ) {
6969
printDate = new Date( this.year(), date.getMonth(), 1 - leadDays );
7070
for ( var row = 0; row < rows; row++ ) {
7171
var week = result[ result.length ] = {
72+
number: this.iso8601Week( printDate ),
7273
days: []
7374
};
7475
for ( var dayx = 0; dayx < 7; dayx++ ) {
@@ -86,6 +87,15 @@ $.date = function ( datestring, formatstring ) {
8687
}
8788
return result;
8889
},
90+
iso8601Week: function( date ) {
91+
var checkDate = new Date( date.getTime() );
92+
// Find Thursday of this week starting on Monday
93+
checkDate.setDate( checkDate.getDate() + 4 - ( checkDate.getDay() || 7 ) );
94+
var time = checkDate.getTime();
95+
checkDate.setMonth( 0 ); // Compare with Jan 1
96+
checkDate.setDate( 1 );
97+
return Math.floor( Math.round( ( time - checkDate ) / 86400000) / 7 ) + 1;
98+
},
8999
select: function() {
90100
this.selected = this.clone();
91101
return this;

datepicker-rewrite/index.html

Lines changed: 58 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,8 @@
2424
<option value="ja-JP">ja-JP</option>
2525
</select>
2626
<input id="inline-output" />
27-
<div id="datepicker-inline" style="margin-bottom:100px"></div>
27+
<div id="datepicker-inline-default"></div>
28+
<div id="datepicker-inline"></div>
2829
<input id="datepicker" type="text" />
2930
<input id="datepicker2" type="text" />
3031
<script>
@@ -33,7 +34,13 @@
3334
$.global.preferCulture( $( this ).val() );
3435
$( ":ui-datepicker" ).datepicker( "refresh" );
3536
})
37+
$( "#datepicker-inline-default" ).datepicker({
38+
select: function( event, ui ) {
39+
$( "#inline-output" ).val( ui.date );
40+
}
41+
});
3642
$( "#datepicker-inline" ).datepicker( {
43+
tmpl: "#ui-datepicker-weeks-tmpl",
3744
select: function( event, ui ) {
3845
$( "#inline-output" ).val( ui.date );
3946
},
@@ -44,6 +51,11 @@
4451
day.title = "These are the days of last month";
4552
day.extraClasses = "ui-state-disabled";
4653
}
54+
if ( day.lead && day.date < 3 ) {
55+
day.selectable = true;
56+
day.render = true;
57+
day.extraClasses = "ui-state-disabled";
58+
}
4759
if ( day.date == 1 ) {
4860
day.extraClasses = "ui-state-error";
4961
day.title = "Something bad explaining the error highlight";
@@ -105,6 +117,51 @@
105117
-->
106118
</div>
107119
</script>
120+
121+
<script id="ui-datepicker-weeks-tmpl" type="text/x-jquery-tmpl">
122+
<div class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
123+
<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all">
124+
<a class="ui-datepicker-prev ui-corner-all" title="Prev"><span class="ui-icon ui-icon-circle-triangle-w">Prev</span></a>
125+
<a class="ui-datepicker-next ui-corner-all" title="Next"><span class="ui-icon ui-icon-circle-triangle-e">Next</span></a>
126+
<div class="ui-datepicker-title">
127+
<span class="ui-datepicker-month">${date.monthname()}</span> <span class="ui-datepicker-year">${date.year()}</span>
128+
</div>
129+
</div>
130+
<table class="ui-datepicker-calendar">
131+
<thead>
132+
<tr>
133+
<th>Wk</th>
134+
{{each(index, day) date.weekdays()}}
135+
<th class=""><span title="${day.fullname}">${day.shortname}</span></th>
136+
{{/each}}
137+
</tr>
138+
</thead>
139+
<tbody>
140+
{{each(index, week) date.days()}}
141+
<tr>
142+
<td>${week.number}</td>
143+
{{each(index, day) week.days}}
144+
<td>
145+
{{if day.render}}
146+
{{if day.selectable}}
147+
<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="#">
148+
${day.date}
149+
</a>
150+
{{/if}}
151+
{{if !day.selectable}}
152+
<span title="${day.title}" class="{{if day.current}} ui-state-active{{/if}}{{if day.today}} ui-state-highlight{{/if}} ${day.extraClasses}">
153+
${day.date}
154+
</span>
155+
{{/if}}
156+
{{/if}}
157+
</td>
158+
{{/each}}
159+
</tr>
160+
{{/each}}
161+
</tbody>
162+
</table>
163+
</div>
164+
</script>
108165

109166
</body>
110167
</html>

datepicker-rewrite/picker.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@
77

88
$.widget( "ui.datepicker", {
99
options: {
10-
eachDay: $.noop
10+
eachDay: $.noop,
11+
tmpl: "#ui-datepicker-tmpl"
1112
},
1213
_create: function() {
1314
var self = this;
@@ -58,7 +59,7 @@ $.widget( "ui.datepicker", {
5859
this.date.refresh();
5960
this.picker.empty();
6061

61-
$( "#ui-datepicker-tmpl" ).tmpl({
62+
$( this.options.tmpl ).tmpl({
6263
date: this.date
6364
}).appendTo( this.picker )
6465
.find( "button" ).button().end()

0 commit comments

Comments
 (0)