如何更改 bootstrap datepicker 月视图以显示季度 [英] how to change bootstrap datepicker month view to display quarters
问题描述
我有一个申请，我必须提交月度报告和季度报告.我正在为月度报告使用 bootstrap-datepicker，并且我想在我的应用程序中保持相同的标准，因此如果我避免使用选择框来显示季度会很棒.这是当您处于月视图模式时引导程序提供的内容
这就是我想做的
当它被选中时，该季度的所有 3 个月都将被选中.
我检查了 bootstrap-datepicker.js 文件，我只看到了表格生成代码:
DPGlobal.template = ''+'<div class="datepicker-days">'+'<table class="table-condensed">'+DPGlobal.headTemplate+'<tbody></tbody>'+DPGlobal.footTemplate+'</表>'+'</div>'+'<div class="datepicker-months">'+''+DPGlobal.headTemplate+DPGlobal.contTemplate+DPGlobal.footTemplate+'</表>'+'</div>'+'<div class="datepicker-years">'+''+DPGlobal.headTemplate+DPGlobal.contTemplate+DPGlobal.footTemplate+'</表>'+'</div>'+'</div>';在 DPGlobal 变量中是模板:
headTemplate: ''+''+'<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>',脚模板:'<tfoot>'+' '+'<th colspan="7" class="today"></th>'+'</tr>'+' '+'<th colspan="7" class="clear"></th>'+'</tr>'+'</tfoot>'感谢所有帮助
解决方案 你可以发明"另一种语言:
$.fn.datepicker.dates['qtrs'] = {天数:[星期日"，星期一"，星期二"，星期三"，星期四"，星期五"，星期六"]，daysShort: ["Sun", "Moon", "Tue", "Wed", "Thu", "Fri", "Sat"],daysMin: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],月份:["Q1", "Q2", "Q3", "Q4", "", "", "", "", "", "", "", ""],月短:["Jan Feb 三月"、四月 五月 Jun", "Jul Aug Sep"、Oct Nov Dec", "", "", "", "", "", "", "", ""],今天:今天"，清除:清除"，格式:mm/dd/yyyy"，titleFormat: "MM yyyy",/* 利用与格式"相同的语法 */周开始:0};$('#example1').datepicker({格式:"MM yyyy",最小视图模式:1，自动关闭:真，语言:qtrs"，forceParse:假}).on("show", function(event) {$(".month").each(function(index, element) {if (index > 3) $(element).hide();});});
使用 CSS:
.datepicker table tr td span {宽度:100%；}
示例:http://jsfiddle.net/4mwk0d5L/1/
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
解决方案 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 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/
这篇关于如何更改 bootstrap datepicker 月视图以显示季度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
登录
关闭
扫码关注1秒登录
发送“验证码”获取
|
15天全站免登陆