How can i resize the next and previous button in JQuery Datepicker?
Question
Currently, I am working on a Calendar project where I can switch between months. I want to change the Arrow which switches between months from the default one to another one.
I tried to use the content: url() function in CSS , but it doesn't display it too big and when I tried to resize it with "height: 20px; width: 20px;" it slightly changed its size.
My primary question is how could I resize it?
Also, I would like to hear other, more effective solutions about how I could display icons at the month's switchers.
.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>
1 answers
solution1
1 ACCPTED 2020-11-30 18:00:49
if you want to resize the whole datepicker try this:
.hasDatepicker {
font-size: 2rem;
}
to change prev/next text to some symbol look here: https://api.jqueryui.com/datepicker/#option-nextText
update
in this example look for background-size and change the arrow size that way.
.o-select-wrap:after {
background-size: 20px;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.