Skip to content

Commit 5e980d1

Browse files
jzaeffererjzaefferer
committed
Multi month datepicker prototype
1 parent 37b0861 commit 5e980d1

File tree

3 files changed

+85
-3
lines changed

3 files changed

+85
-3
lines changed

‎datepicker-rewrite/date.js

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,20 @@ $.date = function ( datestring, formatstring ) {
8686
}
8787
return result;
8888
},
89+
// specialzed for multi-month template, could be used in general
90+
months: function( add ) {
91+
var result = [],
92+
current = date.getMonth(),
93+
self = this;
94+
for ( var i = 0; i < add + 1; i++ ) {
95+
result.push( this.clone() );
96+
this.adjust( "M", 1 );
97+
}
98+
result[0].first = true;
99+
result[result.length - 1].last = true;
100+
date.setMonth(current);
101+
return result;
102+
},
89103
iso8601Week: function( date ) {
90104
var checkDate = new Date( date.getTime() );
91105
// Find Thursday of this week starting on Monday
@@ -101,7 +115,9 @@ $.date = function ( datestring, formatstring ) {
101115
},
102116
// TODO create new Date with year, month, day instead
103117
clone: function() {
104-
return $.date( this.format(), format );
118+
var result = $.date( this.format(), format );
119+
result.eachDay = this.eachDay;
120+
return result;
105121
},
106122
// TODO compare year, month, day each for better performance
107123
equal: function( other ) {

‎datepicker-rewrite/index.html

Lines changed: 67 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,10 @@
1616
<script src="picker.js"></script>
1717
<link rel="stylesheet" href="../themes/base/jquery.ui.all.css">
1818
<title>jQuery UI Datepicker Rewrite</title>
19-
<style>body{font:62.5% Verdana,Arial,sans-serif}</style>
19+
<style>
20+
body { font:62.5% Verdana,Arial,sans-serif; }
21+
.ui-datepicker-multi-3 { width: 51em !important; }
22+
</style>
2023
</head>
2124
<body>
2225
<select id="culture">
@@ -26,6 +29,7 @@
2629
</select>
2730
<input id="inline-output" />
2831
<div id="datepicker-inline-default"></div>
32+
<div id="datepicker-inline-multi"></div>
2933
<div id="datepicker-inline"></div>
3034
<input id="datepicker" type="text" />
3135
<input id="datepicker2" type="text" />
@@ -35,11 +39,17 @@
3539
$.global.preferCulture( $( this ).val() );
3640
$( ":ui-datepicker" ).datepicker( "refresh" );
3741
})
38-
$( "#datepicker-inline-default" ).datepicker({
42+
$( "#datepicker-inline-default" ).datepicker( {
3943
select: function( event, ui ) {
4044
$( "#inline-output" ).val( ui.date );
4145
}
4246
});
47+
$( "#datepicker-inline-multi" ).datepicker( {
48+
tmpl: "#ui-datepicker-multi-tmpl",
49+
select: function( event, ui ) {
50+
$( "#inline-output" ).val( ui.date );
51+
}
52+
})
4353
$( "#datepicker-inline" ).datepicker( {
4454
tmpl: "#ui-datepicker-weeks-tmpl",
4555
select: function( event, ui ) {
@@ -162,5 +172,60 @@
162172
</div>
163173
</script>
164174

175+
<script id="ui-datepicker-multi-tmpl" type="text/x-jquery-tmpl">
176+
<div class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all ui-datepicker-multi-3 ui-datepicker-multi">
177+
{{each(index, month) date.months(2)}}
178+
<div class="ui-datepicker-group">
179+
<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}}">
180+
{{if month.first}}
181+
<a class="ui-datepicker-prev ui-corner-all" title="${labels.prevText}"><span class="ui-icon ui-icon-circle-triangle-w">${labels.prevText}</span></a>
182+
{{/if}}
183+
{{if month.last}}
184+
<a class="ui-datepicker-next ui-corner-all" title="${labels.nextText}"><span class="ui-icon ui-icon-circle-triangle-e">${labels.nextText}</span></a>
185+
{{/if}}
186+
<div class="ui-datepicker-title">
187+
<span class="ui-datepicker-month">${month.monthname()}</span> <span class="ui-datepicker-year">${month.year()}</span>
188+
</div>
189+
</div>
190+
<table class="ui-datepicker-calendar">
191+
<thead>
192+
<tr>
193+
{{each(index, day) month.weekdays()}}
194+
<th class=""><span title="${day.fullname}">${day.shortname}</span></th>
195+
{{/each}}
196+
</tr>
197+
</thead>
198+
<tbody>
199+
{{each(index, week) month.days()}}
200+
<tr>
201+
{{each(index, day) week.days}}
202+
<td>
203+
{{if day.render}}
204+
{{if day.selectable}}
205+
<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="#">
206+
${day.date}
207+
</a>
208+
{{/if}}
209+
{{if !day.selectable}}
210+
<span title="${day.title}" class="{{if day.current}} ui-state-active{{/if}}{{if day.today}} ui-state-highlight{{/if}} ${day.extraClasses}">
211+
${day.date}
212+
</span>
213+
{{/if}}
214+
{{/if}}
215+
</td>
216+
{{/each}}
217+
</tr>
218+
{{/each}}
219+
</tbody>
220+
</table>
221+
</div>
222+
{{/each}}
223+
<div class="ui-datepicker-row-break"></div>
224+
<div class="ui-datepicker-buttonpane ui-widget-content">
225+
<button class="ui-datepicker-current">${labels.currentText}</button>
226+
<button class="ui-datepicker-close">${labels.closeText}</button>
227+
</div>
228+
</div>
229+
</script>
165230
</body>
166231
</html>

‎datepicker-rewrite/picker.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ $.widget( "ui.datepicker", {
4141
this.picker.delegate( ".ui-datepicker-calendar a", "click", function( event ) {
4242
event.preventDefault();
4343
// TODO exclude clicks on lead days or handle them correctly
44+
// TODO store/read more then just date, also required for multi month picker
4445
self.date.setDay( +$( this ).text() ).select();
4546
if ( !self.inline ) {
4647
self.element.val( self.date.format() );

0 commit comments

Comments
 (0)