亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何使用 Jquery 將顏色應用于 datetimepicker 中的周末以及下個月或上個月的日期

如何使用 Jquery 將顏色應用于 datetimepicker 中的周末以及下個月或上個月的日期

喵喵時光機 2023-10-14 15:42:39
我有以下日期時間選擇器代碼,該代碼運行良好,但我還需要填充周末(周六和周日)以及下個月或上個月日期的顏色。請幫忙做到這一點。下面是可運行的代碼,請提供代碼來執行此操作。<!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>
查看完整描述

1 回答

?
白衣非少年

TA貢獻1155條經驗 獲得超0個贊

有一個類叫做.bootstrap-datetimepicker-widget .weekend. 像下面這樣改變它。


.bootstrap-datetimepicker-widget .weekend {

  color: red;

  /*Apply your color*/

}

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


查看完整回答
反對 回復 2023-10-14
  • 1 回答
  • 0 關注
  • 137 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號