javascript - 如何在 Bootstrap 日期选择器中获取下个月上个月而不是下一个上一个图标?
问题描述
我正在使用引导日期选择器,我想更改下个月和上个月的显示而不是箭头。我已经完成了一些功能,但无法正常工作......
$(document).ready(function() {
var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
$('#datepicker').datepicker({
inline: true,
todayHighlight: true,
}).on('changeDate', function(e) {
$('#dt_due').val(e.format('dd/mm/yyyy'));
}).on('changeMonth', function(e) {
var prevMonth = new Date(e.date).getMonth()-1;
console.log(prevMonth);
prevMonth > 12 ? prevMonth = 0 : prevMonth;
var currMonth = new Date(e.date).getMonth();
console.log(currMonth);
$('.pickDate').find('table .prev').html(monthNames[prevMonth]);
var nextMonth = new Date(e.date).getMonth() + 1;
console.log(nextMonth);
nextMonth > 12 ? nextMonth = 0 : nextMonth;
$('.pickDate').find('table .next').html(monthNames[nextMonth]);
$('#dt_due').val(e.format('dd/mm/yyyy'));
});
function getInitMonths() {
var prevMonth = new Date().getMonth();
console.log(prevMonth);
var currMonth = new Date().getMonth() + 1;
console.log(currMonth);
console.log(monthNames[currMonth - 1])
$('.pickDate').find('table .prev').html(monthNames[currMonth - 2]);
var nextMonth = new Date().getMonth() + 2;
console.log(nextMonth);
nextMonth > 12 ? nextMonth = 0 : nextMonth;
$('.pickDate').find('table .next').html(monthNames[nextMonth]);
}
getInitMonths();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
<div id="datepicker" class="pickDate"></div>
我怎样才能做到这一点?
注意:- 当月份是 12 月、1 月时,会出现问题...
请帮助/建议我...
解决方案
您需要
getInitMonths()
在document.ready
.
这是运行没有错误的JSFiddle 。
$(document).ready(function() {
var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
$('#datepicker').datepicker({
inline: true,
todayHighlight: true,
}).on('changeDate', function(e) {
$('#dt_due').val(e.format('dd/mm/yyyy'));
}).on('changeMonth', function(e) {
var prevMonth = new Date(e.date).getMonth()-1;
console.log(prevMonth);
prevMonth > 12 ? prevMonth = 0 : prevMonth;
var currMonth = new Date(e.date).getMonth();
console.log(currMonth);
$('.pickDate').find('table .prev').html(monthNames[prevMonth]);
var nextMonth = new Date(e.date).getMonth() + 1;
console.log(nextMonth);
nextMonth > 12 ? nextMonth = 0 : nextMonth;
$('.pickDate').find('table .next').html(monthNames[nextMonth]);
$('#dt_due').val(e.format('dd/mm/yyyy'));
});
function getInitMonths() {
var prevMonth = new Date().getMonth();
console.log(prevMonth);
var currMonth = new Date().getMonth() + 1;
console.log(currMonth);
console.log(monthNames[currMonth - 1])
$('.pickDate').find('table .prev').html(monthNames[currMonth - 2]);
var nextMonth = new Date().getMonth() + 2;
console.log(nextMonth);
nextMonth > 12 ? nextMonth = 0 : nextMonth;
$('.pickDate').find('table .next').html(monthNames[nextMonth]);
}
getInitMonths();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
<div id="datepicker" class="pickDate"></div>
推荐阅读
- clojure - 无法在 emacs 中的 Cider 中启动 figwheel REPL
- sql - SQL 调节 - 导入数据
- prometheus - kubelet 在普罗米修斯目标中失败
- ruby-on-rails - 在 Rails 中使用与本地和远程相同的形式进行过滤
- laravel - Vuejs/laravel 图片上传接收空数组
- c# - 将方面应用于 .NET Core 2.0 中的多种类型
- sql - 将列添加到现有的红移表
- python - BeautifulSoup 在 HTML 中找不到元素类
- authentication - Zend Framework 中模块之间的身份验证
- office-js - 加载 Office 加载项 (Office Online Server) 自动加载