Comparing Dates in SharePoint

SCENARIO:

Let us assume that we need to hide some fields in SharePoint form based on other field value such as text box, what will we do? We will just check the value of the field on page load in edit form as shown below:

<script src="../Scripts/jquery.min.js"></script>
<script type="text/javascript"> 
$(document).ready(function()
{
if($("input[title='Title']").val()=="Text1") 
{
//hide fields
} 
});
</script>

This is pretty much simple. But assume that we need to hide some fields based on date and time value where Date and Time field is split into three controls:

  • Text box for Date along with Date Picker
  • Dropdown box to select Hours
  • Dropdown box to select Minutes

On seeing the three controls, we may think it is very complicated. Certainly not. We are going to achieve this by retrieving the id of date textbox and then append the id with the words, “Hours” and “Minutes” to get the value of Hours and Minutes dropdown. So, this will be quite interesting. Let’s start.

Retrieving value from Date and Time field:

The below code shows how to retrieve value from date and time field in edit form on page load. If we need to check the value of date and time field in new form on save button for some other requirement, use PreSaveAction function instead of document.ready function

<script src="../Scripts/jquery.min.js"></script>
<script type="text/javascript"> 
$(document).ready(function()
 {
 var startDate=getDateField("Start Date");//Display name of Date and Time field
 alert(startDate);
 });
 function getDateField(field)
 {
 var date = $(":input[title='" +field+ "']").val(); //retrieves date from date text box which is in mm/dd/yyyy format
 var d = new Date(date);
 var month =d.getMonth() + 1; //adding 1 as January starts at 0
 var day =d.getDate();
 var year = d.getFullYear();
//appending 0 for single digit date ad month
 if (month.length < 2) month = '0' + month; 
if (day.length < 2) day = '0' + day;
var dateID = $(":input[title='"+field+"']").attr("id");
var dateHours = $(":input[id='"+ dateID + "Hours" +"']").val();
var Meri=dateHours.split(' ')[1];
dateHours = dateHours.split(' ')[0];
//converting it into 24 hour format
 if(Meri == "PM" && dateHours<12)
    dateHours = parseInt(dateHours)+12;
 else if(Meri == "AM" && dateHours==12)
   dateHours = parseInt(dateHours)-12;
var dateMinutes=$(":input[id='"+dateID+"Minutes"+"']").val();
 var requiredDate=new Date(year,month-1,day,dateHours,dateMinutes,0);
 return requiredDate;
 }
</script>

To retrieve date and time in display form, use the below code:

<script src="../Scripts/jquery.min.js"></script>
<script type="text/javascript"> 
$(document).ready(function()
 {
var start = $.trim($('h3:contains("Start Date")').closest('td').next('td').text());
alert(start);
});
</script>

Comparing Current Date and time with Date in DateTime field:

After retrieving the value from Date and Time field, let’s say we need to check the current date and time and hide if current date is greater than Start Date field.

<script src="../Scripts/jquery.min.js"></script>
<script type="text/javascript"> 
$(document).ready(function()
 {
 var startDate=getDateField("Start Date");//Display name of Date and Time field
 var current=new Date();
 if(current>=startDate)
 {
 //hide fields
 }
 });
 function getDateField(field)
 {
var date = $(":input[title='" +field+ "']").val(); //retrieves date from date text box which is in mm/dd/yyyy format
var d = new Date(date);
var month =d.getMonth() + 1; //adding 1 as January starts at 0
var day =d.getDate();
var year = d.getFullYear();
//appending 0 for single digit date ad month
 if (month.length < 2) month = '0' + month; 
if (day.length < 2) day = '0' + day;
var dateID = $(":input[title='"+field+"']").attr("id");
var dateHours = $(":input[id='"+ dateID + "Hours" +"']").val();
var Meri=dateHours.split(' ')[1];
dateHours = dateHours.split(' ')[0];
//converting it into 24 hour format
 if(Meri == "PM" && dateHours<12)
    dateHours = parseInt(dateHours)+12;
 else if(Meri == "AM" && dateHours==12)
   dateHours = parseInt(dateHours)-12;
var dateMinutes=$(":input[id='"+dateID+"Minutes"+"']").val();
var requiredDate=new Date(year,month-1,day,dateHours,dateMinutes,0);
 return requiredDate;
 }
</script>

To compare two SharePoint date fields, we need to call getDateField function for both the dates as:

<script src="../Scripts/jquery.min.js"></script>
<script type="text/javascript"> 
$(document).ready(function()
 {
var startDate=getDateField("Start Date");//Display name of Date and Time field
var EndDate=getDateField("End Date");
 if(EndDate<=startDate)
 {
 alert("End Date should be greater than Start Date)
 }
 });
</script>

Hiding fields before three hours of start date in SharePoint

To hide the fields from three hours prior to start Date  time, lets subtract three hours from Start Date time and then compare with current date and time as shown below:

<script src="../Scripts/jquery.min.js"></script>
<script type="text/javascript"> 
$(document).ready(function()
 {
 var startDate=getDateField("Start Date");//Display name of Date and Time field
 var current=new Date();
 var subbed = new Date(startDate - 3*60*60*1000); // subtract 3 hours
 if(current>=subbed)
 {
 //hide fields
 }
});
function getDateField(field)
 {
var date = $(":input[title='" +field+ "']").val(); //retrieves date from date text box which is in mm/dd/yyyy format
var d = new Date(date);
var month =d.getMonth() + 1; //adding 1 as January starts at 0
var day =d.getDate();
var year = d.getFullYear();
//appending 0 for single digit date ad month
 if (month.length < 2) month = '0' + month; 
if (day.length < 2) day = '0' + day;
var dateID = $(":input[title='"+field+"']").attr("id");
var dateHours = $(":input[id='"+ dateID + "Hours" +"']").val();
var Meri=dateHours.split(' ')[1];
dateHours = dateHours.split(' ')[0];
//converting it into 24 hour format
 if(Meri == "PM" && dateHours<12)
    dateHours = parseInt(dateHours)+12;
 else if(Meri == "AM" && dateHours==12)
   dateHours = parseInt(dateHours)-12;
var dateMinutes=$(":input[id='"+dateID+"Minutes"+"']").val();
var requiredDate=new Date(year,month-1,day,dateHours,dateMinutes,0);
 return requiredDate;
 }
</script>

Please do not forget to like or rate the article 😛

 

 

Advertisements

Leave a Comment

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

WordPress.com Logo

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

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s