Pages

Wednesday, June 10, 2015

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.

NoteThe 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!

2 comments: