jQuery UI - Unable to style several DatePicker elements

Question

I'm using jQuery UI DatePicker widget and customizing by my own style. Since this is not really an open source I'm having troubles styling the title of the date picker:

1. Currently the title shows the full month name with a capital letter, how do I make it all capital?
2. It uses two png arrows to draw the next and previous signs. I just want to replace it with < and > as a plain text, not another png element.
3. It seems next and previous are stand-alone elements, unrelated to the month name and year, this means whenever I resize the window these elements remain static while the calendar always stays in the middle of the page. How do I align them on the right and left sides of the month and year text?

EDIT
4. How can I transform the year to show only the last two digits? from 2015 --> 15.

Fiddle

CSS:

/* picker width and position*/
.ui-datepicker{
    position: relative;
    margin: 50px auto 0;
    font-size: 20px;
}

/*eliminate the underline of a tags*/
.ui-datepicker a{
    text-decoration: none;
}


.ui-datepicker table {
    position: relative;
    margin: 0 auto;
    width: 900px;
    height: 500px;
    text-align: center;
    border-collapse: collapse; /*remove double border*/
}

/*header*/

.ui-datepicker-title {
    position: relative;
    margin: 0 auto;
    width: 100px;
    left: -335px;
    margin-bottom: 30px;
}

/*the arrows definition*/
.ui-datepicker-prev, .ui-datepicker-next {
    display: inline-block;
    width: 30px;
    height: 30px;
    text-align: center;
    cursor: pointer;
    background-image: url('../img/arrow.png');
    background-repeat: no-repeat;
    font-size: 10px;
    position: absolute;
    overflow: hidden;
}

/*the arrows position*/
.ui-datepicker-prev {
    position:relative;
    left: 50px;

}
.ui-datepicker-next {
    position: relative;
     left: 350px;
}

/*days names treatment*/

.ui-datepicker th {
    padding: 5px 0;
    color: #666666;
    font-size: 15px;
}

.ui-datepicker td span, .ui-datepicker td a {
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    color: #666666;
    position: relative;
    bottom: 15px;
    left: 30px;
    font-size: 15px;
}


/*unselectable*/
.ui-datepicker-unselectable .ui-state-default {
    font-weight: 500;
    color: lightgrey;    

}

/*hover*/
.ui-datepicker-calendar .ui-state-hover {
    background: #f7f7f7;
    border-radius: 100px;
}

jQuery:

$(function(){
        $('#datepicker').datepicker({
//            beforeShowDay: $.datepicker.noWeekends,
            inline: true,
            showOtherMonths: true,
            dayNamesMin: ['Sunday', 'Monday', 'Tuesday', 'Wednsday', 'Thursday', 'Friday', 'Saturday'],
        });
    });

HTML:

<div id="datepicker"></div>

EDIT2
This is what the title should look like (only with different arrows):

Answer 1

To make the Title Uppercase, add

text-transform: uppercase;

to .ui-datepicker-title in your CSS .

To change the png images,

remove

background-image: url('../img/arrow.png');
background-repeat: no-repeat;

from .ui-datepicker-prev, .ui-datepicker-next in your CSS

To set the < and > as previous and next text, use nextText and prevText as config options.

And for the last question, i think you have some problem with the CSS. Check it once more, as such a problem never happens with the default one.

To show the last two digits only, in your config please add

dateFormat: "dd-mm-y"

eg:

$('#startDate').datepicker({
        dateFormat: "dd-mm-y"
    }) 

Answer 2

jsfiddle

The changes in code:

.ui-icon, .ui-icon-circle-triangle-w, .ui-datepicker-prev, .ui-datepicker-next {
    background-image: none !important;
}
.ui-datepicker-prev:after {
    content: '\003c';
}
.ui-datepicker-next:after {
    content: '\003e';
}

As for your last request, i'm not sure what you mean as the calendar renders on the entire page.

Answer 3

1. .ui-datepicker-title { text-transform: uppercase; }
2. Set nextText and prevText . See: http://api.jqueryui.com/datepicker/#option-nextText
3. I'm not sure what you mean here. They should already be on the left and right sides and should respond to resizing the calendar. Post a specific example that illustrates your problem.

Answer 4

Here's an updated Fiddle: https://jsfiddle.net/rmk3f010/3/

As already mentioned:

For uppercase title:

.ui-datepicker-title {
    text-transform: uppercase;
}

For textual arrows:

nextText: '>',
prevText: '<',

And finally for the alignment:

.ui-datepicker-prev {
    float: left;

}
.ui-datepicker-next {
    float: right;
}