Jump to content
  • 0

Control Calendar Date Popup


brbbrid

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

13 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

  • 0

Hi! - Just wanted to share this solution. If you want to save and restrict/disable Date. You may use an external JS library called flatpickr: https://flatpickr.js.org/getting-started/ 

To apply in the DataPage, follow these steps:

1. Insert Header and Footer. In the Footer, insert the code below. Make sure to disable first the HTML Editor in the Advanced Tab.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">

<!-- jQuery -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 <!--  Flatpickr  -->
  <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

<script>

$("#InsertRecordAppointment").flatpickr({
    dateFormat: "d/m/Y",
    altInput: true,
    altFormat: "m/d/Y",
    disable: [
        {
            from: "26-10-2022",
            to: "31-10-2022"
        }
    ]
});

</script>

Optional: You can insert this Style/CSS in the Header to change the font based on your DataPage's style.
 

<style>

.flatpickr-calendar {

 font-family: system-ui !important;

}

</style>

To know the formats, you can check them here: https://flatpickr.js.org/formatting/

enableTime - you are enabling time to the picker
dateFormat - format of the date that will be saved in the table. Caspio only accepts MM/DD/YYYY format in the table.
disable: range of date that you would like to disable - format will be based on the the dateFormat 

If you want to have a different display in the Text Field when selecting Date and Time, you can add altInput. altInput hides your original input and creates a new one.

Upon date selection, the original input will contain a m/d/Y H:i string, while the altInput will display the date in a more legible, customizable format.

Example:

$("#DATETIMEFIELD").flatpickr({
    enableTime: true,
    dateFormat: "m/d/Y H:i",
    altInput: true,
    altFormat: "F j, Y H:i"
});

IMPORTANT Note: Uncheck the Calendar pop-up in the field to apply the flatpickr.

image.png

Result:

image.png

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...
×
×
  • Create New...