Creating a Simple Date Picker with JavaScript and CSS - The Calendar Popup
(Page 3 of 4 )
Next we have to code the calendar popup which allows your visitors to select the required date. To do this, we can just create a floating div that sits above the page but remains unseen until the user hits the calendar icon. In the HTML file, begin the following div:
<div class="picker">
<select class="month">
<option>Month</option>
<option>January</option>
<option>February</option>
<option>March</option>
<option>April</option>
<option>May</option>
<option>June</option>
<option>July</option>
<option>August</option>
<option>September</option>
<option>October</option>
<option>November</option>
<option>December</option>
</select>
<select class="year">
<option>Year</option>
<option>2000</option>
<option>2001</option>
<option>2002</option>
<option>2003</option>
<option>2004</option>
<option>2005</option>
<option>2006</option>
<option>2007</option>
<option>2008</option>
<option>2009</option>
</select>
All we've done so far is opened the container div and added two select box elements containing months and years. I've added the class attributes required for the CSS to work in this section so that we don't have to keep going back to the HTML file.
The scope of the years select box is going to differ depending on the date you are asking your visitors to enter. A date of birth request, for example, is going to have a far greater range of dates than a delivery date choice. In this example I've used a simple range to illustrate the functionality.
Select elements, while difficult and inconsistently styled across browsers, seem the best choice here in terms of minimizing and simplifying the code required. Another way we could do it would be to use a normal text input field, with a graphic representing a button placed directly at its right-hand edge, and an invisible div below it containing multiple paragraph elements that hold the choices. When the graphic button is selected, the div, aligned directly with the bottom of the text field, becomes visible. When one of the p elements is selected, DOM scripting methods could be used to copy its contents to the text field. It could be done in this way, but this is outside of the scope of this article and would result in a great deal more code. Now let's move on to the days part of the date-picker:
<a href="" class="datelive">1</a><a href=""
class="datelive">2</a><a href="" class="datelive">3</a><a href=""
class="datelive">4</a><a href="" class="datelive">5</a><a href=""
class="datelive">6</a>
<a href="" class="datelive">7</a><a href=""
class="datelive">8</a><a href="" class="datelive">9</a><a href=""
class="datelive">10</a><a href="" class="datelive">11</a><a
href="" class="datelive">12</a>
<a href="" class="datelive">13</a><a href=""
class="datelive">14</a><a href="" class="datelive">15</a><a
href="" class="datelive">16</a><a href="" class="datelive">17</a><a href="" class="datelive">18</a>
<a href="" class="datelive">19</a><a href=""
class="datelive">20</a><a href="" class="datelive">21</a><a
href="" class="datelive">22</a><a href="" class="datelive">23</a><a href="" class="datelive">24</a>
<a href="" class="datelive">25</a><a href=""
class="datelive">26</a><a href="" class="datelive">27</a><a href="" class="datelive">28</a><a href=""
class="datelive">29</a><a href="" class="datelive">30</a>
<a href="" class="datelive">31</a><a href=""
class="dateunlive"></a><a href="" class="dateunlive"></a><a
href="" class="dateunlive"></a><a href="" class="dateunlive"></a>
</div>
The days part is simply a long list of link elements which will be styled to represent squares, with each square corresponding to a different day. We also close the div off because as far as the HTML is concerned, that is all we need. I agree that it's not pretty to look at (either code-wise or on the page), but when we come to the CSS for it, everything can be straightened out.
Next: The CSS >>
More Style Sheets Articles
More By Dan Wellman
/ 18 
