I have been customizing the jQuery UI DatePicker widget to match my own style. However, I am encountering difficulties when it comes to styling the title of the date picker:
1. The title currently displays the full month name with a capital letter, how can I make it all capitalized?
2. It uses two png arrows for the next and previous signs. Is there a way to replace them with plain text symbols like < and >?
3. I've noticed that the next and previous elements seem disconnected from the month and year display, staying static while the calendar moves with window resizing. How can I align these elements to the right and left sides of the month and year text?
EDIT
4. Is there a method to show only the last two digits of the year? For example, displaying 2015 as 15.
CSS:
/* Picker width and position */
.ui-datepicker{
position: relative;
margin: 50px auto 0;
font-size: 20px;
}
/* Eliminate underline of anchor 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;
}
/* Arrow styling */
.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;
}
/* Arrow positioning */
.ui-datepicker-prev {
position:relative;
left: 50px;
}
.ui-datepicker-next {
position: relative;
left: 350px;
}
/* Days header 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 days */
.ui-datepicker-unselectable .ui-state-default {
font-weight: 500;
color: lightgrey;
}
/* Hover effect */
.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
Here is an example of how the title should look (with different arrows):