Calendar new form and edit form date validation in SharePoint 2013 through javascript

Sharepoint provide facility to implement validation in the list through validation settings option which exist in the list setting. However, this validation does exist for new and edit forms. There are some situations when you want to implement different validation for different form. In such cases you can implement client site script for validation.

In the below example on the calendar list business want to implement following validation:-

•  In the new form user can create event for present or future date. That means the start date should be greater than now.
• In the edit form user should be able to edit the date to past date but should not edit it to before created date. That means Start date should be greater than created date.

You can leverage below code snippet to implement validation mention in point 1 for new form.  Edit newform.aspx and add a script editor web part. Put below snippet in the script editor web part.

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
	<script>
	function getdatefield(field)
	{
	var ddate = $(":input[title='" + field + "']").val().split("/");
	var dday = ddate[0];
	var dmonth = ddate[1];
	var dyear = ddate[2];
	var dDateID = $(":input[title='" + field + "']").attr("id");
	var dDateHours = $(":input[id='" + dDateID + "Hours" + "']").val();
	dDateHours = ConvertTo24HourFormat(dDateHours)
	var dDateMinutes = $(":input[id='" + dDateID + "Minutes" + "']").val();
	var departuredate = new Date(dyear, dmonth - 1, dday, dDateHours, dDateMinutes);
	return departuredate;
	}
	function ConvertTo24HourFormat(dDateHours)
	{
	dDateHours = dDateHours.split(" ");
	if (dDateHours[1] == "PM") {
	return (parseInt(dDateHours[0]) + 12);
	}
	else if (dDateHours[0] == "12") {
	return "00";
	}
	else {
	return dDateHours[0];
	}
	}
	function PreSaveAction()
	{
	var commentsBox = findFieldControl('Start Time Required Field'); //find field control by title
	var today = new Date();
	if(commentsBox.length>0)
	{
	var startTime=getdatefield("Start Time Required Field");
	if (today > startTime)
	{
	var errorHtml = '<span class="ms-formvalidation" title="errMessage"><br/><span role="alert">Start date should be greater than Today.<br></span></span>';
	commentsBox.after(errorHtml);
	return false;
	}
	}
	return true;
	}
	function findFieldControl(fieldTitle)
	{
	var control = $('[title="' + fieldTitle + '"]');
	var errMessage= $('span[title="errMessage"]');
	if(errMessage.length>0)
	{
	errMessage.remove();
	}
	return control;
	}
	</script>​​​​​​

view raw Verify start date Jquery list hosted with ❤ by GitHub

You can leverage below code snippet to implement validation mention in point 2 for edit form. Edit editform.aspx and add a script editor web part. Put below snippet in the script editor web part.

	<script src=""https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js""></script>
	<script>
	function PreSaveAction()
	{
	var commentsBox = findFieldControl('Start Time Required Field');
	var startTime=getdatefield("Start Time Required Field");
	var createddate=getcreatefield();
	if (createddate > startTime)
	{
	var errorHtml = '<span class="ms-formvalidation" title="errMessage"><br/><span role="alert">Start date should be greater then created date.<br></span></span>';
	commentsBox.after(errorHtml);
	return false;
	}
	return true;
	}
	function getcreatefield()
	{
	var $created = $("#onetidinfoblock1").find("span")[0].innerText.split(" ");
	var ddate=$created[2].split("/");
	var dday = ddate[0];
	var dmonth = ddate[1];
	var dyear = ddate[2];
	var dDateHours = $created[3].split(":")[0]+" "+$created[4]
	dDateHours = ConvertTo24HourFormat(dDateHours)
	var dDateMinutes = $created[3].split(":")[1];
	var createddate = new Date(dyear, dmonth - 1, dday, dDateHours, dDateMinutes);
	return createddate;
	}
	function findFieldControl(fieldTitle)
	{
	var control = $('[title="' + fieldTitle + '"]');
	var errMessage= $('span[title="errMessage"]');
	if(errMessage.length>0)
	{
	errMessage.remove();
	}
	return control;
	}
	function getdatefield(field)
	{
	var ddate = $(":input[title='" + field + "']").val().split("/");
	var dday = ddate[0];
	var dmonth = ddate[1];
	var dyear = ddate[2];
	var dDateID = $(":input[title='" + field + "']").attr("id");
	var dDateHours = $(":input[id='" + dDateID + "Hours" + "']").val();
	dDateHours = ConvertTo24HourFormat(dDateHours)
	var dDateMinutes = $(":input[id='" + dDateID + "Minutes" + "']").val();
	var departuredate = new Date(dyear, dmonth - 1, dday, dDateHours, dDateMinutes);
	return departuredate;
	}
	function ConvertTo24HourFormat(dDateHours)
	{
	dDateHours = dDateHours.split(" ");
	if (dDateHours[1] == "PM") {
	return (parseInt(dDateHours[0]) + 12);
	}
	else if (dDateHours[0] == "12") {
	return "00";
	}
	else {
	return dDateHours[0];
	}
	}
	</script>

view raw Calendar list edit form validation hosted with ❤ by GitHub