时间戳

首页 > 解决方案 > How to color each week of calendar from Sat to Fri in different colors

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

问题描述

Im using this Bootstrap Datepicker and I manage to do on select to select whole week from Sat to Fri but also im looking to color each week from Sat to Fri in different colors, but have no idea how to do it

or even on hover to color the week from Sat to Fri will do the job

// 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>

标签： javascriptjquerytwitter-bootstrapdatetimepicker

解决方案

使用.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>

推荐阅读