Modal to let customer know they have entered a future date

[Brad Campbell]

Hi Community,

We have a use case for a new catalogue item where the user is to enter a value in a variable of date / time type but this date cannot be in the future. I found a great article which details how to do this and display an error message. But our preference is to use sp modal as in our experience customers see traditional error message pop ups as being a system rather than user issue.

I've used modals before and know how to create them, where I am struggling is the correct code to use comparing the variable (submitted_date) to the current date time so it knows to display the modal when the user tries to submit.

function onSubmit() {

    var submittedDate = g_form.getValue('submitted_date');

    if (typeof spModal != 'undefined' && !g_form._hasConfirmed && ??) {

        spModal.open({
            message: 'Date cannot be in the future',
            title: 'Future Date',
            buttons: [{
                label: 'OK',
                cancel: true
            }, ]
        }).then(function(confirm) {
            if (confirm) {
                g_form._hasConfirmed = true;
                if (typeof g_form.orderNow != 'undefined') {
                    g_form.orderNow();
                } else {
                    g_form.submit();
                }
            }
        });

        return false;
    }
}

Any help appreciated as always.

[dpac_nick]

Hi @Brad Campbell , consider leveraging JavaScript Date object for comparing dates. Refer this code snippet: 

function onSubmit() {
	
    var dateTime = new Date();
    var actualDate = formatDate(dateTime, g_user_date_format);
    var currentDateVal = getDateFromFormat(actualDate, g_user_date_format);

    var dateFromField = getDateFromFormat(g_form.getValue('selected_date_field'), g_user_date_format);

    if (dateFromField > currentDateVal) { // later date will have larger integer value
		// Future date selected

        return false;
    }

}

[Brad Campbell]

Thanks for the response.

Unfortunately it doesn't seem to be working, this could be due to where I have inserted / amended your code though...

function onSubmit() {
	
    var dateTime = new Date();
    var actualDate = formatDate(dateTime, g_user_date_format);
    var currentDateVal = getDateFromFormat(actualDate, g_user_date_format);

    var dateFromField = getDateFromFormat(g_form.getValue('submitted_date'), g_user_date_format);

    if (typeof spModal != 'undefined' && !g_form._hasConfirmed && dateFromField > currentDateVal) {
		        spModal.open({
            message: 'Date cannot be in the future. Please amend before submitting your request.',
            title: 'Future Date',
            buttons: [{
                label: 'OK',
                cancel: true
            }, ]
        }).then(function(confirm) {
            if (confirm) {
                g_form._hasConfirmed = true;
                if (typeof g_form.orderNow != 'undefined') {
                    g_form.orderNow();
                } else {
                    g_form.submit();
                }
            }
        });

        return false;
    }

}

[dpac_nick]

Please check if type of 'submitted_date' field is date, also try to look for values that are getting set in date fields.

[Brad Campbell]

Hi Nick,

The submitted_date is the catalog item variable and is of date/time type rather than date. It is necessary to keep it as such due to its use elsewhere in a flow.

Thanks