JQuery UI Datepicker - 为每个日期

时间:2015-12-30 07:42:46

标签: jquery jquery-ui jquery-ui-datepicker

我试图在内联Datepicker中为每个单元格添加包含日期的类。这是我的初始化代码:

    var currentTime = new Date();
    var maxDate =  new Date(currentTime.getFullYear(), currentTime.getMonth() +1, 0);

    $( "#calendar_wrapper1" ).datepicker({ 
        inline: true,
        changeMonth: false,
        minDate: "0",
        maxDate: maxDate,
        beforeShowDay: function(date) {
           return [true, "d_" + date.getYear() + '_' + (date.getMonth() + 1) + '_' + date.getDay()];
        }
    });

这将返回课程d_115_12_3 30分钟。 2015年,只有一个月似乎正确显示或我不明白这是什么格式。

制作了这个问题:https://jsfiddle.net/NorthSea/8xg1w842/

1 个答案:

答案 0 :(得分:1)

您只需要替换

发件人:

return [true, "d_" + date.getYear() + '_' + (date.getMonth() + 1) + '_' + date.getDay()];

return [true, "d_" + date.getFullYear() + '_' + (date.getMonth() + 1) + '_' + date.getDate()];

.getFullYear().getDate()

中了解相关信息

var currentTime = new Date();
var maxDate =  new Date(currentTime.getFullYear(), currentTime.getMonth() +1, 0);
$( "#calendar_wrapper1" ).datepicker({ 
  inline: true,
  changeMonth: false,
  minDate: "0",
  maxDate: maxDate,
  beforeShowDay: function(date) {
    return [true, "d_" + date.getFullYear() + '_' + (date.getMonth() + 1) + '_' + date.getDate()];
  }
});


var currentTime = new Date();
// First Date Of the month 
var startDateFrom = new Date(currentTime.getFullYear(),currentTime.getMonth() +1,1);
// Last Date Of the Month 
var startDateTo = new Date(currentTime.getFullYear(),currentTime.getMonth() +2,0);
$("#calendar_wrapper2").datepicker({
  changeMonth: false,
  inline: true,
  minDate: startDateFrom,
  maxDate: startDateTo,
  beforeShowDay: function(date) {
    return [true, "d_" + date.getFullYear() + '_' + (date.getMonth() + 1) + '_' + date.getDate()];
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.11.4/themes/black-tie/jquery-ui.css" rel="stylesheet" />
<h2>
  This month
</h2>
<div id="calendar_wrapper1">
</div>
<h2>
  Next month
</h2>
<div id="calendar_wrapper2"></div>