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

Question

This is my code: https://codepen.io/bskousen/pen/osEJi

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

I want to show next and previous month names instead of <,>. Is this possible in Jquery datepicker? If it is not possible then is it possible in any other datepicker like Bootstrap datepicker?

Any plugin is fine and I am not very rigid on using Jquery datepicker.

Answer 1

Updated answer:

As I said, I've been looking for a better solution.
And I found basically the same as Adeel.

But, you can make more style modifications to get to something where texts fits correctly.
Here is the snippet I ended up with:

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

Hope it helps.

---

Old answer

I am not aware of any easy way to change the next and previous icons into month names in the jQueryUI datepicker.

But, there is a built-in functionality to show the month in the tooltip instead of "previous" and "next".
Here it is:

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

I'll look for a better solution.

Anyway, I hope it helps.

Answer 2

I've added navigationAsDateFormat to get month names which is a built-in feature of Datepicker (but those names can be appeared only in tooltip), but after some tweaking to your Codepen I'm able to display names instead of icons.

jQuery

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

CSS

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

Please check this Simple jQuery date picker (replace icons with month names)