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
And this is what I want to do
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">«</th>'+
'<th colspan="5" class="datepicker-switch"></th>'+
'<th class="next">»</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
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
And this is what I want to do
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">«</th>'+
'<th colspan="5" class="datepicker-switch"></th>'+
'<th class="next">»</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
Share Improve this question asked Jul 13, 2015 at 12:41 xhulioxhulio 1,1032 gold badges13 silver badges32 bronze badges 1- 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 Commented Sep 23, 2015 at 10:18
3 Answers
Reset to default 14You 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 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 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/
React Datepikcer has Quarter Picker option
https://reactdatepicker.com/
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;
}