Skip to content

lugolabs/monthpicker

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
css
 
 
 
 
js
 
 
 
 
 
 
 
 
 
 

jQuery.monthpicker

jQuerymonthpicker screenshot

Pick month and year with this jQuery plugin.

Usage

The plugin accepts a few options:

  • years array of years to select from
  • topOffset distance in pixels from the element offset
  • onMonthSelect event triggered when selecting a month

Example:

$('#monthpicker').monthpicker({
    years:          [2015, 2014, 2013, 2012, 2011],
    topOffset:      6,
    onMonthSelect:  function(m, y) {
      console.log('Month: ' + m + ', year: ' + y);
    }
});

See more at examples folder.

Styles

The HTML generated for the popup is shown below:

<div class="monthpicker">
  <div class="years">
    <select>
      <option>2015</option>
      <option>2014</option>
      <option>2013</option>
      <option>2012</option>
      <option>2011</option>
    </select>
  </div>
  <table>
    <tr>
      <td><button data-value="0">January</button></td>
      <td><button data-value="1">February</button></td>
      <td><button data-value="2">March</button></td>
      <td><button data-value="3">April</button></td>
    </tr>
    <tr>
      <td><button data-value="4">May</button></td>
      <td><button data-value="5">June</button></td>
      <td><button data-value="6">July</button></td>
      <td><button data-value="7">August</button></td>
    </tr>
    <tr>
      <td><button data-value="8">September</button></td>
      <td><button data-value="9">October</button></td>
      <td><button data-value="10">November</button></td>
      <td><button data-value="11">December</button></td>
    </tr>
  </table>
</div>

Some initial styles are added in the css/jquery.monthpicker.css file. You can change them as you please.

Tests

Run tests at test folder with QUnit.

Licence

jQuery.monthpicker is licensed under the terms of the MIT License.

About

Month picker jQuery plugin

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published