如何隐藏 jquery 日期选择器 prev/next 文本

Question

您可以看到按钮和 prev ,next 重叠

如何隐藏prev,next文字??

Answer 1

.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span {
    color: transparent;
}

您可以使用 css 隐藏下一个和上一个按钮，如演示中所示

Answer 2

.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span {
    font-size: 0;
}

您可以通过将 css font-size 设置为 0 来隐藏字体。

Demo

Answer 3

这是 Hide/Show prev/next 导航的功能。

$(function () {
    $('#datepicker').datepicker().focus(function () {
        $(".ui-datepicker-next").show();
        $(".ui-datepicker-prev").show();
    });
});

这里是codepen

Answer 4

最直接的方法是将文本设置为空字符串。在你的代码中，日期选择器是在Javascript/JQuery中初始化的，你可以修改初始化如下：

$('.week-picker').datepicker({
   /* ... your existing intialization code ... */
   nextText: '',
   prevText: '',
   /* ... */
});

或者，如果您无法在代码中访问初始化，您可以在初始化后更改文本：

$('.week-picker').datepicker('option', 'nextText', '');
$('.week-picker').datepicker('option', 'prevText', '');

与将颜色设置为 transparent 相比，我更喜欢这种方法，正如一个答案中所建议的那样，因为用户仍然可以选择透明字符串。我也更喜欢它，而不是像另一个答案所建议的那样隐藏整个 .ui-datepicker-next/prev 元素，因为这也会隐藏图像，而不仅仅是文本。

如何隐藏 jquery 日期选择器 prev/next 文本

How to hide jquery datepicker prev/next text

jquery

jquery-ui-datepicker