Date Picker controls have variable width

I’m beginning to hate the SharePoint DatePicker control. It displays with different widths:

What defines the width of this control? Damned if I can see – it appears to be the widest element within it. This means either:

  • the length of the date link at the bottom of the control
  • the length of one of the week rows

This is probably less of an issue for Americans (right) than the British (left) – I presume that other Europeans will have the same issue.

Certainly, this will result in some squashed looking calendars on certain months. Yet try as I might, I couldn’t get the calendar to fill an entire area.

And why does the American format give the day and the normal format not?

Date Picker controls have variable width

4 thoughts on “Date Picker controls have variable width

  1. marc says:

    : What defines the width of this control?

    From your examples, it’s the Month+Year in the title bar (Oct 2008, Dec 2007, June 2008)

    So you’d need to set this as a fixed width, eg:

    .ms-picker-month { width: 250px; }

    (I’ve not tested this, so it’s highly likely that other styles will also need to be changed, eg: ms-picker-table { width:100%; } )

  2. Hi Marc,

    Na, it was the Day, Month, date and year at the bottom for US region sites, but the Month and Year in the title for UK region ones!

    I did try fixing the width, but it never looked remotely right – large gaps on either side of the calendar part, etc.. It was a real pain!

  3. Swirl says:

    Have you found the solution to fixing the width of datepicker for all months?

    I have 2 sharepoint sites and both have identical datepicker.css, but one displays fixed width datepicker whereas the other displays datepicker that varies its width for different months.

  4. Hmm – wierd that one is fixed and the other not. I take it that they’re using the same CSS – as Marc says, you could use a fixed width, but I found that fiddly (i.e. it was going to take longer than it was worth worrying about).

    So I guess the short answer is no, I never did get any further.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.