Question

假设从JQuery的datepicker中选择了一个月（例如：2016年6月）。它显示 5月29日到7月2日。在这里我想将周数限制为4.所以我想将标题更改为5月29日至6月25日。因此，其他几个月也会如此。

HTML

<h4>
Fiscal Year
</h4>
<input type="text" id="mydatepicker" />

JQuery的

$(document).ready(function () {
    $("#mydatepicker").datepicker({
        showOtherMonths: true,
        selectOtherMonths: true
    });
})

Updated Fiddle here

Answer 1

我对你如何解决问题的第一个想法是：

$(function () {
  var defaultMonth = null;
  $("#mydatepicker").datepicker({
    showOtherMonths: true,
    monthNames: [ "Dec-29 To Jan-25",  "Jan-29 To Feb-25", "Feb-29 To Mar-25", "Mar-29 To Apr-25", "Apr-29 To May-25",
                 "May-29 To Jun-25", "Jun-29 To Jul-25", "Jul-29 To Aug-25", "Aug-29 To Sep-25",
                 "Sep-29 To Oct-25", "Oct-29 To Nov-25", "Nov-29 To Dec-25"],
    onChangeMonthYear: function(year, month, inst) {
      var newDate = new Date(year, month - 1, 29);
      $(this).datepicker('setDate', newDate);
    }
  });

  $("#mydatepicker").datepicker('widget').on('DOMNodeInserted', '.ui-datepicker-calendar', function(e) {
    // reduce the number of weeks to 4
    while ($(this).find('tr').length > 5) {
      $(this).find('tr:last').remove();
    }
  });
});

div.ui-datepicker {
  font-size: 12px;
  width: 20em;
}

.ui-datepicker-week-end, .ui-datepicker-week-end a.ui-state-default {
  color: red;
}
.ui-priority-secondary, .ui-widget-content .ui-priority-secondary, .ui-widget-header .ui-priority-secondary{
  font-weight:bold;
  opacity:1;
}

<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<h4>
    Fiscal Year
</h4>
<input type="text" id="mydatepicker" />

如果这份初稿能够开始帮助你，请告诉我....

Answer 2

我不知道你是否喜欢我的方式，但试图找到解决方案我的方法是直接编辑jquery.ui.js。并编辑了它。现在它被上传到我的私人服务器。如果这是您正在搜索的答案，那么我将尝试将其上传到git或任何公共服务器。下载链接jquery.ui.js。如果这是您正在寻找的，请提高投票。否则请评论我。谢谢〜Nr

再次检查。我已经更新了它的UI故障

如果您需要在单行中创建标题，请在您的代码中添加以下css

<style>
 #dtpTitle
 {
  font-size: small;

 }
</style>

Answer 3

简单的解决方案，用

隐藏最后一行

$(document).ready(function () {
   $("#mydatepicker").datepicker({
      showOtherMonths: true,
      selectOtherMonths: true
  });

  // add this below lines to get required output
  $("#mydatepicker").click(function(){
     $("table.ui-datepicker-calendar tr:last").hide();
  })

})

Answer 4

要达到预期效果，请使用以下选项

1.获取上个月和第一个日期

     $("#mydatepicker").datepicker('widget').on('DOMNodeInserted', '.ui-datepicker-calendar', function(event) {
   var currMonth = $('.ui-datepicker-title .ui-datepicker-month')[0].innerHTML;
    var currIndex = months.indexOf(currMonth);
    var lastDate = $('a.ui-state-default')[27].innerHTML;
    var year = $('.ui-datepicker-title .ui-datepicker-year')[0].innerHTML;
    var prev = months[currIndex - 1] + ' ' + $('.ui-datepicker-calendar .ui-state-default.ui-priority-secondary')[0].innerHTML;
    console.log(prev);
    $('.ui-datepicker-title').prepend('<span>' + prev + '-</span>');
    $('.ui-datepicker-year').html('<span>' + lastDate + ' ' + year + '</span>');

    $('.ui-datepicker-calendar tr:last').remove();

2.将其添加到标题并删除最后一行

  $('.ui-datepicker-title').prepend('<span>' + prev + '-</span>');
    $('.ui-datepicker-year').html('<span>' + lastDate + ' ' + year + '</span>');

    $('.ui-datepicker-calendar tr:last').remove();

Codepen - http://codepen.io/nagasai/pen/dXpmKm

有没有办法在顶部显示日历的月份名称？

4 个答案: