@@ -77,20 +77,30 @@ var MicroDateSelect = Class.create({
// table
this.calendar = new Element('table', { border: 0, cellspacing: 0, cellpadding: 3 });
- this.calendar.insert(new Element('caption'));
- this.calendar.down('caption').insert(new Element('span', {'class': 'month_name'}) )
- this.calendar.down('caption').insert({ top: new Element('a', { 'class': 'previous month_switch', href: '#' }) } )
- this.calendar.down('caption').insert({ bottom: new Element('a', { 'class': 'next month_switch', href: '#' }) })
// table head
var head = new Element('thead');
+ head.insert({ top: new Element('tr', { 'class': 'caption' } ) });
+
+ head.down('tr.caption').insert(
+ new Element('th').update( new Element('a', { 'class': 'previous month_switch', href: 'javascript:void(0);' }).update('«') )
+ )
+
+ head.down('tr.caption').insert(
+ new Element('th', { colspan: 5 }).update( new Element('span', {'class': 'month_name'}) )
+ )
+ head.down('tr.caption').insert(
+ new Element('th').update( new Element('a', { 'class': 'next month_switch', href: 'javascript:void(0);' }).update('»') )
+ )
+
+
var row = new Element('tr');
this.weekdayNames.length.times(function(column) {
var weekday = this.weekdayNames[(column + this.weekOffset) % 7];
var cell = new Element('th', { scope: 'col', abbr: weekday }).update(weekday.substring(0,1));
row.insert(cell);
}.bind(this));
- head.insert(row);
+ head.insert({ bottom: row });
this.calendar.insert(head);
// table body
@@ -113,11 +123,8 @@ var MicroDateSelect = Class.create({
populate: function() {
var month = this.date.neutral();
month.setDate(1);
-
- this.calendar.select('caption').first().down('.next').update('»');
- this.calendar.select('caption').first().down('.previous').update('«');
-
- var caption = this.calendar.select('caption').first().down('.month_name');
+
+ var caption = this.calendar.select('.caption').first().down('.month_name');
caption.update(this.monthNames[month.getMonth()] + ' ' + month.getFullYear());
var iterator = new Date(month);
javascript/microdateselect.js
@@ -6,31 +6,23 @@
text-align: center;
font-size: 12px;
width: 100%; }
- .calendars_container table caption {
+ .calendars_container table .caption th{
font-weight: bold;
background: #E1E1E1;
- text-align: center;
- height: 1.5em;}
- .calendars_container table caption span{
- display: block;
- float: left;
- width: 60%;
+ text-align: center;}
+ .calendars_container table .caption span{
padding: 1px 0;}
- .calendars_container table caption a {
- float: left;
+ .calendars_container table .caption a {
display: block;
- width: 19%;
font-weight: bold;
background: #E1E1E1;
- text-align: center;
- padding: 2px 0;}
- .calendars_container table caption a {
- width: 19%;}
- .calendars_container table caption a.next {
- float: right}
- .calendars_container table caption a:hover {
+ text-align: center;}
+ .calendars_container table .caption a:hover {
background: #1F8FC8;
color: #fff}
+ .calendars_container table .caption a:active,.calendars_container table .caption a:focus {
+ outline: none;
+ -moz-outline-style: none;}
.calendars_container thead tr th {
border-bottom: 1px solid #E3E3E3;
color: #000;
@@ -53,7 +45,8 @@
background: #AACCEE;
cursor: pointer; }
.calendars_container td.hover {
- background: #1F8FC8; }
+ background: #1F8FC8;
+ color: #fff}
.calendars_container td.today {
background: #0066B3;
color: #fff }
stylesheets/microdateselects.css
@@ -27,7 +27,7 @@
<!-- Put sample/test html here -->
<div id="sample">
<input type="text" name="some_name" size=50 value="" id="start_time_string">
- <input type="text" name="some_name" size=50 value="" id="end_time_string">
+ <input type="text" name="some_name" size=10 value="" id="end_time_string">
</div>
</div>
test/unit/microdateselect_test.html
.DS_Store
5f7a8ab3de4d16212fa55804528e6a3374fc2856
Kalle Saas
kalle@dynamicdudes.com
http://github.com/fluxsaas/microdateselect/commit/0c44b088b89393dccd57c830dda850081457ca28
0c44b088b89393dccd57c830dda850081457ca28
2008-06-20T03:15:10-07:00
2008-06-20T03:15:10-07:00
rewrote caption to fix safari bug
3eb624ac8789d97869624e86adf6597e8579f86e
Kalle Saas
kalle@dynamicdudes.com