Also,
I've tried this with both 1.5.3 and the latest release candidate and i
get the same behaviour. So it must be the css. Here's what I have from
themeroller. All i changed was the URL path:
/*datepicker*/
/* Main Style Sheet for jQuery UI date picker */
.ui-datepicker-div, .ui-datepicker-inline, #ui-datepicker-div {
/*resets*/margin: 0; padding: 0; border: 0; outline: 0; line-height:
1.3; text-decoration: none; font-size: 100%; list-style: none;
font-family: Lucida Grande, Lucida Sans, Arial, sans-serif;
background: #f3f3f3 url(../images/jqueryUI/
f3f3f3_40x100_textures_01_flat_0.png) 0 0 repeat-x;
font-size: 1.2em;
border: 4px solid #dddddd;
width: 15.5em;
padding: 2.5em .5em .5em .5em;
position: relative;
}
.ui-datepicker-div, #ui-datepicker-div {
z-index: 9999; /*must have*/
display: none;
}
.ui-datepicker-inline {
float: left;
display: block;
}
.ui-datepicker-control {
display: none;
}
.ui-datepicker-current {
display: none;
}
.ui-datepicker-next, .ui-datepicker-prev {
position: absolute;
left: .5em;
top: .5em;
background: #e6e6e6 url(../images/jqueryUI/
e6e6e6_40x100_textures_02_glass_80.png) 0 50% repeat-x;
}
.ui-datepicker-next {
left: 14.6em;
}
.ui-datepicker-next:hover, .ui-datepicker-prev:hover {
background: #8ab9ff url(../images/jqueryUI/
8ab9ff_40x100_textures_02_glass_90.png) 0 50% repeat-x;
}
.ui-datepicker-next a, .ui-datepicker-prev a {
text-indent: -999999px;
width: 1.3em;
height: 1.4em;
display: block;
font-size: 1em;
background: url(../images/jqueryUI/888888_7x7_arrow_left.gif) 50% 50%
no-repeat;
border: 1px solid #cccccc;
cursor: pointer;
}
.ui-datepicker-next a {
background: url(../images/jqueryUI/888888_7x7_arrow_right.gif) 50%
50% no-repeat;
}
.ui-datepicker-prev a:hover {
background: url(../images/jqueryUI/222222_7x7_arrow_left.gif) 50% 50%
no-repeat;
}
.ui-datepicker-next a:hover {
background: url(../images/jqueryUI/222222_7x7_arrow_right.gif) 50%
50% no-repeat;
}
.ui-datepicker-prev a:active {
background: url(../images/jqueryUI/ffffff_7x7_arrow_left.gif) 50% 50%
no-repeat;
}
.ui-datepicker-next a:active {
background: url(../images/jqueryUI/ffffff_7x7_arrow_right.gif) 50%
50% no-repeat;
}
.ui-datepicker-header select {
border: 1px solid #cccccc;
color: #444444;
background: #e6e6e6;
font-size: 1em;
line-height: 1.4em;
position: absolute;
top: .5em;
margin: 0 !important;
}
.ui-datepicker-header option:focus, .ui-datepicker-header option:hover
{
background: #8ab9ff;
}
.ui-datepicker-header select.ui-datepicker-new-month {
width: 7em;
left: 2.2em;
}
.ui-datepicker-header select.ui-datepicker-new-year {
width: 5em;
left: 9.4em;
}
table.ui-datepicker {
width: 15.5em;
text-align: right;
}
table.ui-datepicker td a {
padding: .1em .3em .1em 0;
display: block;
color: #444444;
background: #e6e6e6 url(../images/jqueryUI/
e6e6e6_40x100_textures_02_glass_80.png) 0 50% repeat-x;
cursor: pointer;
border: 1px solid #f3f3f3;
}
table.ui-datepicker td a:hover {
border: 1px solid #2694e8;
color: #111111;
background: #8ab9ff url(../images/jqueryUI/
8ab9ff_40x100_textures_02_glass_90.png) 0 50% repeat-x;
}
table.ui-datepicker td a:active {
border: 1px solid #2694e8;
color: #000000;
background: #8ab9ff url(../images/jqueryUI/
8ab9ff_40x100_textures_02_glass_50.png) 0 50% repeat-x;
}
table.ui-datepicker .ui-datepicker-title-row td {
padding: .3em 0;
text-align: center;
font-size: .9em;
color: #362b36;
text-transform: uppercase;
}
table.ui-datepicker .ui-datepicker-title-row td a {
color: #362b36;
}
.ui-datepicker-cover {
display: none;
display/**/: block;
position: absolute;
z-index: -1;
filter: mask();
top: -4px;
left: -4px;
width: 193px;
height: 200px;
}
On Dec 10, 10:22 am, Matt <[EMAIL PROTECTED]> wrote:
> Hi,
> I just rolled a css theme using themeroller, and I'm trying to get a
> simple datepicker setup using the latest UI release candidate.
>
> My problem is when I open the datepicker which defaults to the current
> month, instead of using the Next image, i get:
>
> <div class="ui-datepicker-next"><label>Next></label><label/></div>
>
> If I go back to November, the correct next image is shown.
>
> Also the overall width of the datepicker widget seems to be too
> narrow.
>
> I've linked images here:http://flickr.com/photos/[EMAIL PROTECTED]/sets/
> 72157611019103164/
>
> My code to initialize the datepicker is:
>
> $("#startDate,#endDate").datepicker({
> beforeShow: customRange,
> dateFormat: 'yy-mm-dd',
> showOn: "button",
> buttonImage: "images/calendar.gif",
> buttonImageOnly: true
> });
> //current range req: max date is the current date
> function customRange(input) {
> return {minDate: (input.id == "endDate" ?
> $("#startDate").datepicker
> ("getDate") : null),
> maxDate: new Date()};
> }
>
> Any help would be great. Thanks,
>
> Matt
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"jQuery UI" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---
