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

Question

假设从 JQuery 的日期选择器中选择了一个月(例如:6 月 -2016 年)。它显示 5 月 29 日到 7 月 2 日。这里我想将周数限制为 4。所以我想将标题更改为 May-29 To Jun-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" />

请告诉我初稿是否可以帮助您......