Date Picker - Quater, Year & Fiscal

HTML

<link rel="stylesheet" href="http://codeorigin.jquery.com/ui/1.10.3/themes/ui-lightness/jquery-ui.css">
<script src="http://codeorigin.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://knockoutjs.com/downloads/knockout-3.3.0.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2-bootstrap.css">
<div class="col-md-12">
   <div class="col-md-6"> 
       From:<br/>
      <select id="fromYear"></select>
   </div>
   <div class="col-md-6"> 
       To:<br/>
       <select id="toYear"></select>
   </div>
</div>

<div class="row">
   <div class="col-md-6">
       Quarter:<br/>
  <select id="quarteryear"></select>
   </div>
</div>
<div class="col-md-12">
   <div class="col-md-6"> 
       From:<br/>
      <select id="fromYear"></select>
   </div>
   <div class="col-md-6"> 
       To:<br/>
       <select id="toYear"></select>
   </div>
</div>

JavaScript

var aMetric = 
    {
        "id": 3,
        "name": "Emergency Department Average Length of Stay (minutes)",
        "title": "ED ALOS",
        "description": "The average length of stay in the ED for all patients regardless of disposition.",
        "minCalendarYear": 2007,
        "minCalendarQuarter": 4,
        "minCalendarMonth": 10,
        "maxCalendarYear": 2015,
        "maxCalendarQuarter": 1,
        "maxCalendarMonth": 3,
        "minCalendarDate": null,
        "maxCalendarDate": null,
        "minFiscalYear": 2008,
        "minFiscalQuarter": 1,
        "minFiscalMonth": 1,
        "maxFiscalYear": 2015,
        "maxFiscalQuarter": 2,
        "maxFiscalMonth": 6,
        "isDayAvailable": 0,
        "isBudget": 0,
        "isBenchmark": 0,
        "chartSelector": [
            "metric",
            "time"
        ],
        "chartData": [
            1,
            3,
            5,
            6,
            11,
            12,
            15,
            20
        ]
    };

//alert(aMetric.minCalendarYear);

//inline javascript
$(function()
{
  $('#fromYear').yearpicker(aMetric.minCalendarYear,aMetric.maxCalendarYear);
  $('#toYear').yearpicker(aMetric.minCalendarYear,aMetric.maxCalendarYear);
  $('#halfyear').halfyearpicker();
  $('#quarteryear').quarteryearpicker();
});

//picker.js  
$.fn.extend(
{
  yearpicker: function(min, max)
  {
    var select = $(this);
    var year = min;
    for (var i = min; i <= max; i++)
    {
      var option = $('<option/>');
      option.val(i).text(i);

      if (year == i)
      {
        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++)
      {
 ...