Skip to content

Commit b4806c1

Browse files
jzaeffererjzaefferer
committed
jquery-tmpl based experiment for a datepicker rewrite. Basic picker
rendering is working, no interaction or popup, yet.
1 parent ed57047 commit b4806c1

File tree

4 files changed

+729
-0
lines changed

4 files changed

+729
-0
lines changed

‎datepicker-rewrite/date.js

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
/*
2+
* jQuery Date
3+
*
4+
* Copyright 2010 Marc Grabanski
5+
* Licensed under the MIT license
6+
*
7+
*
8+
* Depends:
9+
* jquery.glob.js
10+
*/
11+
(function( $, undefined ) {
12+
13+
if (typeof($.global.culture) == "undefined") {
14+
$.global.culture = $.global.cultures["default"];
15+
}
16+
17+
$.date = function ( datestring, formatstring ) {
18+
var calendar = $.global.culture.calendar,
19+
format = formatstring ? formatstring : calendar.patterns.d,
20+
date = datestring ? $.global.parseDate(datestring, format) : new Date();
21+
return {
22+
setFormat: function( formatstring ) {
23+
if (formatstring) {
24+
format = formatstring;
25+
}
26+
return this;
27+
},
28+
adjust: function( period, offset ) {
29+
var day = period == "D" ? date.getDate() + offset : date.getDate(),
30+
month = period == "M" ? date.getMonth() + offset : date.getMonth(),
31+
year = period == "Y" ? date.getFullYear() + offset : date.getFullYear();
32+
date = new Date(year, month, day);
33+
return this;
34+
},
35+
daysInMonth: function(year, month){
36+
year = year || date.getFullYear();
37+
month = month || date.getMonth();
38+
return 32 - new Date(year, month, 32).getDate();
39+
},
40+
monthname: function() {
41+
return calendar.months.names[date.getMonth()];
42+
},
43+
year: function() {
44+
return date.getFullYear();
45+
},
46+
weekdays: function() {
47+
// TODO take firstDay into account
48+
var result = [];
49+
for (var dow = 0; dow < 7; dow++) {
50+
var day = (dow + calendar.firstDay) % 7;
51+
result.push({
52+
shortname: calendar.days.namesShort[day],
53+
fullname: calendar.days.names[day],
54+
});
55+
}
56+
return result;
57+
},
58+
days: function() {
59+
var result = [],
60+
daysInMonth = this.daysInMonth(),
61+
firstDayOfMonth = new Date(this.year(), date.getMonth(), 1).getDay(),
62+
leadDays = (firstDayOfMonth - calendar.firstDay + 7) % 7
63+
rows = Math.ceil((leadDays + daysInMonth) / 7),
64+
printDate = new Date(this.year(), date.getMonth(), 1 - leadDays);
65+
for (var row = 0; row < rows; row++) {
66+
var week = result[result.length] = {
67+
days: []
68+
};
69+
for (var day = 0; day < 7; day++) {
70+
week.days.push(printDate.getDate());
71+
// use adjust("D", 1)?
72+
printDate.setDate(printDate.getDate() + 1);
73+
}
74+
}
75+
return result;
76+
},
77+
date: function() {
78+
return date;
79+
},
80+
format: function( formatstring ) {
81+
return $.global.format(date, formatstring ? formatstring : format);
82+
},
83+
calendar: function( newcalendar ) {
84+
if (newcalendar) {
85+
calendar = newcalendar;
86+
return this;
87+
}
88+
return calendar;
89+
}
90+
}
91+
}
92+
93+
}( jQuery ));

‎datepicker-rewrite/index.html

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<script src="../jquery-1.4.4.js"></script>
5+
<script src="../ui/jquery.ui.core.js"></script>
6+
<script src="../ui/jquery.ui.widget.js"></script>
7+
<script src="../ui/jquery.ui.button.js"></script>
8+
<script src="../ui/jquery.ui.position.js"></script>
9+
<script src="jquery.tmpl.js"></script>
10+
<script src="../external/jquery.global.js"></script>
11+
<script src="../external/jquery.global.de-DE.js"></script>
12+
<script src="../external/jquery.global.ja-JP.js"></script>
13+
<script src="date.js"></script>
14+
<script src="picker.js"></script>
15+
<!-- ui.datepicker.lite.html -->
16+
<link rel="stylesheet" href="../themes/base/jquery.ui.all.css">
17+
<title>jQuery UI Datepicker Lite</title>
18+
<style>body{font:62.5% Verdana,Arial,sans-serif}</style>
19+
</head>
20+
<body>
21+
<div id="datepicker-inline" style="margin-bottom:100px"></div>
22+
<input id="datepicker" type="text" />
23+
<input id="datepicker2" type="text" />
24+
<script>
25+
jQuery(function($){
26+
//$.preferCulture("de-DE");
27+
$("#datepicker-inline").datepicker();
28+
$("#datepicker, #datepicker2").datepicker();
29+
});
30+
</script>
31+
32+
<script id="ui-datepicker-div" type="text/x-jquery-tmpl">
33+
<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
34+
<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all">
35+
<a class="ui-datepicker-prev ui-corner-all" title="Prev"><span class="ui-icon ui-icon-circle-triangle-w">Prev</span></a>
36+
<a class="ui-datepicker-next ui-corner-all" title="Next"><span class="ui-icon ui-icon-circle-triangle-e">Next</span></a>
37+
<div class="ui-datepicker-title">
38+
<span class="ui-datepicker-month">${date.monthname()}</span> <span class="ui-datepicker-year">${date.year()}</span>
39+
</div>
40+
</div>
41+
<table class="ui-datepicker-calendar">
42+
<thead>
43+
<tr>
44+
{{each(index, day) date.weekdays()}}
45+
<th class=""><span title="${day.fullname}">${day.shortname}</span></th>
46+
{{/each}}
47+
</tr>
48+
</thead>
49+
<tbody>
50+
{{each(index, week) date.days()}}
51+
<tr>
52+
{{each(index, day) week.days}}
53+
<td class="">
54+
<a class="ui-state-default" href="#">${day}</a>
55+
</td>
56+
{{/each}}
57+
</tr>
58+
{{/each}}
59+
</tbody>
60+
</table>
61+
<div class="ui-datepicker-buttonpane ui-widget-content">
62+
<button class="ui-datepicker-current">Today</button>
63+
<button class="ui-datepicker-close">Done</button>
64+
</div>
65+
</div>
66+
</script>
67+
68+
</body>
69+
</html>

0 commit comments

Comments
 (0)