javascript - how to change bootstrap datepicker month view to display quarters -

i have application have submit monthly reports , quarterly reports. using bootstrap-datepicker monthly report, , want keep same standarts in application therefore great if avoid using select box display quarters. bootstrap offers when in month view mode

and want do

when it's selected, 3 months of quarter selected.

i checked bootstrap-datepicker.js file , saw table generation code was:

dpglobal.template = '<div class="datepicker">'+                         '<div class="datepicker-days">'+                             '<table class=" table-condensed">'+                                 dpglobal.headtemplate+                                 '<tbody></tbody>'+                                 dpglobal.foottemplate+                             '</table>'+                         '</div>'+                         '<div class="datepicker-months">'+                             '<table class="table-condensed">'+                                 dpglobal.headtemplate+                                 dpglobal.conttemplate+                                 dpglobal.foottemplate+                             '</table>'+                         '</div>'+                         '<div class="datepicker-years">'+                             '<table class="table-condensed">'+                                 dpglobal.headtemplate+                                 dpglobal.conttemplate+                                 dpglobal.foottemplate+                             '</table>'+                         '</div>'+                     '</div>'; 

and in dpglobal variable templates:

headtemplate: '<thead>'+                         '<tr>'+                             '<th class="prev">&#171;</th>'+                             '<th colspan="5" class="datepicker-switch"></th>'+                             '<th class="next">&#187;</th>'+                         '</tr>'+                     '</thead>',     conttemplate: '<tbody><tr><td colspan="9"></td></tr></tbody>',     foottemplate: '<tfoot>'+                         '<tr>'+                             '<th colspan="7" class="today"></th>'+                         '</tr>'+                         '<tr>'+                             '<th colspan="7" class="clear"></th>'+                         '</tr>'+                     '</tfoot>' 

all appreciated

you 'invent' language:

$.fn.datepicker.dates['qtrs'] = {   days: ["sunday", "moonday", "tuesday", "wednesday", "thursday", "friday", "saturday"],   daysshort: ["sun", "moon", "tue", "wed", "thu", "fri", "sat"],   daysmin: ["su", "mo", "tu", "we", "th", "fr", "sa"],   months: ["q1", "q2", "q3", "q4", "", "", "", "", "", "", "", ""],   monthsshort: ["jan      feb      mar", "apr      may      jun", "jul      aug      sep", "oct      nov      dec", "", "", "", "", "", "", "", ""],   today: "today",   clear: "clear",   format: "mm/dd/yyyy",   titleformat: "mm yyyy",   /* leverages same syntax 'format' */   weekstart: 0 };  $('#example1').datepicker({   format: "mm yyyy",   minviewmode: 1,   autoclose: true,   language: "qtrs",   forceparse: false }).on("show", function(event) {    $(".month").each(function(index, element) {     if (index > 3) $(element).hide();   });  }); 

with css:

.datepicker table tr td span {   width: 100%; } 

example: http://jsfiddle.net/4mwk0d5l/1/