Validate Based On Date Entered In Submission Form

[gregcoiro]

Hello,

 

I am trying to create a validation rule in a submission form.  The form contains a date entry field.

I want to prevent any entries in which the date field is less than 14 days from now.

 

I would appreciate any help with this.  Thank you.

[MayMusic]

You can try the following code. Make sure to replace 'DATEFIELDNAME' with the real field name in this line: var mydate = document.getElementById('InsertRecordDATEFIELDNAME').value;

<script>
 var TwoWeeksAgo = new Date();
TwoWeeksAgo.setDate(TwoWeeksAgo.getDate() - 14);

function chk_date(){
var mydate = document.getElementById('InsertRecordDATEFIELDNAME').value;

if ( Date.parse(mydate) <=  TwoWeeksAgo ) {
alert('pick a date within the past 14 days');
return false;
}

}
document.getElementById('caspioform').onsubmit=chk_date;
</script>

[vzahomes2]

I'd like to use this script in my datapage submission form.  I would like to modify it a bit so that it prevents any entries that aren't within this calendar month.

 

I confess, I don't know javascript.  

 

I'm assuming that this code goes in an HTML block in the datapage that I'm building?

 

Thanks.  Carl

[vzahomes2]

I entered this script and it works.  

 

Can someone help me modify it so that it validates that the date is within this calendar month?

 

Thanks, Carl

[Jan]

Hello, Vzahomes2,

You can change the line

TwoWeeksAgo.setDate(TwoWeeksAgo.getDate() - 14);

to two lines:

TwoWeeksAgo.setDate(1);
TwoWeeksAgo.setHours(0,0,0);

So, the beginning of the script will be like the code:

<script>
var TwoWeeksAgo = new Date();
TwoWeeksAgo.setDate(1);
TwoWeeksAgo.setHours(0,0,0);


function chk_date(){
...

[vzahomes2]

Thanks Jan, what fun.  I wish I knew Javascript.

 

Is there a way to add another line so that the user won't enter a data in the in the future -- beyond this calendar month -- as well?

[swipebox]

When using a calendar, is there a way to block out every weekday except Monday's? And by "block out" I mean that one cannot select Tuesday, Wednesday, Thursday, Friday, Saturday or Sunday. They can literally only select a date corresponding to a Monday. Thank  you.

 

Also, I want wanting to use this custom Date Picker. Is this possible?

 

                            <script type="text/javascript">
                                $(function() {
                                    $( "#datepicker" ).datepicker();
                                });
                            </script>
                            <input type="text" id="datepicker" class="datepicker-input" style="width:180px;" />

                            

[Jan]

Hello Swipebox,

 

As far as I know, you can block weekdays with the following script:

<script type="text/javascript">
function f_enableSingleDOW(v_dayNumber)
{
    var v_calendarObj = document.getElementById('cbCalendarBody');
    if(!v_calendarObj) return;
    var v_rowObjs = v_calendarObj.getElementsByTagName('tr');

    for(var i = 0; i < v_rowObjs.length; i++){
        var v_dayObjs = v_rowObjs[i].getElementsByTagName('td');
        for(var j = 0; j < v_dayObjs.length; j++){
            if(v_dayNumber == j) continue;

            try{v_dayObjs[j].onclick = v_dayObjs[j].onmouseover = v_dayObjs[j].onmouseout = null;}catch(v_ex){}
            try{v_dayObjs[j].childNodes[0].href = 'javascript:void(0)';                          }catch(v_ex){}
        }
    }
}

function f_addEventListener(v_elem, v_event, v_fn) {            
    if (v_elem.addEventListener) {
        return v_elem.addEventListener(v_event, v_fn, false);
    }
    if (v_elem.attachEvent) {
        return v_elem.attachEvent('on' + v_event, v_fn);
    }
}

var v_calendarCtnrs = document.getElementsByClassName("cbFormCalendar");
for(var v_i = 0; v_i < v_calendarCtnrs.length; v_i++){
    f_addEventListener(v_calendarCtnrs[v_i].childNodes[0], 'click', function(){f_enableSingleDOW(0)});
}

</script>

Please insert it in the Footer and enter your weekday instead of 0 in the f_enableSingleDOW(0) at the end of the script.

The first day is 0, the second is 1 and so on.

 

If I understand correctly, you can add your Date Picker to an HTML block, and then pass the selected value to the field of the page.

[Meekeee]

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: