Control Calendar Date Popup

[brbbrid]

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.    

 

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! 

[brbbrid]

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 

[ShWolf]

Hello brbbrid,

 

Which localization is used in your DataPage? The script will depend on the format of date.

[brbbrid]

Hello ShWolf, I just used English localization, US Date/Time output - is that what you meant?

[Barbara]

What is your date input format?

[brbbrid]

I'm using the calendar popup date picker, with mm/dd/yyyy format, like for today it would be 12/23/2014 if you chose it from the calendar popup - hope that is what you mean? 

[ShWolf]

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.

[brbbrid]

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... 

[Jan]

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.

[brbbrid]

Just tried that and no alert popped up...and it also let me submit?   I even tried it in taking out the earlier script and no such luck, no alert popup and it let me submit...weird huh?

[Jan]

Hello brbbrid,

 

Sorry, do you enter names of your fields instead of START and END in InsertRecordSTART and InsertRecordEND?

[brbbrid]

I did enter the names of the fields so that its InsertRecordStart_date and InsertRecordEnd_date as the names of the fields are (Start_date) and (End_date), unless that is the wrong format?

[Jan]

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!

[Kurumi]

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.

Result: