jQuery UI: Date Picker

Date Picker

by sgearhart2

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/mint-choc/jquery-ui.css">
<div class="demo">

<p>Daily: <input id="datepicker_daily" type="text"></p>
<br>
<p>Weekly: <input id="datepicker_weekly" type="text"></p>
<br>
<p class="monthly">Monthly: <input id="datepicker_monthly" type="text"></p>
<br>
<pc lass="yearly" >Yearly: <input id="datepicker_yearly" type="text"></p>

</div><!-- End demo -->

<div style="display: none;" class="demo-description">
<p>The datepicker is tied to a standard form input field.  Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay.  Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close. If a date is chosen, feedback is shown as the input's value.</p>
</div><!-- End demo-description -->

CSS

/*
    Add custom styling or use existing jQuery UI themes

    REFERENCE: jQuery UI themes, http://blog.jqueryui.com/
*/
.yearly .ui-datepicker-calendar, .monthly .ui-datepicker-calendar {
  display:none;
}

JavaScript

var __picker = $.fn.datepicker;
$.fn.datepicker = function(options) {
  if(options && options.range) {

  }
  if(options && options.frequency) {
  	$.datepicker._frequency = options.frequency
    switch(options.frequency) {
      case 'Yearly':
        options.changeYear = true;
        options.changeMonth = false;
        options.numberOfMonths = 2;
        break;
      case 'Monthly':
        options.changeYear = true;
        options.changeMonth = true;
        options.numberOfMonths = 2;
        break;
      case 'Weekly':
        options.numberOfMonths = 3;
        break;
      case 'Daily':
      case 'Hourly':
        options.numberOfMonths = 3;
      default:
        break;
    }
  }

  __picker.apply(this, [options]);
  var $self = this;
  
  return this;
}

var headerDraw = $.datepicker._generateMonthYearHeader;
$.datepicker._generateMonthYearHeader = function( inst, drawMonth, drawYear, minDate, maxDate, secondary, monthNames, monthNamesShort ) {
  switch(inst.settings.frequency) {
    case 'Yearly':
      secondary = false;

      var inMinYear, inMaxYear, month, years, thisYear, determineYear, year, endYear
      changeYear = this._get( inst, "changeYear" ),
        showMonthAfterYear = this._get( inst, "showMonthAfterYear" ),
        html = "<div class='ui-datepicker-title'>";

      // Year selection
      if ( !inst.yearshtml ) {
        inst.yearshtml = "";
        if ( secondary || !changeYear ) {
          html += "<span class='ui-datepicker-year'>" + drawYear + "</span>";
        } else {

          // determine range of years to display
          years = this._get( inst, "yearRange" ).split( ":" );
          thisYear = new Date().getFullYear();
          determineYear = function( value ) {
            var year = ( value.match( /c[+\-].*/ ) ? drawYear + parseInt( value.substring( 1 ), 10 ) :
                        ( value.match( /[+\-].*/ ) ? thisYear + parseInt( value, 10 ) :
                         parseInt( value, 10 ) ) );
           ...