一年中的日子融入了jquery ui日期选择器

时间:2016-09-02 16:48:51

标签: javascript jquery jquery-ui datepicker

基本上我想要做的是在一年中的每一天的日历中。

在我在文本字段中选择日期的示例中,您获得了一年中的某一天,我希望在您打开日历时每天在日历内显示该日期。

感谢您的帮助。

http://jsbin.com/taxesagaxe/edit?html,js,output

1 个答案:

答案 0 :(得分:2)

这是我能想到的最好的,因为jQuery的datepicker有一些奇怪的事件:

$("#datepicker").datepicker({
  onChangeMonthYear: function() {
    setTimeout(calcDOY, 1)
  }
}).click(function() {
  calcDOY()
})

function calcDOY() {
  $('table.ui-datepicker-calendar tbody td').each(function() {
    var month = $(this).data('month') + 1;
    var year = $(this).data('year');
    var day = +$(this).find('a').text();

    var now = new Date(month + '/' + day + '/' + year);
    var start = new Date(now.getFullYear(), 0, 0);
    var diff = now - start;
    var oneDay = 1000 * 60 * 60 * 24;
    var dayYear = Math.floor(diff / oneDay);
    $(this).find('a').html($(this).find('a').text() + '<br><span>(' + dayYear + ')</span>');
  })
}

<强> jsFiddle example