16

I have an application where i have to submit monthly reports and quarterly reports. I am using the bootstrap-datepicker for the monthly report, and I want to keep the same standarts in my application therefore it would be great if I avoid using a select box to display quarters. This is what bootstrap offers when you are in month view mode

Month View Bootstrap Datepicker

And this is what I want to do

Quarterly View

When it's selected, all 3 months of the quarter will be selected.

I checked the bootstrap-datepicker.js file and i only saw the table generation code which 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 the DPGlobal variable were the 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 the help is appreciated

xhulio
  • 1,093
  • 1
  • 13
  • 32
  • 1
    Isn't it overkill to use this plugin to select quarters? After all a quarter is just a year number and quarter number. If it is about a localized display of month names for the quarters (in case Q1, Q2, Q3, Q4 isn't good enough), you could use moment.js, which you probably already use in combination with the date-range-picker... – Jos Sep 23 '15 at 10:18

3 Answers3

14

You could 'invent' another 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&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Feb&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Mar", "Apr&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;May&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Jun", "Jul&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Aug&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Sep", "Oct&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Nov&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Dec", "", "", "", "", "", "", "", ""],
  today: "Today",
  clear: "Clear",
  format: "mm/dd/yyyy",
  titleFormat: "MM yyyy",
  /* Leverages same syntax as '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/

K Scandrett
  • 16,390
  • 4
  • 40
  • 65
  • I ended up doing something similar, but your method is simpler. thanks for the answer :) – xhulio Oct 23 '16 at 12:18
  • To avoid messing with the global datepicker styles you can use the following style set inside your month loop: `element.style.width = '100%';` That way only your `#example1` datepicker would be affected by the CSS change. – lephleg Jul 26 '18 at 10:01
  • Moon day? Can't tell if this was intentional or not... seems an obvious typo but also Monday is named after the moon. – Christopher Lightfoot Mar 24 '21 at 09:32
  • I found the on show event handler a bit flaky; especially when typing -- used CSS instead since it works for all events -- there's a bug somewhere in datepicker that isn't firing the same events for keyboard input; I also switched around the months such that if the CSS fails to load you see Q1, Q1, Q1, Q2, Q2, Q2, Q3, Q3, Q3, Q4, Q4, Q4 so my months are in the normal order; I just hide them in between rather than hide them at the end: .datepicker-months table tbody tr td { span:nth-child(3n + 2), span:nth-child(3n + 3) { background: red; display: none; } } – Christopher Lightfoot Mar 24 '21 at 09:37
  • @ChristopherLightfoot Well spotted. I did it intentionally, initially, to verify this language was displaying, intending to correct it before posting, then forgot. Also I changed the short name to Moon :) – K Scandrett Mar 24 '21 at 10:20
0

React Datepikcer has Quarter Picker option https://reactdatepicker.com/

Laurence Chen
  • 1,738
  • 1
  • 13
  • 15
-1

a litte improvement and fix a issue when changing quarter typing in the input.

remove

.on("show", function(event) {
  $(".month").each(function(index, element) {
  if (index > 3) $(element).hide();
  });
 });

add css

 .datepicker-months table tbody tr td span:nth-child(1n + 5) {
 background: red;
 display: none;
 }
Fabio Paiva
  • 1