Блог

Главная - Вопросы по программированию - Как я могу изменить размер следующей и предыдущей кнопки в jQuery Datepicker?

Как я могу изменить размер следующей и предыдущей кнопки в jQuery Datepicker?

#javascript #jquery #css #datepicker #calendar

#javascript #jquery #css #datepicker #Календарь

Вопрос:

В настоящее время я работаю над проектом календаря, в котором я могу переключаться между месяцами. Я хочу изменить стрелку, которая переключается между месяцами, с значения по умолчанию на другое.

Я пытался использовать content: url() функцию в CSS , но она не отображает ее слишком большой, и когда я попытался изменить ее "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@500amp;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. Пожалуйста, этот therichpost.com /…

Ответ №1:

если вы хотите изменить размер всего datepicker попробуйте это:

 .hasDatepicker {
    font-size: 2rem;
}

чтобы изменить предыдущий / следующий текст на какой-либо символ, посмотрите здесь: https://api.jqueryui.com/datepicker/#option-nextText

Обновить

codepen

в этом примере найдите размер фона и измените размер стрелки таким образом.

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

Комментарии:

1. Я хочу изменить размер только значков со стрелками

2. <выбрать> элементы не могут быть оформлены. вам нужно обернуть его в <div> и оформить div. вам также необходимо сделать элемент <select> по умолчанию невидимым.

Метки: