Get time from a SharePoint Date / time field via jQuery

February 17th, 2012 | Posted by Marijn in jquery / javascript | metadata | sharepoint

In creating a list form for a SharePoint lending application, the customer had the following requirement:
The return date must be after the departure date.

That means not only does the date have to be checked, but the hour as well.
Getting the date from a field is really easy in jQuery because you can refer to the title of the field:

var date = $(":input[title=’DateField1’]").val();

But getting the hours and minutes proved to be another task. Since the SharePoint date / time control is a complex control (having a lot of components) not all components have their own title to refer to.
If you look at the source code for a date/time control however, you can see the hours dropdown has the same ID as the date picker, but it has the word “Hours“ added to it.
Same goes for the minutes dropdown with the word “Minutes”. This allows us to get the time like this:

//create a string variable to put the time in
  var sTime = "";
// get the ID from the date control
var dDateID = $(":input[title='"+field+"']").attr("id");
//get the value from Hours by referring to the id + Hours
var dDateHours = $(":input[id='"+ dDateID + "Hours" +"']").val();
sTime = dDateHours;
//get the value from Minutes by referring to the id + Minutes
var dDateMinutes = $(":input[id='"+ dDateID + "Minutes" +"']").val();
sTime += dDateMinutes;

alert(sTime);

Note that the Hours field also has a “:” in it! If you are doing mathematical equations, it is better to put it in a date type or take the substring:

dDateHours = dDateHours.substring(0,2)

Creating a function that gives you the date and time
I put the code in a separate function that needs the control title as an argument and returns the date and time as a Date.
Keep in mind that I am using the DD/MM/YYYY notation on my date fields.
If you are using the MM/DD/YYYY notation you need to change the depday and depmonth variables.

function getdatefield(field){
  var ddate = $(":input[title='" +field+ "']").val();
  // date looks like DD/MM/YYYY
  var dday = ddate.substring(0,2);
  var dmonth = ddate.substring(3,5);
  var dyear= ddate.substring(6,10);
  var dDateID = $(":input[title='"+field+"']").attr("id");
  var dDateHours = $(":input[id='"+ dDateID + "Hours" +"']").val();
  //delete the “:”
  dDateHours = dDateHours.substring(0,2)
  var dDateMinutes = $(":input[id='"+ dDateID + "Minutes" +"']").val();
  var departuredate = new Date(dyear,dmonth-1,dday, dDateHours, dDateMinutes,0);
  return departuredate;
}

Check if one SharePoint Date / Time is bigger than the other
This allows a SharePoint date / Time check (to see if one date is bigger then another) to be very easy:

function PreSaveAction(){
  // check for return date > departure date
  if(getdatefield("DateField1") > getdatefield("DateField2")){
    alert("DateField2 must be bigger then DateField1!");
    return false;
  }
}

I put the check in the PreSaveAction, because I am checking it before the user submits the form.

You can follow any responses to this entry through the RSS 2.0 You can leave a response, or trackback.

One Response



Leave a Reply

%d bloggers like this: