jQuery UI MonthPicker Patch

A working branch for the Month Picker.

HTML

<link rel="stylesheet" href="http://code.jquery.com/qunit/qunit-1.11.0.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script src="http://code.jquery.com/qunit/qunit-1.11.0.js"></script>

<div class="btn-group">
<!-- <button class="btn btn-default " data-key="view" data-value="month"  value="Month" id="new1">Monthly</button>
<button class='btn btn-default' data-key='view' data-value='week' value='Week' id='new1'>Weekly</button> -->
</div>

CSS

.filters .buttons .btn, .filters-responsive .buttons .btn, .more-filters-box .buttons .btn {
    border: 2px solid #4d4d4d;
    border-left-width: 0;
    border-right-width: 0;
    background: transparent;
    color: #fff;
    padding: 3px 10px;
    line-height: 21px;
    box-shadow: none;
}
.btn {
     
     display: inline-block;
    padding: 6px 25px; 
    margin-bottom: 0;
    font-size: 14px; 
     font-weight: normal; 
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}

JavaScript

for(i=0;i<2;i++){
var attachVal = "<button class='btn btn-default' style = 'border-color:black' data-key='view' data-value='week' value="+i+" id='new1'>"+i+"</button>";
$('.btn-group').append(attachVal);
}
$('.btn').click(function() {
    alert($(this).attr("value"));
});