Question

我正在寻找一个jquery插件来选择

年份（没有月份和日期）[我几乎可以使用常规下拉菜单]
半年 - 上半场和下半场（半年）例如。 Jan-Jun，2010; 2010年7月至12月
一年一季 - 第一季度，第二季度，第三季度，第四季度。 2010年1月至3月; 2010年4月至6月等。

是否有任何此类插件或如何编辑常规jQuery日期选择器来实现此目的？

Answer 1

是的，我认为使用精选框是一个不错的选择，因为我喜欢简单的解决方案。

然后你可以看到一个像这样的html文件：

的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';
      }
    }
  }
});

jQuery年，半年和季度选择器

1 个答案: