Jump to content
  • 0

Validate Based On Date Entered In Submission Form


gregcoiro

Question

10 answers to this question

Recommended Posts

  • 0

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>
Link to comment
Share on other sites

  • 0

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

Link to comment
Share on other sites

  • 0
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(){
...
Link to comment
Share on other sites

  • 0

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;" />

                            

Link to comment
Share on other sites

  • 0

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.

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