How to display Previous and Next buttons or icons in JQuery Datepicker

Folks,

You must have noticed sometimes while using JQuery datepicker control (which comes from jquery-ui.css file) we get the datepicker control but it doesn't display "Previous" and "Next" buttons or icons as shown below.

The fix is to apply a CSS and display them by using below code.

<style type="text/css">

        .ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span {

            background-image: url("https://your_url_of_the_site/folder_where_images_are_uploaded/ui-icons_ef8c08_256x240.png");

        }

 </style>

Above, you can see I am using a code which apply CSS to your ".aspx" or ".ascx" or ".html" page where you are using this datepicker control.

Note: The URL I am pointing is to the place where your images are stored. These images are those which comes along with when you download the "jquery-ui" library. In this example, I have stored them in a SharePoint library and I am referencing to them there.

Result comes as shown below after applying the CSS:

Hope this helps!