我有一个应用程序,我必须提交月度报告和季度报告。我使用bootstrap-datepicker作为月度报告,我想在我的应用程序中保持相同的标准,因此如果我避免使用选择框来显示宿舍会很棒。 这是您在月视图模式下提供的引导程序
这就是我想做的事情
选择后,将选择本季度的所有3个月。
我检查了bootstrap-datepicker.js
文件,我只看到了表生成代码:
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>';
在DPGlobal
变量中是模板:
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>'
感谢所有帮助
答案 0 :(得分:8)
你可以'发明'另一种语言:
$.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();
});
});
使用CSS:
.datepicker table tr td span {
width: 100%;
}
答案 1 :(得分:0)
React Datepikcer具有Quarter Picker
选项
https://reactdatepicker.com/
答案 2 :(得分:-1)
改进并解决了在输入中更改四分之一打字时的问题。
删除
.on("show", function(event) {
$(".month").each(function(index, element) {
if (index > 3) $(element).hide();
});
});
添加CSS
.datepicker-months table tbody tr td span:nth-child(1n + 5) {
background: red;
display: none;
}