突出整周:Bootstrap Datepicker(No jquery ui)

时间:2017-01-27 01:29:21

标签: javascript jquery html datepicker

如果我点击日期

,我有这段代码,以突出整周
$(function () {   
    var $weekPicker = $("#calendar");
    $weekPicker.datepicker({
        calendarWeeks: true,
        maxViewMode: 0,
        weekStart: 1
    }).on('changeDate', function (e) {
        if ($weekPicker.data('updating') === true) {
            return;
        }
        $weekPicker.data('updating', true);

        var monday = moment(e.date).isoWeekday(1).startOf('week');

        var weekDates = [
            monday.clone().add().toDate(),
            monday.clone().add(1, "days").toDate(),
            monday.clone().add(2, "days").toDate(),
            monday.clone().add(3, "days").toDate(),
            monday.clone().add(4, "days").toDate(),
            monday.clone().add(5, "days").toDate(),
            monday.clone().add(6, "days").toDate()
        ];

        $(this).datepicker('clearDate').datepicker('setDates', weekDates);
        $weekPicker.data('updating', false);
    });
});

然而,我想做的不是"改变"自动检测当前日期并突出显示整周。这是我的最新代码,它不起作用

$(function () { 
    //i need this for.. reasons
    var selectedDate = calendar.datepicker('setDate', new Date()); 
    //this is for calculation
    var selectedDate2 = calendar.datepicker('getUTCDate');   
    if (selectedDate2&&selectedDate) {
        var dateList = getDateList(selectedDate2);
        getDatePeriodList(selectedDate2);
        displayDates(dateList);
        $("#addp").css("display", "block");
        $("#info").css("display", "none");

        //include code above so will highlight whole current week
    }
});

请指导我。谢谢:))

1 个答案:

答案 0 :(得分:1)

使用changeDate添加$('.day.active').closest('tr').find('.day').addClass('active');事件监听器。

<div id="sandbox-container">
  <div id="datepicker"></div>
  <input type="hidden" id="my_hidden_input">
</div>

$(function() {
  var date = new Date();
  var today = new Date(date.getFullYear(), date.getMonth(), date.getDate());

  $('#datepicker').datepicker({
    todayHighlight: true
  });
  $('#datepicker').datepicker('setDate', today);
  activeWeek();
  $('#datepicker').on('changeDate', function() {
    $('#my_hidden_input').val($('#datepicker').datepicker('getFormattedDate'));
    activeWeek();
  });

  function activeWeek() {
    $('.day.active').closest('tr').find('.day').addClass('active');
  }
})

示例here