Fiscal Year widget

This widget will act as a selector/indicator for fiscal year editing.

by Shawn Wood

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="container">
<div class="row">
    <div class="col">
      <div class="form-group form-group-sm">
      <label class="control-label">Fiscal Year Change Starts: </label>
      <div id="fiscalYearBtns" class="input-group col-xs-12 btn-group btn-group-sm" data-toggle="buttons">
      </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col">
      <div class="form-group form-group-sm">
      <label class="control-label">Selected Fiscal Year: </label>
      <div id="fiscalYearSelection" class="input-group col-xs-12 " >
      <input type="text" id="selectedYear" name="actionType" value="1" checked="checked"/>
      <span class="input-group-text">Index:  <span class="badge badge-primary" id="indexText">0</span></span>
      </div>
      </div>
    </div>
  </div>
</div>

CSS

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

[data-toggle="buttons"] input[type="radio"]:empty,
[data-toggle="buttons"] input[type="checkbox"]:empty {
    display: none;
}

.tracker {
    padding:0 14px;
    position: relative;
    width: 50px;
}

.tracker.hasChange::before {
    content:'CHANGES';
    font-size: 8px;
    text-align: center;
    color:#FFF;
    background-color: green;
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
    position: absolute;
    width: 50px;
    top: -13px;
    left: -1px;
}

[data-toggle="buttons"] .notActive {
    color: #0E141B;
    background-color: #fff;
}

.btn-primary.active.notActive,
.btn-primary:not(.notActive) {
    background-image: -webkit-linear-gradient(top, #337ab7 0%, #265a88 100%);
    background-image: -o-linear-gradient(top, #337ab7 0%, #265a88 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#265a88));
    background-image: linear-gradient(to bottom, #337ab7 0%, #265a88 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff265a88', GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
    background-repeat: repeat-x;
    border-color: #245580;
    color: #FFF;
}


.btn-primary:hover,
.btn-primary:focus {
    background-color: #265a88;
    background-position: 0 -15px;
}

.btn-primary:active,
.btn-primary.active {
    background-color: #265a88;
    border-color: #245580;
}

.btn-primary.disabled,
.btn-primary[disabled],
fieldset[disabled] .btn-primary,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled.focus,
.btn-primary[disabled].focus,
fieldset[disabled]...

JavaScript

var getFiscalYearSelector = function(target,dataSrc){
	if (typeof target === 'undefined' || target === null) {
        target = '#fiscalYearBtns';
  }
  if (typeof dataSrc === 'undefined' || dataSrc === null) {
        dataSrc = {"years":[{"year": 2018, "selected": true, "changed": true},{"year": 2019, "selected": false, "changed": false},{"year": 2020, "selected": false, "changed": false},{"year": 2021, "selected": false, "changed": true},{"year": 2022, "selected": false, "changed": false},{"year": 2023, "selected": false, "changed": false},{"year": 2024, "selected": false, "changed": false},{"year": 2025, "selected": false, "changed": false},{"year": 2026, "selected": false, "changed": false},{"year": 2027, "selected": false, "changed": false}]};
    }
    var btnString = '',
        btnClass = '',
        isSelected = '',
        hasChange = '',
        indexArray = [];
    for(y = 0; y < dataSrc.years.length; y++){
    	indexArray.push(dataSrc.years[y].year);
      if (dataSrc.years[y].selected){
      	btnClass = 'active';
        isSelected = 'checked="checked"';
        $('#selectedYear').val(dataSrc.years[y].year);
      } else {
      	btnClass = '';
        isSelected = '';
      }
      if (dataSrc.years[y].changed){
      	hasChange = 'hasChange';
      } else {
      	hasChange = '';
      }
      btnString += '<label id="FY' + dataSrc.years[y].year + 'Btn" class="tracker btn btn-primary notActive ' + btnClass + ' ' + hasChange + '" for="FY' + dataSrc.years[y].year + '">' + dataSrc.years[y].year + '<input type="radio" id="FY1" name="year" value="' + dataSrc.years[y].year + '" ' + hasChange + '/></label>';
      
    }
    $(target).empty();
    $(target).append(btnString);  
    $(target + ' input[type="radio"]').off('change');
    $(target + ' input[type="radio"]').on('change', function(event){
    	var thisValue = $(this).val();
      var targetObject = $(target);
      var thisBtn = $(this).parent().attr('id');
     ...