如何在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月时出现问题...

请帮助/建议我...

帕斯拉瓦尔

$(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>

注意:-我为下个月和上个月的名称添加了moment js。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在单击按钮时从微调器中获取下一个/上一个项目?

如何在号码选择器中隐藏上一个和下一个号码?

当我单击“下一个/上一个”按钮时,如何在jQuery UI日期选择器中制作月份变化的动画

如何在日期选择器中显示下一个和上一个月的名称,而不仅仅是箭头<,>

Momentjs如何获得下个月的上一个日期

如何在MySQL中获取下一个/上一个双重记录?

如何更改日期选择器的下一个和上一个箭头周围的颜色?

如何在C#中获取下一个特定日期的日期

Access/SQL:如何在 Access 查询中获取下一个最近的日期?

从当前日期获取记录到下个月(直到下个月的最后一个日期)mysql

使用Bootstsrap Jquery在日期选择器中将下一个和上一个月替换为下一个和前一天

fullcalendar:如何获取相关观看月份的第一天和最后一天(而不是上一个\下个月的日子)

日期范围选择器不显示下一个箭头,但显示上一个箭头

如何从angular2中的wordpress获取下一个和上一个帖子

js如何在href中选择部分选择器来制作上一个和下一个按钮?

如何从 DayOfWeek 列表中获取下一个日期?

单击Android中的按钮时如何获取下一个日期?

Impala查询以获取下一个日期

Swift-获取下一个日期

如何根据当前日期变量获取当前和下个月的第一个日历日

根据视图获取下一个和上一个MySQL ID

获取下一个和上一个对象的JSON

使用JavaScript获取下一个/上一个元素?

获取下一个和上一个CakePHP 2的Paginator的URL

学说-获取下一个和上一个记录

jQuery .next()不使用选择器拾取下一个元素

如何从日期变量中查找下一个和上一个日期

如何在Angular 2中获取下一个元素/兄弟姐妹

如何在Gradle中获取下一个内部版本号