Javascript to prevent bulk update based on date values

[Roosta]

Hello all,

I have been tring to modify a script for use in a bulk edit from with no success, the update needs to be prveted if the "Date From" is less than or equal to todays date or greater than "Date to" in the script below the Element ID's are Date From = ("BulkEditCTS_Auditor_Appointments_Schedule_Send_Date") and Date To = ("BulkEditCTS_Auditor_Appointments_Appointment_Date_Txt").

The script I have is:

 

<script type="text/javascript">
document.addEventListener('DataPageReady', function(event) {
    // Get the "Date From" and "Date To" field elements
    var dateFromField = document.getElementById("BulkEditCTS_Auditor_Appointments_Schedule_Send_Date"); // Change 'InsertRecordFieldName1' to the actual field name
    var dateToField = document.getElementById("BulkEditCTS_Auditor_Appointments_Appointment_Date_Txt"); // Change 'InsertRecordFieldName2' to the actual field name

    // Add event listener for when the form is submitted
    document.getElementById('caspioform').addEventListener('submit', function(event) {
        // Get the values of the "Date From" and "Date To" fields
        var dateFromValue = new Date(dateFromField.value);
        var dateToValue = new Date(dateToField.value);
        
        // Get today's date
        var today = new Date();
        
        // Set the time to 00:00:00 for accurate comparison
        today.setHours(0, 0, 0, 0);

        // Check if "Date From" is greater than today's date
        if (dateFromValue > today) {
            // Prevent form submission
            event.preventDefault();
            // Alert the user about the error
            alert('"Date From" cannot be greater than today\'s date. Please correct the date.');
            return;
        }
        
        // Check if "Date From" is greater than "Date To"
        if (dateFromValue > dateToValue) {
            // Prevent form submission
            event.preventDefault();
            // Alert the user about the error
            alert('"Date From" cannot be greater than "Date To". Please correct the dates.');
            return;
        }
    });
});
</script>

At the moment this does nothing when the date criteria entered should be showing an alert, any assistance would be greatly apprecaited and thanks for looking!

Cheers, Roosta

 

 

[Volomeister]

Hi @Roosta

Are "Date to" and "Date from" required fields?
Can one enter "Date to" and not enter "Date from" and vice versa?

[Roosta]

@Volomeister

Excellent question I hadn't thought of that, there is another field in the bulkedit form Element ID "BulkEditCTS_Auditor_Appointments_Schedule_Send" and this script should only run if its values is "Yes" then both fields would be required in this scenario.

Thanks for looking, Roosta

 

[Volomeister]

Hi @Roosta

You can test this script instead. It should be added to the header or footer of the results page screen:
 

<script>
if (document.enableDateChecker == undefined) {
 const dateFromFieldID = 'BulkEditCTS_Auditor_Appointments_Schedule_Send_Date'
 const dateToFieldID = 'BulkEditCTS_Auditor_Appointments_Appointment_Date_Txt'
 
 
const disableUpdateBTN = () => {
let updateBTN = document.querySelector('.ButtonsCtnr .ActionButton')
updateBTN.style.background = '#EFEFEF'
updateBTN.style.pointerEvents = 'none'
}

const enableUpdateBTN = () => {
let updateBTN = document.querySelector('.ButtonsCtnr .ActionButton')
updateBTN.style.background = ''
updateBTN.style.pointerEvents = ''
}
const removeErrorMessage = () => {
let errMessage=document.querySelector('#customErrorMessage')
if (errMessage==null) {return}
errMessage.remove()
}


const showErrorMessage = (btn, message) => {
btn.parentElement.insertAdjacentHTML('afterend', `<div data-cb-name="HeaderErrorMsg" id="customErrorMessage" class="cbBulkFormCommonError">${message}</div>`)
}

const enableDateChecker = () => {
let dateFromField = document.getElementById(dateFromFieldID)
let dateToField = document.getElementById(dateToFieldID)
dateToField.addEventListener('change', e=> {
removeErrorMessage()
enableUpdateBTN()
if(e.target.value == '') {return}
let dateFromValue = new Date(dateToField.value)
let dateToValue = new Date(e.target.value)
let today = new Date(dateFromField.value)
today.setHours(0, 0, 0, 0)
if (dateToValue < today) { 
showErrorMessage(e.target, `"Date To" cannot be less than today's date. Please correct the date.`)
disableUpdateBTN()
}
else if (dateFromValue < dateToValue) {
showErrorMessage(e.target, `"Date To" cannot be less than "Date From". Please correct the dates.`)
disableUpdateBTN()
}
})

dateFromField.addEventListener('change', e=> {
removeErrorMessage()
enableUpdateBTN()
if(e.target.value == '') {return}
let dateFromValue = new Date(e.target.value)
let dateToValue = new Date(dateToField.value)
let today = new Date()
today.setHours(0, 0, 0, 0)

if (dateFromValue > dateToValue) {
showErrorMessage(e.target, `"Date From" cannot be greater than "Date To". Please correct the dates.`)
disableUpdateBTN()
}
else if (dateFromValue > today) { 
showErrorMessage(e.target, `"Date From" cannot be greater  than today's date. Please correct the date.`)
disableUpdateBTN()
}
})

}

document.enableDateChecker = enableDateChecker
}
</script>

And this part should be added to the footer of the bulk edit screen:

 

<script>
document.enableDateChecker()
</script>

 

[Roosta]

@Volomeister 

Thanks for the code it is greatly appreciated, I have had to modify it slightly to get it to work with UK date localisatiions so looks like this now:

 

<script>
if (document.enableDateChecker == undefined) {
 const dateFromFieldID = 'BulkEditCTS_Auditor_Appointments_Schedule_Send_Date'
 const dateToFieldID = 'BulkEditCTS_Auditor_Appointments_Appointment_Date_Txt'
 
 
const disableUpdateBTN = () => {
let updateBTN = document.querySelector('.ButtonsCtnr .ActionButton')
updateBTN.style.background = '#EFEFEF'
updateBTN.style.pointerEvents = 'none'
}

const enableUpdateBTN = () => {
let updateBTN = document.querySelector('.ButtonsCtnr .ActionButton')
updateBTN.style.background = ''
updateBTN.style.pointerEvents = ''
}
const removeErrorMessage = () => {
let errMessage=document.querySelector('#customErrorMessage')
if (errMessage==null) {return}
errMessage.remove()
}


const showErrorMessage = (btn, message) => {
btn.parentElement.insertAdjacentHTML('afterend', `<div data-cb-name="HeaderErrorMsg" id="customErrorMessage" class="cbBulkFormCommonError">${message}</div>`)
}

const enableDateChecker = () => {
let dateFromField = document.getElementById(dateFromFieldID)
let dateToField = document.getElementById(dateToFieldID)
dateToField.addEventListener('change', e=> {
removeErrorMessage()
enableUpdateBTN()
if(e.target.value == '') {return}
let dateFromParts = dateFromField.value.split('/')
let dateToParts = e.target.value.split('/')
let dateFromValue = new Date(`${dateFromParts[1]}/${dateFromParts[0]}/${dateFromParts[2]}`)
let dateToValue = new Date(`${dateToParts[1]}/${dateToParts[0]}/${dateToParts[2]}`)
let today = new Date()
today.setHours(0, 0, 0, 0)
if (dateToValue < today) { 
showErrorMessage(e.target, `Appointment Date cannot be less than today's date.`)
disableUpdateBTN()
}
else if (dateFromValue >= dateToValue) {
showErrorMessage(e.target, `Appointment Date cannot be greater than or equal to Scheduled Date.`)
disableUpdateBTN()
}
})

dateFromField.addEventListener('change', e=> {
removeErrorMessage()
enableUpdateBTN()
if(e.target.value == '') {return}
let dateFromParts = e.target.value.split('/')
let dateToParts = dateToField.value.split('/')
let dateFromValue = new Date(`${dateFromParts[1]}/${dateFromParts[0]}/${dateFromParts[2]}`)
let dateToValue = new Date(`${dateToParts[1]}/${dateToParts[0]}/${dateToParts[2]}`)
let today = new Date()
today.setHours(0, 0, 0, 0)

if (dateFromValue >= dateToValue) {
showErrorMessage(e.target, `Scheduled Date cannot be greater than or equal to Appointment Date`)
disableUpdateBTN()
}
else if (dateFromValue <= today) { 
showErrorMessage(e.target, `Scheduled Date cannot be less than or equal to today's date.`)
disableUpdateBTN()
}
})

}

document.enableDateChecker = enableDateChecker
}
</script>

Also tweaked the comparions for my use case, the only other problem I was having is there is a drop down field to select if you want to "Schedule Dates" the dateFromValue in this scenario which then hides the date field and if it had a date in it an error message is displayed so I added this script in the header above your code to clear the date field if the drop down value changed:

<script type="text/javascript">
document.addEventListener('DataPageReady', function() {
    // Get dropdown field ID
    var dropdownField = document.getElementById("BulkEditCTS_Auditor_Appointments_Schedule_Send");
    
    // Get Date field ID
    var dateField = document.getElementById("BulkEditCTS_Auditor_Appointments_Schedule_Send_Date");
    
   // On dropdown field change clear the date field
  
    dropdownField.addEventListener('change', function() {
        if (dropdownField.value === "Clear Date") {
            dateField.value = ""; // Clear the date field
        }
    });
});
</script>

I suppose I could have tried to have added an onchange event into the main code so it only ran when the dropdown was "Yes" but this was a quicker and easier solution for me and it works!

The only other thing I want to look at is the message text, due to the bulk form layout it only partially visble a the bottom of the page and you have to scroll down to see it (see below) but will have a play and see what I come up with.

Again, thank you for your help it's has been extremely useful and got me most of the way there

Cheers, Roosta