如何更改引导日期选择器月视图以显示季度
Posted
技术标签:
【中文标题】如何更改引导日期选择器月视图以显示季度【英文标题】：how to change bootstrap datepicker month view to display quarters 【发布时间】：2015-10-01 17:45:33 【问题描述】：我有一个申请，我必须提交月度报告和季度报告。我正在为月度报告使用 bootstrap-datepicker，并且我想在我的应用程序中保持相同的标准，因此如果我避免使用选择框来显示季度，那就太好了。 当您处于月视图模式时，这就是 bootstrap 提供的功能
这就是我想做的事
选中后，将选中该季度的所有 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>'
感谢所有帮助
【问题讨论】：
用这个插件选宿舍是不是有点矫枉过正？毕竟一个季度只是一个年份数字和季度数字。如果是关于季度月份名称的本地化显示（以防 Q1、Q2、Q3、Q4 不够好），您可以使用 moment.js，您可能已经将它与 date-range- 结合使用选择器... 【参考方案1】：你可以“发明”另一种语言：
$.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%;
示例：http://jsfiddle.net/4mwk0d5L/1/
【讨论】：
我最终做了类似的事情，但你的方法更简单。谢谢你的回答:) 为避免与全局日期选择器样式混淆，您可以在月份循环中使用以下样式集：element.style.width = '100%'; 这样只有您的 #example1 日期选择器会受到 CSS 更改的影响。
月日？不知道这是不是故意的......似乎是一个明显的错字，但星期一也是以月亮命名的。
我发现 on show 事件处理程序有点不稳定；尤其是在打字时——改用 CSS，因为它适用于所有事件——日期选择器中的某个地方存在一个错误，它不会为键盘输入触发相同的事件；我还切换了月份，如果 CSS 加载失败，您会看到 Q1、Q1、Q1、Q2、Q2、Q2、Q3、Q3、Q3、Q4、Q4、Q4，所以我的月份处于正常顺序；我只是将它们隐藏在它们之间而不是在最后隐藏它们： .datepicker-months table tbody tr td span:nth-child(3n + 2), span:nth-child(3n + 3) background: red;显示：无；
@ChristopherLightfoot 很好发现。最初，我是故意这样做的，以验证该语言是否正在显示，打算在发布之前对其进行更正，然后忘记了。我还把简称改成了 Moon :)【参考方案2】：
React Datepikcer 有 Quarter Picker 选项
https://reactdatepicker.com/
【讨论】：
【参考方案3】：小幅改进并修复了在输入中更改季度输入时出现的问题。
删除
.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;
【讨论】：
以上是关于如何更改引导日期选择器月视图以显示季度的主要内容，如果未能解决你的问题，请参考以下文章