Question

这是我的代码：https://codepen.io/bskousen/pen/osEJi

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

我想显示下个月和上个月的名称而不是＆lt;，＆gt;。这在Jquery datepicker中是否可行？如果不可能，那么在Bootstrap datepicker中可以使用任何其他日期选择器吗？

任何插件都很好，我对使用Jquery datepicker不是很严格。

Answer 1

更新回答：

正如我所说，我一直在寻找更好的解决方案而且我发现与Adeel基本相同。

但是，您可以进行更多样式修改，以获得文本正确匹配的内容这是我最终得到的片段：

$(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 datepicker中将下一个和上一个图标更改为月份名称的任何简单方法。

但是，有一个内置功能可以在工具提示中显示月份而不是“上一个”和“下一个”。
这是：

$(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>

我会寻找更好的解决方案。

无论如何，我希望它有所帮助。

Answer 2

我已添加navigationAsDateFormat来获取月份名称，这是Datepicker的内置功能（但这些名称只能出现在工具提示中），但经过对Codepen I＆＃39;我能够显示名称而不是图标。

的jQuery

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

CSS

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

请检查此Simple jQuery date picker (replace icons with month names)

如何在datepicker中显示下一个和上个月的名称，而不仅仅是箭头＆lt;，＆gt;

2 个答案: