Get time from a SharePoint Date / time field via jQuery

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.

About: Marijn

Marijn Somers (MVP) has over 14 years experience in the SharePoint world, starting out with SP2007. Over the years the focus has grown to Office 365, with a focus on collaboration and document management. He is a business consultant at Balestra and Principal Content Provider for "Mijn 365 Coach" that offers dutch employee video training. His main work tracks are around user adoption, training and coaching and governance. He is also not afraid to dig deeper in the technicalities with PowerShell, adaptive cards or custom formatting in lists and libraries. You can listen to him on the biweekly "Office 365 Distilled" podcast.


One thought on “Get time from a SharePoint Date / time field via jQuery”

Leave a Reply

Your email address will not be published. Required fields are marked *