Creating a Simple Date Picker with JavaScript and CSS - The CSS
(Page 4 of 4 )
We'll look at the CSS now, beginning with the selector that matches the containing div:
.picker {
position:relative;
left:305px;
top:-21px;
float:left;
width:172px;
border-width:1px;
border-color:#ffcc00;
border-style:solid;
padding-left:4px;
padding-top:4px;
padding-bottom:4px;
display:none;
}
We position it next to the calendar icon on the page, but as you can see, initially it will not be visible. It can be switched on when the calendar icon is clicked. The reason padding-right hasn't been specified is a bit of a hack to make the page compatible with IE6. With IE7 and FireFox, we can specify a width of 168px and a padding of 2px, but in IE6, this forces some of the bottom boxes to the next line down so we have to make the containing div wider and play with the padding of the other three sides.
The CSS for the two select boxes is as follows:
.month {
float:left;
border-width:1px;
border-color:#ffcc00;
border-style:solid;
margin:1px;
width:94px;
padding-left:2px;
color:#ffcc00;
}
.year {
float:left;
border-width:1px;
border-color:#ffcc00;
border-style:solid;
margin:1px;
width:70px;
padding-left:2px;
color:#ffcc00;
}
Unfortunately, IE will ignore most of these rules, but FireFox will implement them. Nothing really warrants a thorough explanation, so let's move on to the day-square selectors:
.datelive {
float:left;
background-image:url('datelive.gif');
background-repeat:repeat-x;
width:20px;
height:20px;
border-style:solid;
border-color:#ffcc00;
border-width:1px;
text-align:center;
color:#ffcc00;
margin:1px;
text-decoration:none;
}
.datelive:hover {
background-image:url('datelive_over.gif');
background-repeat:repeat-x;
color:#ffffcc
}
.dateunlive {
float:left;
background-image:url('dateunlive.gif');
background-repeat:repeat-x;
width:20px;
height:20px;
border-style:solid;
border-color:#666666;
border-width:1px;
margin:1px;
}
The background of each square is built up from a picture 1px wide and repeated across the width of the square. This method is increasingly being found employed in navigation bars and box headings, but can be put to good use elsewhere too, as demonstrated here. A hover pseudo class is used for the rollover effect, but the standard method of setting the background-color won't work in this scenario. We can easily use another repeated 1 pixel wide image to achieve the same effect however.
The grey squares, which are used to fill in the remaining space for reasons of symmetry, are styled in much the same way but with a grey image. Later, we'll use DOM scripting to change the attribute of dates that are not part of a chosen month, so if the month is April, which has just 30 days, the square representing 31 will be greyed out.
So now we have the HTML and CSS we need for the date-picker. So far, both the HTML and the CSS used are valid and display the same across both IE6 and 7 and FireFox 1 and 2. These are arguably the most dominant browsers in use at present so will account for perhaps most of your visitors. There is also a good chance that because the code renders the same in these browsers, that it will render the same in others too. It also appears exactly the same at different resolutions. It should now be looking something a little like this:
All that is left to do is write the JavaScript that will turn it from something that just looks good into something that works and does what we want. This is what will be covered in part two of this tutorial.
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
|
| · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | | |
|
/ 20 
