如何在 JQuery Datepicker 中调整下一个和上一个按钮的大小？
Posted
技术标签:
【中文标题】如何在 JQuery Datepicker 中调整下一个和上一个按钮的大小？【英文标题】：How can i resize the next and previous button in JQuery Datepicker? 【发布时间】：2021-03-12 14:20:21 【问题描述】：目前，我正在开展一个日历项目，我可以在其中切换月份。 我想更改在月份之间切换的箭头，从默认月份切换到另一个月份。
我尝试在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"
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>【问题讨论】：
请这个therichpost.com/… 【参考方案1】：如果你想调整整个日期选择器的大小，试试这个：
.hasDatepicker
font-size: 2rem;
要将上一个/下一个文本更改为某个符号，请看这里：https://api.jqueryui.com/datepicker/#option-nextText
更新
codepen
在此示例中，查找背景大小并以这种方式更改箭头大小。
.o-select-wrap:after
background-size: 20px;
【讨论】：
我只想调整箭头图标的大小以上是关于如何在 JQuery Datepicker 中调整下一个和上一个按钮的大小？的主要内容，如果未能解决你的问题，请参考以下文章
如何设置jquery的datepicker，让它进入页面就自动显示在页面的某个位置，而不是点击了才显示
如何在 JQuery Datepicker 中禁用以前的日期