Как показать названия следующего и предыдущего месяца в указателе даты вместо стрелок <,> - PullRequest
Новая
       5

Как показать названия следующего и предыдущего месяца в указателе даты вместо стрелок <,>

0 голосов
/ 07 мая 2018

Это мой код: https://codepen.io/bskousen/pen/osEJi

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

Я хочу показывать названия следующего и предыдущего месяца вместо <,>. Это возможно в Jquery DatePicker? Если это невозможно, то возможно ли это с помощью какого-либо другого средства выбора даты, например Bootstrap datepicker?

С любым плагином все в порядке, и я не очень жёстко использую Jquery datepicker.

Ответы [ 2 ]

0 голосов
/ 07 мая 2018

Я добавил navigationAsDateFormat, чтобы получить названия месяцев, которые являются встроенной функцией Datepicker (но эти имена могут появляться только во всплывающей подсказке), но после некоторой настройки вашего Codepen я могу отображать имена вместо икон.

JQuery 

$("#datepicker").datepicker({
    navigationAsDateFormat: true,
    nextText: 'MM',
    prevText: 'MM'
});

CSS 

.ui-icon {
    text-indent: 0;
    color: #000;
    width: 70px;
    background: 0 !important;
}

Пожалуйста, отметьте это Простой инструмент выбора даты jQuery (замените значки названиями месяцев)

0 голосов
/ 07 мая 2018

Обновленный ответ:

Как я уже сказал, я искал лучшее решение.
И я нашел в основном то же самое, что и Адель.

Но вы можете сделать больше модификаций стиля, чтобы получить что-то, где тексты помещаются правильно.
Вот фрагмент, с которым я закончил: 

$(function() {
  $('#datepicker').datepicker({
    navigationAsDateFormat: true,
    nextText: 'MM',
    prevText: 'MM'
  });
});
.container {
  width: 600px;
  padding: 20px;
  margin: auto;
  background: #ddd;
}


.ui-datepicker-prev, .ui-datepicker-next {
  width: 4em !important;
}

.ui-datepicker-title > span {
  font-size: .85em !important;
}

.ui-datepicker-prev > span, .ui-datepicker-next > span {
  text-indent: 0;
  margin: 0 !important;
  text-align: center;
  height: inherit !important;
  width: inherit !important;
  background: 0 !important;
  left: 0 !important;
  transform: translateY(-25%);
  font-size: .65em;
  font-weight: normal;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<link rel="stylesheet prefetch" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css">
<div class="container">
  <p>This is a datepicker example using jquery, jquery ui, and jquery css</p>
  <form>
    Date:
    <input id="datepicker">
  </form>
</div>

Надеюсь, это поможет.

Старый ответ

Мне неизвестен какой-либо простой способ изменить следующий и предыдущий значки на названия месяцев в датчике jQueryUI.

Но есть встроенная функция для отображения месяца во всплывающей подсказке вместо «предыдущий» и «следующий».
Вот оно: 

$(function() {
  $('#datepicker').datepicker({
    navigationAsDateFormat: true,
    nextText: 'MM',
    prevText: 'MM'
  });
});
.container {
  width: 600px;
  padding: 20px;
  margin: auto;
  background: #ddd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<link rel="stylesheet prefetch" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css">
<div class="container">
  <p>This is a datepicker example using jquery, jquery ui, and jquery css</p>
  <form>
    Date:
    <input id="datepicker">
  </form>
</div>

Я поищу лучшее решение.

В любом случае, надеюсь, это поможет.

...