猿问

如何使用 Jquery 将颜色应用于 datetimepicker 中的周末以及下个月或上个月的日期

我有以下日期时间选择器代码,

该代码运行良好,但我还需要填充周末(周六和周日)以及下个月或上个月日期的颜色。


请帮忙做到这一点。下面是可运行的代码,请提供代码来执行此操作。


<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(function() {

  $('#datetimepicker1').datetimepicker(

    {

            format: 'DD/MM/YYYY HH:mm',

    }

);

});

</script>

<style>

body {

    font-family: Verdana, Arial, sans-serif;

    font-size: 12px;

}

</style>

</head>


<body>



<div class="container">

  <div class="row">

    <div class='col-sm-6'>

      <div class="form-group">

        <div class='input-group date' id='datetimepicker1'>

          <input type='text' class="form-control" />

          <span class="input-group-addon">

            <span class="glyphicon glyphicon-calendar"></span>

          </span>

        </div>

      </div>

    </div>

  </div>

</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>



</body>

</html>


喵喵时光机
浏览 104回答 1
1回答

白衣非少年

有一个类叫做.bootstrap-datetimepicker-widget .weekend. 像下面这样改变它。.bootstrap-datetimepicker-widget .weekend {&nbsp; color: red;&nbsp; /*Apply your color*/}<!DOCTYPE html><html><head>&nbsp; <title>Page Title</title>&nbsp; <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">&nbsp; <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">&nbsp; <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>&nbsp; <script>&nbsp; &nbsp; $(function() {&nbsp; &nbsp; &nbsp; $('#datetimepicker1').datetimepicker({&nbsp; &nbsp; &nbsp; &nbsp; format: 'DD/MM/YYYY HH:mm',&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; });&nbsp; </script>&nbsp; <style>&nbsp; &nbsp; body {&nbsp; &nbsp; &nbsp; font-family: Verdana, Arial, sans-serif;&nbsp; &nbsp; &nbsp; font-size: 12px;&nbsp; &nbsp; }&nbsp; </style></head><body>&nbsp; <div class="container">&nbsp; &nbsp; <div class="row">&nbsp; &nbsp; &nbsp; <div class='col-sm-6'>&nbsp; &nbsp; &nbsp; &nbsp; <div class="form-group">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class='input-group date' id='datetimepicker1'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type='text' class="form-control" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="input-group-addon">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="glyphicon glyphicon-calendar"></span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; </div>&nbsp; <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>&nbsp; <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>&nbsp; <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>&nbsp; <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script></body></html>
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答