Home/ Questions/Q 8204561
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T07:56:10+00:00

I’m looking for a jquery Plugin to pick Year (no Months and dates) [I

  • 0

I’m looking for a jquery Plugin to pick

  1. Year (no Months and dates) [I can pretty much use a regular drop down for this]
  2. Half a Year – 1st Half and 2nd half (Half yearly) Eg. Jan -Jun, 2010; Jul to Dec, 2010
  3. Quarter a Year – 1st Quarter, 2nd Quarter, 3rd Quarter, 4th Quarter Eg. Jan-Mar, 2010; Apr-Jun, 2010 etc.

Is there any such plugin or how do I edit the regular jQuery date-picker to achieve this?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Yeah, using select boxes is a good choice, I think, just because I like simple solutions.

    Then you can have a html file looking like this:

    index.html:

    <!doctype html>
<html>
  <head>     
    <script type="text/javascript"
      src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js">
    </script>
    <script src="picker.js"></script>
    <script>
      $(function()
      {
        $('#year').yearpicker();
        $('#halfyear').halfyearpicker();
        $('#quarteryear').quarteryearpicker();
      });
    </script>
  </head>
  <body>
    <p>
      year:<br>
      <select id="year"></select>
    </p>
    <p>
      halfyear:<br>
      <select id="halfyear"></select>
    </p>
    <p>
      quarteryear:<br>
      <select id="quarteryear"></select>
    </p>
    </body>
</html>

    picker.js:

    $.fn.extend(
{
  yearpicker: function()
  {
    var select = $(this);

    var year = new Date().getFullYear();
    for (var i = -10; i < 11; i++)
    {
      var option = $('<option/>');
      var year_to_add = year + i;

      option.val(year_to_add).text(year_to_add);

      if (year == year_to_add)
      {
        option
          .css('font-weight', 'bold')
          .attr('selected', 'selected');
      }

      select.append(option);
    }
  },
  halfyearpicker: function()
  {
    var select = $(this);

    var date = new Date();
    var year = date.getFullYear();
    var half = Math.floor(date.getMonth() / 6);

    for (var i = -10; i < 11; i++)
    {
      var year_to_add = year + i;

      for (var j = 0; j < 2; j++)
      {
        var option = $('<option/>');
        var half_text = j == 0 ? 'Jan-Jun' : 'Jul-Dec';
        var value = year_to_add + '-' + (j + 1);
        var text = year_to_add + ' ' + half_text;

        option.val(value).text(text);

        if (year_to_add == year && half == j)
        {
          option
            .css('font-weight', 'bold')
            .attr('selected', 'selected');
        }

        select.append(option);
      }
    }
  },
  quarteryearpicker: function()
  {
    var select = $(this);

    var date = new Date();
    var year = date.getFullYear();
    var quarter = Math.floor(date.getMonth() / 3);

    for (var i = -10; i < 11; i++)
    {
      var year_to_add = year + i;

      for (var j = 0; j < 4; j++)
      {
        var option = $('<option/>');
        var quarter_text = get_quarter_text(j);

        var value = year_to_add + '-' + (j + 1);
        var text = year_to_add + ' ' + quarter_text;

        option.val(value).text(text);

        if (year_to_add == year && quarter == j)
        {
          option
            .css('font-weight', 'bold')
            .attr('selected', 'selected');
        }

        select.append(option);
      }
    }

    function get_quarter_text(num)
    {
      switch(num)
      {
        case 0:
          return 'Jan-Mar';
        case 1:
          return 'Apr-Jun';
        case 2:
          return 'Jul-Sep';
        case 3:
          return 'Oct-Dec';
      }
    }
  }
});
    • 0