Detecting the Current User’s Regional Settings with jQuery

I noticed a nice little trick going by in my Twitter feeds today.
I’ve always wanted to know how to do this. Displaying the right formats for dates and times as well as the right offset from UTC is a real challenge from the client side. There’s a fantastic library called Moment.js that I use on just about every project these days, but it only does the full job if you know the user’s locale and timezone.

The post on StackExchange gave a little snippet of script which came from an old MSDN Forums post from 2009. Kudos to Peter Holpar for the original idea.

The script basically screen-scrapes the values from the Language and Region settings page. I don’t mean that disparagingly at all; screen-scraping is how the SPGetCurrentUser function in my SPServices works. If it gets the job done and is reliable, the old art of screen-scraping – or should we call it plumbing the DOM with AJAX? – is just great.

Note that you’ll need to have jQuery loaded to use its AJAX function.

Here’s the script as-is from the StackExchange post. It was originally intended for SharePoint 2010.

var url = ctx.HttpRoot+"/_layouts/regionalsetng.aspx?Type=User";
$.get(url,function(data){
    $(data).find("select[name='ctl00$PlaceHolderMain$ctl00$ctl00$DdlwebLCID']").find(":selected").each(function(){
        var lcid  = $(this).attr("value");
        var cultureInfo  = $(this).text();
    });
});

I just tested it out in SharePoint Online on Office365 and this is the version that works for me. Note that I simplified the jQuery selectors to look just for the important ending text in the name attribute. I’ve also re-scoped the variables so that they are available outside the $.get call. If you want to use this snippet, you’ll probably need to adapt it for your environment. The alert at the end is jut there to show you that it works.

var url = _spPageContextInfo.webAbsoluteUrl+"/_layouts/regionalsetng.aspx?Type=User";
var lcid, cultureInfo, timeZone;

$.get(url,function(data){
  $(data).find("select[name$='LCID'] option:selected").each(function(){
      lcid  = $(this).attr("value");
      cultureInfo  = $(this).text();
  });
  $(data).find("select[name$='TimeZone'] option:selected").each(function(){
    timeZone  = $(this).text();
  });

  alert(lcid + "::" + cultureInfo + "::" + timeZone);
});