How To Prevent Future Date Selection / Entry

[MetricsCC]

I have a date field that represents the date that a member of the database received their certification.  A future date would be invalid.  I would like to prevent the entry (either typing the date or selecting from the calendar) of a date in the future from "TODAY'S DATE." 

[MayMusic]

The ID in here does not seem to be accurate. If it is a submission page and mcc_bootcamp_date is the field name the ID should be

InsertRecordmcc_bootcamp_date

 

Refer to http://forums.caspio.com/index.php/topic/4377-js-guide-caspio-form-elements/

 

You will not see the error unless you have enabled developer tool on your browser.

[MayMusic]

You can add an HTML Block right after the date field and use this script:

<script>
function pastDateValidation()
{
    var d=document.getElementById("InsertRecordDate").value;
        if(new Date(d) > new Date())
    {
        alert("Select a date which is before now");
        document.getElementById("InsertRecordDate").value="";
    }

}
document.getElementById('InsertRecordDate').onchange = pastDateValidation;

</script>

InsertRecordDate needs to be replaced with the actual ID field

 

Also make sure to click on source then paste the code

[MetricsCC]

Unfortunately the field still accepts future dates.  

[MayMusic]

Is it possible for you to provide the URL to the page?

[MayMusic]

I need to take a look at the source code of the page and see what error you are receiving

[MetricsCC]

I am not receiving an error.  It just simply accepts the future date without preventing me from entering the record.  This is a submission form, not an update form in case that makes a difference. 

 

<script>

function pastDateValidation()

{

    var d=document.getElementById("mcc_bootcamp_date").value;

        if(new Date(d) > new Date())

    {

        alert("Select a date which is prior to today.");

        document.getElementById("mcc_bootcamp_date").value="";

    }

 

}

document.getElementById('mcc_bootcamp_date').onchange = pastDateValidation;

 

</script>

[MetricsCC]

Thank you for  your assistance.  Preceding all "mcc_bootcamp_date" field names with "InsertRecord" enabled this to function properly.  You cannot enter a future date in this date field.  Thank you again.

[BenWaFj]

For anyone using UK dates: the above did not work for me. 

This did though:

<script type="text/javascript">
document.addEventListener('DataPageReady', assignAdditionalListeners);
let dateInputField= document.getElementById("InsertRecordDate");

function assignAdditionalListeners() {
dateInputField.addEventListener('change', alertPastDate);
document.removeEventListener('DataPageReady', assignAdditionalListeners);
}

function alertPastDate(event) {

dateChosen = dateInputField.value;
split = dateChosen.split('/');
var dateChosenConverted = [split[1], split[0], split[2]].join('/');
console.log(dateChosenConverted);

if ( new Date( dateChosenConverted ) > new Date() ) {
alert( 'No Future Dates Accepted' );
dateInputField.value = "";
}
}

</script>

 

[Kurumi]

Hi - these new posts might help:

 

[futurist]

Hi - these might be useful

 

The key difference tho is the script that is going to be placed on the footer. You can use the following script instead:

<script language="javascript">
    var today = new Date();
    var dd = String(today.getDate()).padStart(2, '0');
    var mm = String(today.getMonth() + 1).padStart(2, '0');
    var yyyy = today.getFullYear();

    today = yyyy + '-' + mm + '-' + dd;
    $('#date_picker').attr('max',today);
</script>

[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:

[roattw]

Hmm.  This didnt work for me.

[PotatoMato]

Hi! Just to add, Caspio has released a new article for disabling future dates: https://howto.caspio.com/tech-tips-and-articles/disabling-past-or-future-dates-in-calendar/

 

-Potato