如何在 Bootstrap 日期选择器中获取下个月上个月而不是下一个上一个图标？答案

【问题标题】：How to get next month Previous month in Bootstrap date picker instead of next previous icon?如何在 Bootstrap 日期选择器中获取下个月上个月而不是下一个上一个图标？
【发布时间】：2019-12-31 07:23:23
【问题描述】：

我正在使用引导程序 datepicker 并且我想更改下个月和上个月的显示而不是箭头。我已经完成了一些功能，但无法正常工作...

$(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 月时，问题出现...

请帮助/建议我...

【问题讨论】：

标签： javascript html datetimepicker bootstrap-datepicker

【解决方案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>

【讨论】：

让我检查一下，请稍候。
关于更改需要修复正确的月份。我也在努力
顺便说一句你为什么这样做 $('.pickDate').find('table .next').html(monthNames[nextMonth]);
其实我需要显示下个月和上个月而不是下一个和上一个箭头
你说你不需要箭头。？那么问题出在哪里？

【解决方案2】：

$(document).ready(function() {
  var monthMinusOneName = moment().subtract(1, "month").startOf("month").format('MMMM');
  var monthPlusOneName = moment().add(1, "month").startOf("month").format('MMMM');
  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 monthMinusOneName = moment(e.date).subtract(1, "month").startOf("month").format('MMMM');
    var monthPlusOneName = moment(e.date).add(1, "month").startOf("month").format('MMMM');
    $('.pickDate').find('table .prev').html(monthMinusOneName);
    $('.pickDate').find('table .next').html(monthPlusOneName);
  });

  function onInit() {
    var monthMinusOneName = moment().subtract(1, "month").startOf("month").format('MMMM');
    var monthPlusOneName = moment().add(1, "month").startOf("month").format('MMMM');
    $('.pickDate').find('table .prev').html(monthMinusOneName);
    $('.pickDate').find('table .next').html(monthPlusOneName);
  }
  onInit()
})

<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.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>
<script src="https://momentjs.com/downloads/moment.min.js"></script>
<div id="datepicker" class="pickDate"></div>

注意：- 我已经为下个月和上个月的名称添加了时刻 js。

【讨论】：