我需要根据 Figma 检查来设计日历样式，我试图做到这一点，但效果不佳：
$(function() {
$('input[name="daterange"]').daterangepicker({
opens: 'right',
locale: {
format: 'MMM D, YYYY',
applyLabel: 'Apliko', // Your "Apliko" button for apply
cancelLabel: 'Cancel',
daysOfWeek: ['MO', 'TU', 'WE', 'TH', 'FR', 'SA', 'SU'],
monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
firstDay: 1
},
startDate: moment().subtract(29, 'days'),
endDate: moment(),
});
}); .daterangepicker {
width: 752px;
height: 470px;
border-radius: 9px;
border: none;
background: #FFF;
box-shadow: 0px 16px 23.5px 0px rgba(0, 0, 0, 0.15);
}
.daterangepicker:before {
position: relative;
border-right: none;
border-left: none;
top: 0;
}
.daterangepicker .drp-calendar {
margin: 20px;
width: 372px;
}
table>thead>tr:nth-child(1) {
position: relative;
width: 372px;
}
table>thead>tr:nth-child(1)::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1px;
background-color: #BDBDBD;
}
.daterangepicker .calendar-table .prev span {
/* background-image: url("/assets/images/chevron-left.png"); */
border: solid #828282;
border-width: 0 2px 2px 0;
/* width: 21px;
height: 21px */
}
.daterangepicker .calendar-table .month{
color: #828282;
text-align: center;
font-size: 17px;
font-style: normal;
font-weight: 600;
line-height: normal;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.js"></script>
</head>
<body>
<div class="container mt-5">
<input type="text" name="daterange" class="form-control" placeholder="Start Date - End Date" id="datefilter">
</div>
</body>
</html>