如何用不同的颜色为从星期六到星期五的日历的每一周上色

Question

我正在使用这个 Bootstrap Datepicker 并且从周六到周五，我设法在 select 到 select 整整一周都做了，但我也希望每周从周六到周五用不同的颜色涂色，但不知道该怎么做

甚至将鼠标悬停在星期六到星期五这一周的颜色上也可以做到这一点

// clear value of input
    $('#weeklyDatesPicker').on('focus', function(){
      $(this).val('');
    })


        moment.updateLocale('en', {
          week: { dow: 1 },
          useCurrent: false
        });

      //Initialize the datePicker
      $("#weeklyDatesPicker").datetimepicker({
          format: 'MM-DD-YYYY'
      });

       //Get the value of Start and End of Week
      $('#weeklyDatesPicker').on('dp.change', function (e) {
          var value = $("#weeklyDatesPicker").val();
          var firstDate = moment(value, "MM-DD-YYYY").day(-1).format("MM-DD-YYYY");
          var lastDate =  moment(value, "MM-DD-YYYY").day(5).format("MM-DD-YYYY");
          $("#weeklyDatesPicker").val(firstDate + " / " + lastDate);
      });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

              <div class="form-group col-md-12">
 
                <input class="form-control" type='text' id='weeklyDatesPicker' placeholder="" />
              </div>

Answer 1

使用 .datepicker tbody tr:nth-child(n) 选择器，n 来自 1-6 六行

// clear value of input
$('#weeklyDatesPicker').on('focus', function() {
  $(this).val('');
})


moment.updateLocale('en', {
  week: {
    dow: 1
  },
  useCurrent: false
});

//Initialize the datePicker
$("#weeklyDatesPicker").datetimepicker({
  format: 'MM-DD-YYYY'
});

//Get the value of Start and End of Week
$('#weeklyDatesPicker').on('dp.change', function(e) {
  var value = $("#weeklyDatesPicker").val();
  var firstDate = moment(value, "MM-DD-YYYY").day(-1).format("MM-DD-YYYY");
  var lastDate = moment(value, "MM-DD-YYYY").day(5).format("MM-DD-YYYY");
  $("#weeklyDatesPicker").val(firstDate + " / " + lastDate);
});

.datepicker tbody tr:nth-child(1) {
  background: orange;
}

.datepicker tbody tr:nth-child(2) {
  background: purple;
}

.datepicker tbody tr:nth-child(3) {
  background: teal;
}

.datepicker tbody tr:nth-child(4) {
  background: yellow;
}

.datepicker tbody tr:nth-child(5) {
  background: cyan;
}

.datepicker tbody tr:nth-child(6) {
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<div class="form-group col-md-12">

  <input class="form-control" type='text' id='weeklyDatesPicker' placeholder="" />
</div>

如何用不同的颜色为从星期六到星期五的日历的每一周上色

How to color each week of calendar from Sat to Fri in different colors

javascript

jquery

datetimepicker

twitter-bootstrap