Highlight whole week: Bootstrap Datepicker (No jquery ui)

Question

I have this code, to highlight entire week if i click on dates

$(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);
    });
});

however, i would like to make it instead of "change" to auto detect current date and highlight the whole week. This is my latest code and it doesnt work

$(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
    }
});

Please guide me on this. Thanks :)

Answer 1

Add changeDate event listener with $('.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');
  }
})

example here