Date Picker

by waqasahmad724

HTML

<div id="application" role="application">
   <label id="date_label" for="date">Date</label>:
   <input id="date" type="text"/>
   <button id="bn_date">Select Date...</button> 
   <div id="dp1" class="datepicker" aria-hidden="true">
      <div id="month-wrap">
         <div id="bn_prev" role="button" aria-labelledby="bn_prev-label" tabindex="0"><img class="bn_img" src="http://www.oaa-accessibility.org/media/examples/images/prev.png" alt="<<"/></div>
         <div id="month" role="heading" aria-live="assertive" aria-atomic="true">February 2011</div>
         <div id="bn_next" role="button" aria-labelledby="bn_next-label" tabindex="0"><img class="bn_img" src="http://www.oaa-accessibility.org/media/examples/images/next.png" alt=">>"/></div>
      </div>
      <table id="cal" role="grid" aria-activedescendant="errMsg" aria-labelledby="month" tabindex="0">
         <thead>
            <tr id="weekdays">
               <th id="Sunday"><abbr title="Sunday">Su</abbr></th>
               <th id="Monday"><abbr title="Monday">Mo</abbr></th>
               <th id="Tuesday"><abbr title="Tuesday">Tu</abbr></th>
               <th id="Wednesday"><abbr title="Wednesday">We</abbr></th>
               <th id="Thursday"><abbr title="Thursday">Th</abbr></th>
               <th id="Friday"><abbr title="Friday">Fr</abbr></th>
               <th id="Saturday"><abbr title="Saturday">Sa</abbr></th>
            </tr>
         </thead>
         <tbody>
            <tr><td id="errMsg" colspan="7">Javascript must be enabled</td></tr>
         </tbody>
      </table>
      <div id="bn_prev-label" class="offscreen">Go to previous month</div>
      <div id="bn_next-label" class="offscreen">Go to next month</div>
   </div>
</div>

CSS

.datepicker {
   margin: 10px;
   padding: 2px;
   position: absolute;
   width: 261px;
   background-color: #fff;
   border: 1px solid #ccc;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border-radius: 4px;
}
div#month-wrap {
   height: 30px;
   background-color: #ddd;
   border: 1px solid black;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border-radius: 4px;
}
div#bn_prev {
   margin: 3px;
   float: left;
   width: 24px;
   height: 24px;
}
div#bn_next {
   margin: 3px;
   float: right;
   width: 24px;
   height: 24px;
}

div#bn_prev:hover,
div#bn_prev:focus,
div#bn_next:hover,
div#bn_next:focus {
   margin: 2px;
   background-color: #fc3;
   border: 1px solid #800;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border-radius: 4px;
}
img.bn_img {
   margin: 0;
   padding: 2px;
}
div#month {
   float: left;
   padding-top: 6px;
   width: 199px;
   height: 24px;
   text-align: center;
   font-weight: bold;
   font-size: 1.2em;
}
table#cal {
   width: 261px;
   font-size: 1.2em;
   text-align: center;
}
table#cal th,
table#cal td {
   width: 35px;
   height: 30px;
   padding: 0;
}
table#cal td {
   background-color: #ddd;
   border: 1px solid #999;
}

table#cal td.today {
   background-color: #FFF0C4;
   border: 1px solid #999;
}

table#cal td.empty {
   background-color: #f9f9f9;
   border: 1px solid #eee;
}

table#cal td:hover,
table#cal td.focus {
   border-color: #800;
   background-color: #fc3;
}

table#cal td.empty:hover {
   background-color: #f9f9f9;
   border: 1px solid #eee;
}

.offscreen {
   position: absolute;
   left: -200em;
   top: -100em;
}
[aria-hidden="true"] {
   display: none;
}

JavaScript

$(document).ready(function() {
   var dp1 = new datepicker('dp1', 'date', true);

   $('input').click(function(e) {
      dp1.showDlg();

      e.stopPropagation();
      return false;
   });
});

function datepicker(id, target, modal) {


   this.$id = $('#' + id); // element to attach widget to
   this.$monthObj = this.$id.find('#month');
   this.$prev = this.$id.find('#bn_prev');
   this.$next = this.$id.find('#bn_next');
   this.$grid = this.$id.find('#cal');
   this.$target = $('#' + target); // div or text box that will receive the selected date string and focus (if modal)
   this.bModal = modal; // true if datepicker should appear in a modal dialog box.

   this.monthNames = ['January', 'February', 'March', 'April','May','June',
         'July', 'August', 'September', 'October', 'November', 'December'];

   this.dayNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];

   this.dateObj = new Date();

   this.curYear = this.dateObj.getFullYear(); 
   this.year = this.curYear;

   this.curMonth = this.dateObj.getMonth(); 
   this.month = this.curMonth;
   this.currentDate = true;

   this.date = this.dateObj.getDate(); 

   this.keys = {
                tab:       9,
                enter:    13,
                esc:      27,
                space:    32,
                pageup:   33,
                pagedown: 34,
                end:      35,
                home:     36,
                left:     37,
                up:       38,
                right:    39,
                down:     40
               };
   
   // display the current month
   this.$monthObj.html(this.monthNames[this.month] + ' ' + this.year);

   // populate the calendar grid
   this.popGrid();

   // update the table's activedescdendant to point to the current day
   this.$grid.attr('aria-activedescendant', this.$grid.find('.today').attr('id'));

   this.bindHandlers();

   // hide dialog if in modal mode
   if (this.bModal == true) {
     ...