How to hide jquery datepicker prev/next text

Question

Here is code

You can see the button and the prev ,next overlap

How to hide the prev ,next text ??

Answer 1

DEMO

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

You can use css to hide the next and previous button as shown in the demo

Answer 2

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

You can hide the font by setting the css font-size to 0.

Demo

Answer 3

Here is a function to Hide/Show the prev/next navigation.

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

Here is codepen

Answer 4

The most direct way is by setting the text to empty string. In your code, the date picker is initialized in Javascript/JQuery, and you can modify the initialization as follows:

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

Alternatively, and in cases where you can't access the initialization in code, you can change the text after initialization:

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

I like this method better than setting the color to transparent, as suggested in one answer, as transparent strings are still selectable by the user. I also like it better than hiding the entire .ui-datepicker-next/prev elements as suggested by another answer, because that will hide the image as well, not only the text.