如何在日期选择器中显示下个月和上个月的名称，而不仅仅是箭头 <,>

Posted 2023-05-08

【中文标题】如何在日期选择器中显示下个月和上个月的名称，而不仅仅是箭头 <,>

【英文标题】：How to show next and previous month names in datepicker instead of just arrows <,>

【发布时间】：2018-10-17 00:56:04

【问题描述】：

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

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

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

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

【问题讨论】：

在 jQuery Datepicker 中，您可以在下一个/上一个图标上显示月份名称作为标题，这是 Datepicker 的内置功能。但是，如果你想用名称完全替换图标，那么你必须编写自己的函数来在 .ui-icon 中设置上个月/下个月的名称

我说我会寻找更好的解决方案。在这里，和Adeel一样。但无论如何我已经更新了我的答案，因为我们可以实现更好的样式。

【参考方案1】：

我添加了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;

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

【参考方案2】：

更新答案：

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

但是，您可以进行更多的样式修改，以获得适合文本的内容。 这是我最终得到的 sn-p：

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

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

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