library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

updated #3647: static page now has recommended markup for datepicker with multiple calendars/months

Browse Source 
also edited styles so that month/year feedback header always centers over calendar
This commit is contained in:
Maggie Costello Wachs 2008-12-11 21:30:44 +00:00
parent a3017dcaae
commit d04c08c6fb
2 changed files with 946 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

932
tests/static/datepicker.html
View File

@ -6,7 +6,8 @@
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
<script type="text/javascript" src="static_helpers.js"></script>
<style type="text/css">
.ui-datepicker {margin: 2em 0;}
.ui-datepicker { float:left; margin: 0 2em 2em 0;}
.ui-datepicker-multi { clear:left; }
</style>
</head>
<body style="font-size: 62.5%;">
@ -84,13 +85,9 @@
</tbody>
</table>
</div>
<!-- Datepicker with 1 combined select -->
<!-- Datepicker with 1 combined select -->
<div class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
@ -441,13 +438,926 @@
</td><td class="ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">
</td></tr>
</tbody>
</table>
</table>
<div class="ui-datepicker-buttonpane ui-widget-content">
<button class="ui-state-default ui-priority-primary ui-corner-all">Done</button>
<button class="ui-state-default ui-priority-secondary ui-corner-all">Today</button>
<button class="ui-datepicker-current ui-state-default ui-priority-secondary ui-corner-all">Today</button>
</div>
</div>
<!-- Multiple Datepickers with read only month/year -->
<div class="ui-datepicker ui-datepicker-multi ui-datepicker-multi-2 ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" style="width:34em;">
<div class="ui-datepicker-group ui-datepicker-group-first">
<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-left">
<a title="Prev" class="ui-datepicker-prev ui-corner-all" href="#"><span class="ui-icon ui-icon-circle-triangle-w">Prev</span></a>
<div class="ui-datepicker-title">
<span class="ui-datepicker-month">December</span>
<span class="ui-datepicker-year">2008</span>
</div>
</div>
<table class="ui-datepicker-calendar">
<thead>
<tr>
<th class="ui-datepicker-week-end"><span title="Sunday">Su</span></th>
<th><span title="Monday">Mo</span></th>
<th><span title="Tuesday">Tu</span></th>
<th><span title="Wednesday">We</span></th>
<th><span title="Thursday">Th</span></th>
<th><span title="Friday">Fr</span></th>
<th class="ui-datepicker-week-end"><span title="Saturday">Sa</span></th>
</tr>
</thead>
<tbody>
<tr>
<td class="ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">
</td><td class=""><a href="#" class="ui-state-default">1</a></td>
<td class="ui-datepicker-today"><a href="#" class="ui-state-default ui-state-highlight">2</a></td>
<td class=""><a href="#" class="ui-state-default">3</a></td>
<td class=""><a href="#" class="ui-state-default">4</a></td>
<td class=""><a href="#" class="ui-state-default">5</a></td>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">6</a></td>
</tr>
<tr>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">7</a></td>
<td class=""><a href="#" class="ui-state-default">8</a></td>
<td class=""><a href="#" class="ui-state-default">9</a></td>
<td class=""><a href="#" class="ui-state-default">10</a></td>
<td class=""><a href="#" class="ui-state-default">11</a></td>
<td class=""><a href="#" class="ui-state-default">12</a></td>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">13</a></td>
</tr>
<tr>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">14</a></td>
<td class=""><a href="#" class="ui-state-default">15</a></td>
<td class=""><a href="#" class="ui-state-default">16</a></td>
<td class=""><a href="#" class="ui-state-default">17</a></td>
<td class=""><a href="#" class="ui-state-default">18</a></td>
<td class="ui-datepicker-current-day"><a href="#" class="ui-state-active">19</a></td>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">20</a></td>
</tr>
<tr>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">21</a></td>
<td class=""><a href="#" class="ui-state-default">22</a></td>
<td class=""><a href="#" class="ui-state-default">23</a></td>
<td class=""><a href="#" class="ui-state-default">24</a></td>
<td class=""><a href="#" class="ui-state-default">25</a></td>
<td class=""><a href="#" class="ui-state-default">26</a></td>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">27</a></td>
</tr>
<tr>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">28</a></td>
<td class=""><a href="#" class="ui-state-default">29</a></td>
<td class=""><a href="#" class="ui-state-default">30</a></td>
<td class=""><a href="#" class="ui-state-default">31</a></td>
<td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">
</td><td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">
</td><td class="ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">
</td></tr>
</tbody>
</table>
</div>
<div class="ui-datepicker-group ui-datepicker-group-last">
<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-right">
<a title="Next" class="ui-datepicker-next ui-corner-all" href="#"><span class="ui-icon ui-icon-circle-triangle-e">Next</span></a>
<div class="ui-datepicker-title">
<span class="ui-datepicker-month">January</span>
<span class="ui-datepicker-year">2009</span>
</div>
</div>
<table class="ui-datepicker-calendar">
<thead>
<tr>
<th class="ui-datepicker-week-end"><span title="Sunday">Su</span></th>
<th><span title="Monday">Mo</span></th>
<th><span title="Tuesday">Tu</span></th>
<th><span title="Wednesday">We</span></th>
<th><span title="Thursday">Th</span></th>
<th><span title="Friday">Fr</span></th>
<th class="ui-datepicker-week-end"><span title="Saturday">Sa</span></th>
</tr>
</thead>
<tbody>
<tr>
<td class="ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">
</td><td class=""><a href="#" class="ui-state-default">1</a></td>
<td class="ui-datepicker-today"><a href="#" class="ui-state-default ui-state-highlight">2</a></td>
<td class=""><a href="#" class="ui-state-default">3</a></td>
<td class=""><a href="#" class="ui-state-default">4</a></td>
<td class=""><a href="#" class="ui-state-default">5</a></td>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">6</a></td>
</tr>
<tr>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">7</a></td>
<td class=""><a href="#" class="ui-state-default">8</a></td>
<td class=""><a href="#" class="ui-state-default">9</a></td>
<td class=""><a href="#" class="ui-state-default">10</a></td>
<td class=""><a href="#" class="ui-state-default">11</a></td>
<td class=""><a href="#" class="ui-state-default">12</a></td>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">13</a></td>
</tr>
<tr>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">14</a></td>
<td class=""><a href="#" class="ui-state-default">15</a></td>
<td class=""><a href="#" class="ui-state-default">16</a></td>
<td class=""><a href="#" class="ui-state-default">17</a></td>
<td class=""><a href="#" class="ui-state-default">18</a></td>
<td class="ui-datepicker-current-day"><a href="#" class="ui-state-active">19</a></td>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">20</a></td>
</tr>
<tr>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">21</a></td>
<td class=""><a href="#" class="ui-state-default">22</a></td>
<td class=""><a href="#" class="ui-state-default">23</a></td>
<td class=""><a href="#" class="ui-state-default">24</a></td>
<td class=""><a href="#" class="ui-state-default">25</a></td>
<td class=""><a href="#" class="ui-state-default">26</a></td>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">27</a></td>
</tr>
<tr>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">28</a></td>
<td class=""><a href="#" class="ui-state-default">29</a></td>
<td class=""><a href="#" class="ui-state-default">30</a></td>
<td class=""><a href="#" class="ui-state-default">31</a></td>
<td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">
</td><td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">
</td><td class="ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">
</td></tr>
</tbody>
</table>
</div>
</div>
<!-- Multiple Datepickers with read only month/year -->
<div class="ui-datepicker ui-datepicker-multi ui-datepicker-multi-3 ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" style="width:51em;">
<div class="ui-datepicker-group ui-datepicker-group-first">
<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-left">
<a title="Prev" class="ui-datepicker-prev ui-corner-all" href="#"><span class="ui-icon ui-icon-circle-triangle-w">Prev</span></a>
<div class="ui-datepicker-title">
<span class="ui-datepicker-month">December</span>
<span class="ui-datepicker-year">2008</span>
</div>
</div>
<table class="ui-datepicker-calendar">
<thead>
<tr>
<th class="ui-datepicker-week-end"><span title="Sunday">Su</span></th>
<th><span title="Monday">Mo</span></th>
<th><span title="Tuesday">Tu</span></th>
<th><span title="Wednesday">We</span></th>
<th><span title="Thursday">Th</span></th>
<th><span title="Friday">Fr</span></th>
<th class="ui-datepicker-week-end"><span title="Saturday">Sa</span></th>
</tr>
</thead>
<tbody>
<tr>
<td class="ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">
</td><td class=""><a href="#" class="ui-state-default">1</a></td>
<td class="ui-datepicker-today"><a href="#" class="ui-state-default ui-state-highlight">2</a></td>
<td class=""><a href="#" class="ui-state-default">3</a></td>
<td class=""><a href="#" class="ui-state-default">4</a></td>
<td class=""><a href="#" class="ui-state-default">5</a></td>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">6</a></td>
</tr>
<tr>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">7</a></td>
<td class=""><a href="#" class="ui-state-default">8</a></td>
<td class=""><a href="#" class="ui-state-default">9</a></td>
<td class=""><a href="#" class="ui-state-default">10</a></td>
<td class=""><a href="#" class="ui-state-default">11</a></td>
<td class=""><a href="#" class="ui-state-default">12</a></td>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">13</a></td>
</tr>
<tr>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">14</a></td>
<td class=""><a href="#" class="ui-state-default">15</a></td>
<td class=""><a href="#" class="ui-state-default">16</a></td>
<td class=""><a href="#" class="ui-state-default">17</a></td>
<td class=""><a href="#" class="ui-state-default">18</a></td>
<td class="ui-datepicker-current-day"><a href="#" class="ui-state-active">19</a></td>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">20</a></td>
</tr>
<tr>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">21</a></td>
<td class=""><a href="#" class="ui-state-default">22</a></td>
<td class=""><a href="#" class="ui-state-default">23</a></td>
<td class=""><a href="#" class="ui-state-default">24</a></td>
<td class=""><a href="#" class="ui-state-default">25</a></td>
<td class=""><a href="#" class="ui-state-default">26</a></td>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">27</a></td>
</tr>
<tr>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">28</a></td>
<td class=""><a href="#" class="ui-state-default">29</a></td>
<td class=""><a href="#" class="ui-state-default">30</a></td>
<td class=""><a href="#" class="ui-state-default">31</a></td>
<td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">
</td><td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">
</td><td class="ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">
</td></tr>
</tbody>
</table>
</div>
<div class="ui-datepicker-group ui-datepicker-group-middle">
<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix">
<div class="ui-datepicker-title">
<span class="ui-datepicker-month">January</span>
<span class="ui-datepicker-year">2009</span>
</div>
</div>
<table class="ui-datepicker-calendar">
<thead>
<tr>
<th class="ui-datepicker-week-end"><span title="Sunday">Su</span></th>
<th><span title="Monday">Mo</span></th>
<th><span title="Tuesday">Tu</span></th>
<th><span title="Wednesday">We</span></th>
<th><span title="Thursday">Th</span></th>
<th><span title="Friday">Fr</span></th>
<th class="ui-datepicker-week-end"><span title="Saturday">Sa</span></th>
</tr>
</thead>
<tbody>
<tr>
<td class="ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">
</td><td class=""><a href="#" class="ui-state-default">1</a></td>
<td class="ui-datepicker-today"><a href="#" class="ui-state-default ui-state-highlight">2</a></td>
<td class=""><a href="#" class="ui-state-default">3</a></td>
<td class=""><a href="#" class="ui-state-default">4</a></td>
<td class=""><a href="#" class="ui-state-default">5</a></td>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">6</a></td>
</tr>
<tr>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">7</a></td>
<td class=""><a href="#" class="ui-state-default">8</a></td>
<td class=""><a href="#" class="ui-state-default">9</a></td>
<td class=""><a href="#" class="ui-state-default">10</a></td>
<td class=""><a href="#" class="ui-state-default">11</a></td>
<td class=""><a href="#" class="ui-state-default">12</a></td>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">13</a></td>
</tr>
<tr>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">14</a></td>
<td class=""><a href="#" class="ui-state-default">15</a></td>
<td class=""><a href="#" class="ui-state-default">16</a></td>
<td class=""><a href="#" class="ui-state-default">17</a></td>
<td class=""><a href="#" class="ui-state-default">18</a></td>
<td class="ui-datepicker-current-day"><a href="#" class="ui-state-active">19</a></td>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">20</a></td>
</tr>
<tr>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">21</a></td>
<td class=""><a href="#" class="ui-state-default">22</a></td>
<td class=""><a href="#" class="ui-state-default">23</a></td>
<td class=""><a href="#" class="ui-state-default">24</a></td>
<td class=""><a href="#" class="ui-state-default">25</a></td>
<td class=""><a href="#" class="ui-state-default">26</a></td>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">27</a></td>
</tr>
<tr>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">28</a></td>
<td class=""><a href="#" class="ui-state-default">29</a></td>
<td class=""><a href="#" class="ui-state-default">30</a></td>
<td class=""><a href="#" class="ui-state-default">31</a></td>
<td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">
</td><td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">
</td><td class="ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">
</td></tr>
</tbody>
</table>
</div>
<div class="ui-datepicker-group ui-datepicker-group-last">
<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-right">
<a title="Next" class="ui-datepicker-next ui-corner-all" href="#"><span class="ui-icon ui-icon-circle-triangle-e">Next</span></a>
<div class="ui-datepicker-title">
<span class="ui-datepicker-month">February</span>
<span class="ui-datepicker-year">2009</span>
</div>
</div>
<table class="ui-datepicker-calendar">
<thead>
<tr>
<th class="ui-datepicker-week-end"><span title="Sunday">Su</span></th>
<th><span title="Monday">Mo</span></th>
<th><span title="Tuesday">Tu</span></th>
<th><span title="Wednesday">We</span></th>
<th><span title="Thursday">Th</span></th>
<th><span title="Friday">Fr</span></th>
<th class="ui-datepicker-week-end"><span title="Saturday">Sa</span></th>
</tr>
</thead>
<tbody>
<tr>
<td class="ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">
</td><td class=""><a href="#" class="ui-state-default">1</a></td>
<td class="ui-datepicker-today"><a href="#" class="ui-state-default ui-state-highlight">2</a></td>
<td class=""><a href="#" class="ui-state-default">3</a></td>
<td class=""><a href="#" class="ui-state-default">4</a></td>
<td class=""><a href="#" class="ui-state-default">5</a></td>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">6</a></td>
</tr>
<tr>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">7</a></td>
<td class=""><a href="#" class="ui-state-default">8</a></td>
<td class=""><a href="#" class="ui-state-default">9</a></td>
<td class=""><a href="#" class="ui-state-default">10</a></td>
<td class=""><a href="#" class="ui-state-default">11</a></td>
<td class=""><a href="#" class="ui-state-default">12</a></td>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">13</a></td>
</tr>
<tr>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">14</a></td>
<td class=""><a href="#" class="ui-state-default">15</a></td>
<td class=""><a href="#" class="ui-state-default">16</a></td>
<td class=""><a href="#" class="ui-state-default">17</a></td>
<td class=""><a href="#" class="ui-state-default">18</a></td>
<td class="ui-datepicker-current-day"><a href="#" class="ui-state-active">19</a></td>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">20</a></td>
</tr>
<tr>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">21</a></td>
<td class=""><a href="#" class="ui-state-default">22</a></td>
<td class=""><a href="#" class="ui-state-default">23</a></td>
<td class=""><a href="#" class="ui-state-default">24</a></td>
<td class=""><a href="#" class="ui-state-default">25</a></td>
<td class=""><a href="#" class="ui-state-default">26</a></td>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">27</a></td>
</tr>
<tr>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">28</a></td>
<td class=""><a href="#" class="ui-state-default">29</a></td>
<td class=""><a href="#" class="ui-state-default">30</a></td>
<td class=""><a href="#" class="ui-state-default">31</a></td>
<td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">
</td><td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">
</td><td class="ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">
</td></tr>
</tbody>
</table>
</div>
<div class="ui-datepicker-buttonpane ui-widget-content">
<button class="ui-state-default ui-priority-primary ui-corner-all">Done</button>
<button class="ui-datepicker-current ui-state-default ui-priority-secondary ui-corner-all">Today</button>
</div>
</div>
<!-- Multiple Datepickers with read only month/year -->
<div class="ui-datepicker ui-datepicker-multi ui-datepicker-multi-4 ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" style="width:60em;">
<div class="ui-datepicker-group ui-datepicker-group-first">
<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-left">
<a title="Prev" class="ui-datepicker-prev ui-corner-all" href="#"><span class="ui-icon ui-icon-circle-triangle-w">Prev</span></a>
<div class="ui-datepicker-title">
<span class="ui-datepicker-month">December</span>
<span class="ui-datepicker-year">2008</span>
</div>
</div>
<table class="ui-datepicker-calendar">
<thead>
<tr>
<th class="ui-datepicker-week-end"><span title="Sunday">Su</span></th>
<th><span title="Monday">Mo</span></th>
<th><span title="Tuesday">Tu</span></th>
<th><span title="Wednesday">We</span></th>
<th><span title="Thursday">Th</span></th>
<th><span title="Friday">Fr</span></th>
<th class="ui-datepicker-week-end"><span title="Saturday">Sa</span></th>
</tr>
</thead>
<tbody>
<tr>
<td class="ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">
</td><td class=""><a href="#" class="ui-state-default">1</a></td>
<td class="ui-datepicker-today"><a href="#" class="ui-state-default ui-state-highlight">2</a></td>
<td class=""><a href="#" class="ui-state-default">3</a></td>
<td class=""><a href="#" class="ui-state-default">4</a></td>
<td class=""><a href="#" class="ui-state-default">5</a></td>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">6</a></td>
</tr>
<tr>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">7</a></td>
<td class=""><a href="#" class="ui-state-default">8</a></td>
<td class=""><a href="#" class="ui-state-default">9</a></td>
<td class=""><a href="#" class="ui-state-default">10</a></td>
<td class=""><a href="#" class="ui-state-default">11</a></td>
<td class=""><a href="#" class="ui-state-default">12</a></td>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">13</a></td>
</tr>
<tr>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">14</a></td>
<td class=""><a href="#" class="ui-state-default">15</a></td>
<td class=""><a href="#" class="ui-state-default">16</a></td>
<td class=""><a href="#" class="ui-state-default">17</a></td>
<td class=""><a href="#" class="ui-state-default">18</a></td>
<td class="ui-datepicker-current-day"><a href="#" class="ui-state-active">19</a></td>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">20</a></td>
</tr>
<tr>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">21</a></td>
<td class=""><a href="#" class="ui-state-default">22</a></td>
<td class=""><a href="#" class="ui-state-default">23</a></td>
<td class=""><a href="#" class="ui-state-default">24</a></td>
<td class=""><a href="#" class="ui-state-default">25</a></td>
<td class=""><a href="#" class="ui-state-default">26</a></td>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">27</a></td>
</tr>
<tr>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">28</a></td>
<td class=""><a href="#" class="ui-state-default">29</a></td>
<td class=""><a href="#" class="ui-state-default">30</a></td>
<td class=""><a href="#" class="ui-state-default">31</a></td>
<td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">
</td><td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">
</td><td class="ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">
</td></tr>
</tbody>
</table>
</div>
<div class="ui-datepicker-group ui-datepicker-group-middle">
<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix">
<div class="ui-datepicker-title">
<span class="ui-datepicker-month">January</span>
<span class="ui-datepicker-year">2009</span>
</div>
</div>
<table class="ui-datepicker-calendar">
<thead>
<tr>
<th class="ui-datepicker-week-end"><span title="Sunday">Su</span></th>
<th><span title="Monday">Mo</span></th>
<th><span title="Tuesday">Tu</span></th>
<th><span title="Wednesday">We</span></th>
<th><span title="Thursday">Th</span></th>
<th><span title="Friday">Fr</span></th>
<th class="ui-datepicker-week-end"><span title="Saturday">Sa</span></th>
</tr>
</thead>
<tbody>
<tr>
<td class="ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">
</td><td class=""><a href="#" class="ui-state-default">1</a></td>
<td class="ui-datepicker-today"><a href="#" class="ui-state-default ui-state-highlight">2</a></td>
<td class=""><a href="#" class="ui-state-default">3</a></td>
<td class=""><a href="#" class="ui-state-default">4</a></td>
<td class=""><a href="#" class="ui-state-default">5</a></td>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">6</a></td>
</tr>
<tr>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">7</a></td>
<td class=""><a href="#" class="ui-state-default">8</a></td>
<td class=""><a href="#" class="ui-state-default">9</a></td>
<td class=""><a href="#" class="ui-state-default">10</a></td>
<td class=""><a href="#" class="ui-state-default">11</a></td>
<td class=""><a href="#" class="ui-state-default">12</a></td>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">13</a></td>
</tr>
<tr>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">14</a></td>
<td class=""><a href="#" class="ui-state-default">15</a></td>
<td class=""><a href="#" class="ui-state-default">16</a></td>
<td class=""><a href="#" class="ui-state-default">17</a></td>
<td class=""><a href="#" class="ui-state-default">18</a></td>
<td class="ui-datepicker-current-day"><a href="#" class="ui-state-active">19</a></td>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">20</a></td>
</tr>
<tr>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">21</a></td>
<td class=""><a href="#" class="ui-state-default">22</a></td>
<td class=""><a href="#" class="ui-state-default">23</a></td>
<td class=""><a href="#" class="ui-state-default">24</a></td>
<td class=""><a href="#" class="ui-state-default">25</a></td>
<td class=""><a href="#" class="ui-state-default">26</a></td>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">27</a></td>
</tr>
<tr>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">28</a></td>
<td class=""><a href="#" class="ui-state-default">29</a></td>
<td class=""><a href="#" class="ui-state-default">30</a></td>
<td class=""><a href="#" class="ui-state-default">31</a></td>
<td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">
</td><td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">
</td><td class="ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">
</td></tr>
</tbody>
</table>
</div>
<div class="ui-datepicker-group ui-datepicker-group-middle">
<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix">
<div class="ui-datepicker-title">
<span class="ui-datepicker-month">February</span>
<span class="ui-datepicker-year">2009</span>
</div>
</div>
<table class="ui-datepicker-calendar">
<thead>
<tr>
<th class="ui-datepicker-week-end"><span title="Sunday">Su</span></th>
<th><span title="Monday">Mo</span></th>
<th><span title="Tuesday">Tu</span></th>
<th><span title="Wednesday">We</span></th>
<th><span title="Thursday">Th</span></th>
<th><span title="Friday">Fr</span></th>
<th class="ui-datepicker-week-end"><span title="Saturday">Sa</span></th>
</tr>
</thead>
<tbody>
<tr>
<td class="ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">
</td><td class=""><a href="#" class="ui-state-default">1</a></td>
<td class="ui-datepicker-today"><a href="#" class="ui-state-default ui-state-highlight">2</a></td>
<td class=""><a href="#" class="ui-state-default">3</a></td>
<td class=""><a href="#" class="ui-state-default">4</a></td>
<td class=""><a href="#" class="ui-state-default">5</a></td>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">6</a></td>
</tr>
<tr>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">7</a></td>
<td class=""><a href="#" class="ui-state-default">8</a></td>
<td class=""><a href="#" class="ui-state-default">9</a></td>
<td class=""><a href="#" class="ui-state-default">10</a></td>
<td class=""><a href="#" class="ui-state-default">11</a></td>
<td class=""><a href="#" class="ui-state-default">12</a></td>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">13</a></td>
</tr>
<tr>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">14</a></td>
<td class=""><a href="#" class="ui-state-default">15</a></td>
<td class=""><a href="#" class="ui-state-default">16</a></td>
<td class=""><a href="#" class="ui-state-default">17</a></td>
<td class=""><a href="#" class="ui-state-default">18</a></td>
<td class="ui-datepicker-current-day"><a href="#" class="ui-state-active">19</a></td>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">20</a></td>
</tr>
<tr>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">21</a></td>
<td class=""><a href="#" class="ui-state-default">22</a></td>
<td class=""><a href="#" class="ui-state-default">23</a></td>
<td class=""><a href="#" class="ui-state-default">24</a></td>
<td class=""><a href="#" class="ui-state-default">25</a></td>
<td class=""><a href="#" class="ui-state-default">26</a></td>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">27</a></td>
</tr>
<tr>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">28</a></td>
<td class=""><a href="#" class="ui-state-default">29</a></td>
<td class=""><a href="#" class="ui-state-default">30</a></td>
<td class=""><a href="#" class="ui-state-default">31</a></td>
<td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">
</td><td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">
</td><td class="ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">
</td></tr>
</tbody>
</table>
</div>
<div class="ui-datepicker-group ui-datepicker-group-last">
<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-right">
<a title="Next" class="ui-datepicker-next ui-corner-all" href="#"><span class="ui-icon ui-icon-circle-triangle-e">Next</span></a>
<div class="ui-datepicker-title">
<span class="ui-datepicker-month">March</span>
<span class="ui-datepicker-year">2009</span>
</div>
</div>
<table class="ui-datepicker-calendar">
<thead>
<tr>
<th class="ui-datepicker-week-end"><span title="Sunday">Su</span></th>
<th><span title="Monday">Mo</span></th>
<th><span title="Tuesday">Tu</span></th>
<th><span title="Wednesday">We</span></th>
<th><span title="Thursday">Th</span></th>
<th><span title="Friday">Fr</span></th>
<th class="ui-datepicker-week-end"><span title="Saturday">Sa</span></th>
</tr>
</thead>
<tbody>
<tr>
<td class="ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">
</td><td class=""><a href="#" class="ui-state-default">1</a></td>
<td class="ui-datepicker-today"><a href="#" class="ui-state-default ui-state-highlight">2</a></td>
<td class=""><a href="#" class="ui-state-default">3</a></td>
<td class=""><a href="#" class="ui-state-default">4</a></td>
<td class=""><a href="#" class="ui-state-default">5</a></td>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">6</a></td>
</tr>
<tr>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">7</a></td>
<td class=""><a href="#" class="ui-state-default">8</a></td>
<td class=""><a href="#" class="ui-state-default">9</a></td>
<td class=""><a href="#" class="ui-state-default">10</a></td>
<td class=""><a href="#" class="ui-state-default">11</a></td>
<td class=""><a href="#" class="ui-state-default">12</a></td>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">13</a></td>
</tr>
<tr>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">14</a></td>
<td class=""><a href="#" class="ui-state-default">15</a></td>
<td class=""><a href="#" class="ui-state-default">16</a></td>
<td class=""><a href="#" class="ui-state-default">17</a></td>
<td class=""><a href="#" class="ui-state-default">18</a></td>
<td class="ui-datepicker-current-day"><a href="#" class="ui-state-active">19</a></td>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">20</a></td>
</tr>
<tr>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">21</a></td>
<td class=""><a href="#" class="ui-state-default">22</a></td>
<td class=""><a href="#" class="ui-state-default">23</a></td>
<td class=""><a href="#" class="ui-state-default">24</a></td>
<td class=""><a href="#" class="ui-state-default">25</a></td>
<td class=""><a href="#" class="ui-state-default">26</a></td>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">27</a></td>
</tr>
<tr>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">28</a></td>
<td class=""><a href="#" class="ui-state-default">29</a></td>
<td class=""><a href="#" class="ui-state-default">30</a></td>
<td class=""><a href="#" class="ui-state-default">31</a></td>
<td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">
</td><td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">
</td><td class="ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">
</td></tr>
</tbody>
</table>
</div>
<div class="ui-datepicker-group ui-datepicker-group-first">
<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix">
<div class="ui-datepicker-title">
<span class="ui-datepicker-month">April</span>
<span class="ui-datepicker-year">2009</span>
</div>
</div>
<table class="ui-datepicker-calendar">
<thead>
<tr>
<th class="ui-datepicker-week-end"><span title="Sunday">Su</span></th>
<th><span title="Monday">Mo</span></th>
<th><span title="Tuesday">Tu</span></th>
<th><span title="Wednesday">We</span></th>
<th><span title="Thursday">Th</span></th>
<th><span title="Friday">Fr</span></th>
<th class="ui-datepicker-week-end"><span title="Saturday">Sa</span></th>
</tr>
</thead>
<tbody>
<tr>
<td class="ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">
</td><td class=""><a href="#" class="ui-state-default">1</a></td>
<td class="ui-datepicker-today"><a href="#" class="ui-state-default ui-state-highlight">2</a></td>
<td class=""><a href="#" class="ui-state-default">3</a></td>
<td class=""><a href="#" class="ui-state-default">4</a></td>
<td class=""><a href="#" class="ui-state-default">5</a></td>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">6</a></td>
</tr>
<tr>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">7</a></td>
<td class=""><a href="#" class="ui-state-default">8</a></td>
<td class=""><a href="#" class="ui-state-default">9</a></td>
<td class=""><a href="#" class="ui-state-default">10</a></td>
<td class=""><a href="#" class="ui-state-default">11</a></td>
<td class=""><a href="#" class="ui-state-default">12</a></td>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">13</a></td>
</tr>
<tr>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">14</a></td>
<td class=""><a href="#" class="ui-state-default">15</a></td>
<td class=""><a href="#" class="ui-state-default">16</a></td>
<td class=""><a href="#" class="ui-state-default">17</a></td>
<td class=""><a href="#" class="ui-state-default">18</a></td>
<td class="ui-datepicker-current-day"><a href="#" class="ui-state-active">19</a></td>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">20</a></td>
</tr>
<tr>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">21</a></td>
<td class=""><a href="#" class="ui-state-default">22</a></td>
<td class=""><a href="#" class="ui-state-default">23</a></td>
<td class=""><a href="#" class="ui-state-default">24</a></td>
<td class=""><a href="#" class="ui-state-default">25</a></td>
<td class=""><a href="#" class="ui-state-default">26</a></td>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">27</a></td>
</tr>
<tr>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">28</a></td>
<td class=""><a href="#" class="ui-state-default">29</a></td>
<td class=""><a href="#" class="ui-state-default">30</a></td>
<td class=""><a href="#" class="ui-state-default">31</a></td>
<td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">
</td><td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">
</td><td class="ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">
</td></tr>
</tbody>
</table>
</div>
<div class="ui-datepicker-group ui-datepicker-group-middle">
<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix">
<div class="ui-datepicker-title">
<span class="ui-datepicker-month">May</span>
<span class="ui-datepicker-year">2009</span>
</div>
</div>
<table class="ui-datepicker-calendar">
<thead>
<tr>
<th class="ui-datepicker-week-end"><span title="Sunday">Su</span></th>
<th><span title="Monday">Mo</span></th>
<th><span title="Tuesday">Tu</span></th>
<th><span title="Wednesday">We</span></th>
<th><span title="Thursday">Th</span></th>
<th><span title="Friday">Fr</span></th>
<th class="ui-datepicker-week-end"><span title="Saturday">Sa</span></th>
</tr>
</thead>
<tbody>
<tr>
<td class="ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">
</td><td class=""><a href="#" class="ui-state-default">1</a></td>
<td class="ui-datepicker-today"><a href="#" class="ui-state-default ui-state-highlight">2</a></td>
<td class=""><a href="#" class="ui-state-default">3</a></td>
<td class=""><a href="#" class="ui-state-default">4</a></td>
<td class=""><a href="#" class="ui-state-default">5</a></td>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">6</a></td>
</tr>
<tr>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">7</a></td>
<td class=""><a href="#" class="ui-state-default">8</a></td>
<td class=""><a href="#" class="ui-state-default">9</a></td>
<td class=""><a href="#" class="ui-state-default">10</a></td>
<td class=""><a href="#" class="ui-state-default">11</a></td>
<td class=""><a href="#" class="ui-state-default">12</a></td>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">13</a></td>
</tr>
<tr>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">14</a></td>
<td class=""><a href="#" class="ui-state-default">15</a></td>
<td class=""><a href="#" class="ui-state-default">16</a></td>
<td class=""><a href="#" class="ui-state-default">17</a></td>
<td class=""><a href="#" class="ui-state-default">18</a></td>
<td class="ui-datepicker-current-day"><a href="#" class="ui-state-active">19</a></td>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">20</a></td>
</tr>
<tr>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">21</a></td>
<td class=""><a href="#" class="ui-state-default">22</a></td>
<td class=""><a href="#" class="ui-state-default">23</a></td>
<td class=""><a href="#" class="ui-state-default">24</a></td>
<td class=""><a href="#" class="ui-state-default">25</a></td>
<td class=""><a href="#" class="ui-state-default">26</a></td>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">27</a></td>
</tr>
<tr>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">28</a></td>
<td class=""><a href="#" class="ui-state-default">29</a></td>
<td class=""><a href="#" class="ui-state-default">30</a></td>
<td class=""><a href="#" class="ui-state-default">31</a></td>
<td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">
</td><td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">
</td><td class="ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">
</td></tr>
</tbody>
</table>
</div>
<div class="ui-datepicker-group ui-datepicker-group-middle">
<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix">
<div class="ui-datepicker-title">
<span class="ui-datepicker-month">June</span>
<span class="ui-datepicker-year">2009</span>
</div>
</div>
<table class="ui-datepicker-calendar">
<thead>
<tr>
<th class="ui-datepicker-week-end"><span title="Sunday">Su</span></th>
<th><span title="Monday">Mo</span></th>
<th><span title="Tuesday">Tu</span></th>
<th><span title="Wednesday">We</span></th>
<th><span title="Thursday">Th</span></th>
<th><span title="Friday">Fr</span></th>
<th class="ui-datepicker-week-end"><span title="Saturday">Sa</span></th>
</tr>
</thead>
<tbody>
<tr>
<td class="ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">
</td><td class=""><a href="#" class="ui-state-default">1</a></td>
<td class="ui-datepicker-today"><a href="#" class="ui-state-default ui-state-highlight">2</a></td>
<td class=""><a href="#" class="ui-state-default">3</a></td>
<td class=""><a href="#" class="ui-state-default">4</a></td>
<td class=""><a href="#" class="ui-state-default">5</a></td>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">6</a></td>
</tr>
<tr>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">7</a></td>
<td class=""><a href="#" class="ui-state-default">8</a></td>
<td class=""><a href="#" class="ui-state-default">9</a></td>
<td class=""><a href="#" class="ui-state-default">10</a></td>
<td class=""><a href="#" class="ui-state-default">11</a></td>
<td class=""><a href="#" class="ui-state-default">12</a></td>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">13</a></td>
</tr>
<tr>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">14</a></td>
<td class=""><a href="#" class="ui-state-default">15</a></td>
<td class=""><a href="#" class="ui-state-default">16</a></td>
<td class=""><a href="#" class="ui-state-default">17</a></td>
<td class=""><a href="#" class="ui-state-default">18</a></td>
<td class="ui-datepicker-current-day"><a href="#" class="ui-state-active">19</a></td>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">20</a></td>
</tr>
<tr>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">21</a></td>
<td class=""><a href="#" class="ui-state-default">22</a></td>
<td class=""><a href="#" class="ui-state-default">23</a></td>
<td class=""><a href="#" class="ui-state-default">24</a></td>
<td class=""><a href="#" class="ui-state-default">25</a></td>
<td class=""><a href="#" class="ui-state-default">26</a></td>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">27</a></td>
</tr>
<tr>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">28</a></td>
<td class=""><a href="#" class="ui-state-default">29</a></td>
<td class=""><a href="#" class="ui-state-default">30</a></td>
<td class=""><a href="#" class="ui-state-default">31</a></td>
<td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">
</td><td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">
</td><td class="ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">
</td></tr>
</tbody>
</table>
</div>
<div class="ui-datepicker-group ui-datepicker-group-last">
<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-right">
<div class="ui-datepicker-title">
<span class="ui-datepicker-month">July</span>
<span class="ui-datepicker-year">2009</span>
</div>
</div>
<table class="ui-datepicker-calendar">
<thead>
<tr>
<th class="ui-datepicker-week-end"><span title="Sunday">Su</span></th>
<th><span title="Monday">Mo</span></th>
<th><span title="Tuesday">Tu</span></th>
<th><span title="Wednesday">We</span></th>
<th><span title="Thursday">Th</span></th>
<th><span title="Friday">Fr</span></th>
<th class="ui-datepicker-week-end"><span title="Saturday">Sa</span></th>
</tr>
</thead>
<tbody>
<tr>
<td class="ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">
</td><td class=""><a href="#" class="ui-state-default">1</a></td>
<td class="ui-datepicker-today"><a href="#" class="ui-state-default ui-state-highlight">2</a></td>
<td class=""><a href="#" class="ui-state-default">3</a></td>
<td class=""><a href="#" class="ui-state-default">4</a></td>
<td class=""><a href="#" class="ui-state-default">5</a></td>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">6</a></td>
</tr>
<tr>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">7</a></td>
<td class=""><a href="#" class="ui-state-default">8</a></td>
<td class=""><a href="#" class="ui-state-default">9</a></td>
<td class=""><a href="#" class="ui-state-default">10</a></td>
<td class=""><a href="#" class="ui-state-default">11</a></td>
<td class=""><a href="#" class="ui-state-default">12</a></td>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">13</a></td>
</tr>
<tr>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">14</a></td>
<td class=""><a href="#" class="ui-state-default">15</a></td>
<td class=""><a href="#" class="ui-state-default">16</a></td>
<td class=""><a href="#" class="ui-state-default">17</a></td>
<td class=""><a href="#" class="ui-state-default">18</a></td>
<td class="ui-datepicker-current-day"><a href="#" class="ui-state-active">19</a></td>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">20</a></td>
</tr>
<tr>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">21</a></td>
<td class=""><a href="#" class="ui-state-default">22</a></td>
<td class=""><a href="#" class="ui-state-default">23</a></td>
<td class=""><a href="#" class="ui-state-default">24</a></td>
<td class=""><a href="#" class="ui-state-default">25</a></td>
<td class=""><a href="#" class="ui-state-default">26</a></td>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">27</a></td>
</tr>
<tr>
<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">28</a></td>
<td class=""><a href="#" class="ui-state-default">29</a></td>
<td class=""><a href="#" class="ui-state-default">30</a></td>
<td class=""><a href="#" class="ui-state-default">31</a></td>
<td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">
</td><td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">
</td><td class="ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">
</td></tr>
</tbody>
</table>
</div>
</div>
</body>
</html>

37
themes/base/ui.datepicker.css
View File

@ -1,20 +1,33 @@
/* Datepicker
----------------------------------*/
.ui-datepicker { width: 17em; padding: .2em; }
.ui-datepicker-header { padding: .1em; }
.ui-datepicker-prev, .ui-datepicker-next { width: 1.8em; height: 1.8em; position: relative; margin: 1px; }
.ui-datepicker { width: 17em; padding: .2em .2em 0; }
.ui-datepicker-header { position:relative; padding:.2em 0; }
.ui-datepicker-prev, .ui-datepicker-next { position:absolute; top:.2em; width: 1.8em; height: 1.8em; }
.ui-datepicker-prev:hover, .ui-datepicker-next:hover {margin: 0;}
.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { display: block; position: absolute; left: 50%; margin-left: -8px; top: 50%; margin-top: -8px; }
.ui-datepicker-prev { float: left; }
.ui-datepicker-next { float: right; }
.ui-datepicker-title { margin: 0 .3em; line-height: 1.8em; text-align: center; width: 12em; float: left; }
.ui-datepicker-title select {float: left; margin-top: .2em;}
.ui-datepicker select.ui-datepicker-month-year {width: 12em;}
.ui-datepicker select.ui-datepicker-month, select.ui-datepicker-year {width: 5.7em;}
.ui-datepicker-prev { left:0; }
.ui-datepicker-next { right:0; }
.ui-datepicker-title { margin: 0 2em; line-height: 1.8em; text-align: center; }
.ui-datepicker-title select { float:left; font-size:1em; margin:0; }
.ui-datepicker select.ui-datepicker-month-year {width: 100%;}
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year { width: 49%;}
.ui-datepicker-title select.ui-datepicker-year { float: right; }
.ui-datepicker table {width: 100%; font-size: .9em; border-collapse: collapse; }
.ui-datepicker table {width: 100%; font-size: .9em; border-collapse: collapse; margin:0 0 .4em; }
.ui-datepicker th { padding: .7em .3em; text-align: center; font-weight: bold; }
.ui-datepicker td span, .ui-datepicker td a { display: block; padding: .2em; text-align: right; text-decoration: none; }
.ui-datepicker-today a { background-image: none; }
.ui-datepicker-buttonpane { background-image: none; margin: .5em 0 0 0; padding: .3em 0; border-left: 0; border-right: 0; border-bottom: 0; }
.ui-datepicker-buttonpane button { float: right; margin: .5em .4em .5em 0; cursor: pointer; padding: .2em .6em .3em .6em; line-height: 1.4em; }
.ui-datepicker-buttonpane { background-image: none; margin: .7em 0 0 0; padding:0 .2em; border-left: 0; border-right: 0; border-bottom: 0; }
.ui-datepicker-buttonpane button { float: right; margin: .5em .2em .4em; cursor: pointer; padding: .2em .6em .3em .6em; width:auto; overflow:visible; }
.ui-datepicker-buttonpane button.ui-datepicker-current { float:left; }
/* with multiple calendars */
.ui-datepicker.ui-datepicker-multi { width:auto; }
.ui-datepicker-multi .ui-datepicker-group { float:left; }
.ui-datepicker-multi .ui-datepicker-group table { width:95%; margin:0 auto .4em; }
.ui-datepicker-multi-2 .ui-datepicker-group { width:50%; }
.ui-datepicker-multi-3 .ui-datepicker-group { width:33.3%; }
.ui-datepicker-multi-4 .ui-datepicker-group { width:25%; }
.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header { border-left:0; }
.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header { border-left:0; }
.ui-datepicker-multi .ui-datepicker-buttonpane { clear:left; }