Jump to content
  • 0

Control Calendar Date Popup


brbbrid
 Share

Question

I have a form that has a few scripts already running in it to control some fields where I need to format numbers as currency.  I'm good to go on those and they are running fine - A great big thank you to those who are posting solutions here in the forums! - It's been a great help to me and I would not be able to do some of the great things I'm accomplishing without those wonderful individuals who post solutions and code here in the forums.  :D  

 

But I now need to control 2 date fields.  I have the calendar picker set up for each field, but was hoping for the "Start Date" field, I could somehow restrict it by year, so that it would only start in 2015, and then for the "End Date" field, if there is anyway to control that so that it would only allow the date entered to be AFTER the "Start Date"? I have seen some other solutions in the forums here that refer specifically to making the dates be today or after today, but nothing with year or where a second date field is dependent on the date entered in the first or where year is the only control....  

 

I've got to get this working soon so if anyone can help me, I would appreciate it so much!  Thank you in advance!  :)

Link to comment
Share on other sites

12 answers to this question

Recommended Posts

  • 0

Anyone? Anyone? Bueller? 

 

Just wondering if anything remotely close to what I need is out there?  I'm willing to hack different solutions together, or if anyone has an answer to just one question - like for example to just control the year only?  

 

Thank you to all of you out there  :lol:

Link to comment
Share on other sites

  • 0

Hello brbbrid,

 

Insert this script into the Footer of your DataPage:

<script  type="text/javascript">

setTimeout(function(){
var v_button = document.getElementById('Submit');

var v_date1= document.getElementById("InsertRecorddate1");
var v_date2= document.getElementById("InsertRecorddate2");

if (!v_date1 || !v_date2) return false;

v_date1.onchange = v_date2.onchange = function(){
   v_button.disabled = !f_checkButton();
}; 

v_button.disabled = !f_checkButton();

function f_checkButton(){
    var v_regExp = /(\d{1,2})\/(\d{1,2})\/(\d{4})/;
	if(!v_date1.value) return true;
    if(!v_regExp.test(v_date1.value)) return false;
    if(!v_regExp.test(v_date2.value)) return false;
    
    try{
	    var v_year1 = parseInt(v_date1.value.match(v_regExp)[3]);
		
		if (v_year1 <= 2014) return false;
		
		var v_dateObj1 = new Date(v_date1.value);
		var v_dateObj2 = new Date(v_date2.value);
		if(v_dateObj1 == v_dateObj2) return false;
		if(v_dateObj2.getTime() < v_dateObj1.getTime()) return false;
	}catch(v_ex){}
	
	return true;

}
}, 100);

</script>

And replace InsertRecorddate1 and InsertRecorddate2 with your Date field IDs.

 

How this script works:

— You can submit empty values to the Date1 and Date2 fields

— If Date1 field is not empty and Date2 field is empty, then "Submit" button will be disabled

— If Date1 field is empty and Date2 field is not empty, then "Submit" button will be enabled

— If Date1 field contains date with year 2014 or less, then "Submit" button will be disabled

— If Date1 field contains date with year 2015 or greater and Date2 field contains date less than in Date1 field, then "Submit" button will be disabled

 

Let me know if this helps.

Link to comment
Share on other sites

  • 0

Thank you so much! I was hoping there was a way to only control the calendar popup so that it would only display 2015 and later, but I'm guessing that isn't possible? 

 

This solution seems to be working, but I'm afraid it will just seem like the form itself isn't working and the user won't know why...I'm wondering if there a way I can add a popup or alert that let's them know it should be within 2015 and that the end date must take place after the start date? I can't remember if that would just be like an alert text that would do the popup in Javascript or not... 

Link to comment
Share on other sites

  • 0

Hi brbbrid,

 

If you want to display an alert, I think, you can use the following code:

<SCRIPT LANGUAGE="JavaScript">
 function checkStart()
{
   var v_sDate = document.getElementById("InsertRecordSTART").value;
   var v_eDate = document.getElementById("InsertRecordEND").value;
   var sDate = new Date(v_sDate);
   var eDate = new Date(v_eDate);
   if (eDate<sDate)
      {
        alert("Finish Date should be more than Start Date");
        return false;
      }
   }
}   
document.getElementById("caspioform").onsubmit=checkStart;
</SCRIPT>

If END Date is less than START Date, the message will be displayed and the form will not be submitted.

 

I hope, it helps.

Link to comment
Share on other sites

  • 0

It is correct format. I am sorry, it was my misprint.

Please try the following code:

<SCRIPT LANGUAGE="JavaScript">
 function checkStart()
{
   var v_sDate = document.getElementById("InsertRecordSTART").value;
   var v_eDate = document.getElementById("InsertRecordEND").value;
   var sDate = new Date(v_sDate);
   var eDate = new Date(v_eDate);
   if (eDate<sDate)
      {
        alert("Finish Date should be more than Start Date");
        return false;
      }
}   
document.getElementById("caspioform").onsubmit=checkStart;
</SCRIPT>

I hope, now the script works.

 

By the way, Happy New Year! :)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...