Как раскрасить каждую неделю календаря от сб до пт в разные цвета - PullRequest
Новая
       9

Как раскрасить каждую неделю календаря от сб до пт в разные цвета

1 голос
/ 12 марта 2020

Я использую это Bootstrap Datepicker , и мне удается сделать выбор, чтобы выбрать целую неделю с субботы по пятницу, но я также ищу цвета каждую неделю с субботы по пятницу разными цветами, но не имею идея, как это сделать

или даже при наведении, чтобы раскрасить неделю с субботы по пятницу, сделает работу 

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

1 Ответ

1 голос
/ 12 марта 2020

Используйте селектор .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>
...