如何调整 JQuery Datepicker 中的下一个和上一个按钮的大小？

Question

目前，我正在做一个 Calendar 项目，我可以在其中切换月份。 我想更改 在月份之间切换的箭头，从默认的一个到另一个。

我尝试在 CSS 中使用 content: url() 函数，但它没有显示太大，当我尝试使用 "height: 20px; width: 20px;" 调整它的大小时，它的大小略有改变.

我的主要问题是如何调整它的大小？

此外，我还想听听其他更有效的解决方案，了解如何在当月的切换台上显示图标。

.ui-datepicker-prev span,
.ui-datepicker-next span {
  background-image: none !important;
}

.ui-datepicker-prev:before,
.ui-datepicker-next:before {
  font-family: FontAwesome;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  font-weight: normal;
  align-items: center;
  justify-content: center;
}




.ui-datepicker-prev:before {
  content:  url("prev1.png");
}

.ui-datepicker-next:before {
  content: "Next";
}

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<link rel="stylesheet" href="./style.css" />
<script src="app.js"></script>
</head>


<body>

  <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap" rel="stylesheet">

  <div class="embed-calendar-header">
    <h2 class="embed-calendar-heading">Book online</h2>
    <div class="embed-calendar-live-ava">
    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" 
    viewBox="0 0 14 14" width="14" height="14"
     id="icon-check" class="icon-check"
     ng-svg="icon-check">
     
      <path d="M0,8.59l1.5-2,4,3.67L11.87,0,14,1.28,6,14Z"></path>
    </svg> Real-time availability
    </div>
    </div>



    <div class=" col-md-4">
      <div  class="date-picker-2" placeholder="Recipient's username" id="ttry" aria-describedby="basic-addon2"></div>
      <span class="" id="example-popover-2"></span> </div>
    <div id="example-popover-2-content" class="hidden"> </div>
    <div id="example-popover-2-title" class="hidden"> </div>



    
<script>

$('.date-picker-2').popover({
    html : true, 
    
    content: function() {
      return $("#example-popover-2-content").html();
    },
    title: function() {
      return $("#example-popover-2-title").html();
    }

});

$(".date-picker-2").datepicker({
 minDate: new Date(),
 changeMonth: true,
 changeYear: true,
    onSelect: function(dateText) { 
        $('#example-popover-2-title').html('<b>Available Appointments</b>');
        var html = '<button  class="btn btn-success">8:00 am – 9:00 am</button><br><button  class="btn btn-success">10:00 am – 12:00 pm</button><br><button  class="btn btn-success">12:00 pm – 2:00 pm</button>';
        $('#example-popover-2-content').html('Available times <strong>'+dateText+'</strong><br>'+html);
        $('.date-picker-2').popover('show');
    }
});


/* */
$(function() {
  $("#datepicker").datepicker();
});


</script> 
</body>
</html>

Answer 1

如果你想调整整个日期选择器的大小试试这个：

.hasDatepicker {
    font-size: 2rem;
}

要将 prev/next 文本更改为某个符号，请看这里：https://api.jqueryui.com/datepicker/#option-nextText

更新

codepen

在此示例中查找背景大小并以此方式更改箭头大小。

.o-select-wrap:after {
  background-size: 20px;
}

如何调整 JQuery Datepicker 中的下一个和上一个按钮的大小？

How can i resize the next and previous button in JQuery Datepicker?

javascript

css

jquery

calendar

datepicker