CSS not rendering for SharePoint date picker control

Been a little while since I posted something to do with SharePoint development as such, so I figured I would add this quick post in explaining something I cam across the other day. I’m currently working on some Project Server 2010 customisations (which of course are all built on top of SharePoint 2010) and came across this when I noticed a date picker I was putting on one of my pages was rendering out like this:

So in this post I’ll take you through how I figured out what was happening here.

The first place I started was with the CSS – lets make sure I wasn’t doing anything silly to overwrite the out of the box styles. A quick look at where the styles on the date picker come from had me sure it wasn’t one of mine that did this. The reason being is that the calendar portion of the date picker is actually handled by an iFrame, and is an entirely separate page. If you look at the properties of the iFrame you can see that it is rendering the URL of “_layouts/iframe.aspx” with a massive query string that passes all the properties of the calendar, such as which calendar to use, work days, first day of the week, etc.

Next step was to have a look at what this iFrame looked like when it was called as part of a list field or some other out of the box scenario, as they were working and mine wasn’t. Since there isn’t a great deal of HTML on these little iFrames it was pretty easy to pick the differences – and there was one that got my attention – an extra CSS reference. The out of the box iFrame was rendering this CSS reference and mine wasn’t for some reason:

<link rel="stylesheet" type="text/css" href="http://blog.brianfarnhill.com/_layouts/1033/styles/Themable/datepickerv4.css?rev=Hu9OlQmu1YOXv7TK%2BQrc5Q%3D%3D"/>

As the name of the style sheet suggested, this is the file that has all of the styles for the date picker in it. From here I needed to figure out why my page wasn’t calling the date picker right. Seeing as I knew it was just an iFrame my next stop was to compare the URL’s of each iFrame to play spot the difference there, and surely enough there was one. Here is a sample of each URL:

• Default: http://server/pwa/_layouts/iframe.aspx?...
• Mine: http://server/_layouts/iframe.aspx?...

The difference here – the “/pwa” part, being the URL of my project server collection and the current SPWeb I was working with (also worth acknowledging, in this case there is no site at the root of the URL). When I changed the URL to add the /pwa the iFrame worked great and got the CSS reference.

So now that I knew what the problem was,how do I fix it? I’m working with and out of the box SharePoint control so recompiling it with a code fix isn’t an option,and I wasn’t keen on writing my own just for this. As luck would have it though, there is a property on the date picker that lets you specify the URL of the iFrame that should be used for the date picker, so a quick line of code in my code behind had it rendering out great, here is it.

MyDatePicker.DatePickerFrameUrl = SPContext.Current.Web.ServerRelativeUrl + "/_layouts/iframe.aspx";

Redeployed the solution with this and it all worked perfectly. Now I can only assume that the property I’m using is there in the case of someone wanting to use a different date picking mechanism, but in the case it allowed me to fix up the problem with the CSS not rendering.