How to Prepopulate a Date Field with Validation to Allow Future Dates Only

[JGuerrero0323]

Hi everyone,

I’m working on a ServiceNow Catalog item and need help with configuring the behaviour of a date field (Required by Date). The goal is to prepopulate the field with a specific date (current date + 2 days) when the form loads, while still allowing users to modify it to any date in the future.

The Scenario:

• Catalog Item Example:
  • The Required by Date field should:
    1. Automatically populate with the current date + 2 days when the form loads.
    2. Allow users to change the date, but only to a future date (i.e., today’s date + 1 day or later).
    3. Not be a mandatory field—users can leave it blank if they want.

The Problem:

I tried creating a client script to handle this behaviour, but it doesn’t work as expected. Here’s what’s happening:

1. The Required by Date field is not prepopulated as intended.
2. Users are able to select past dates, which defeats the purpose of the validation.

   Additionally, when I reload the customer portal, I see a red error message stating:

   "There is a JavaScript error in your browser console."

   I’m new to ServiceNow and not entirely sure how to debug or check the error in more detail. If anyone can guide me on how to debug this issue, I’d really appreciate it!

[Ankur Bawiskar · Accepted solution]

@JGuerrero0323 

you need to have onChange validation on that date variable to stop users from selecting past date

something like this

function onChange(control, oldValue, newValue, isLoading, isTemplate) {
    if (isLoading || newValue === '') {
        return;
    }
    var today = new Date().getTime();
    var selectedDate = new Date(newValue).getTime();

    if (today > selectedDate) {
        alert('You cannot select past date');
        g_form.clearValue('selected_date');
        g_form.setMandatory('selected_date');
    }
}

If my response helped please mark it correct and close the thread so that it benefits future readers.

[Runjay Patel]

Hi @JGuerrero0323 ,

you need to write two client script one for onload and second for Onchange.

use below script .

onload

function onLoad() {
// Create GlideDateTime object for current time
var gdtNow = new GlideDateTime();

// Add 2 days to the current date
gdtNow.addDays(2);

// Get the date in the format required by ServiceNow (YYYY-MM-DD)
var requiredByDate = gdtNow.getDate().toString();

// Set the value of the 'Required by Date' field
g_form.setValue('required_by_date', requiredByDate);
}

Onchange for required by date.

function onChange(control, oldValue, newValue, isLoading) {
// Avoid processing if the form is still loading
if (isLoading) return;

// Get the current date and the selected date
var gdtNow = new GlideDateTime();
var gdtSelected = new GlideDateTime(newValue);

// Add 1 day to the current date to create the minimum valid date
gdtNow.addDays(1);

// Compare the selected date with the minimum allowed date
if (gdtSelected.before(gdtNow)) {
// If selected date is before today + 1 day, reset to the minimum date
g_form.setValue('required_by_date', gdtNow.getDate().toString());

// Display an error message for the user
g_form.showFieldMsg('required_by_date', 'Please select a future date (today + 1 day or later).', 'error');
}
}

Accept and mark helpful if my response helped you

[JGuerrero0323]

Hi Runjay,

Thank you so much for sharing this approach—I really appreciate your help! The scripts you provided make a lot of sense, and I think they’re a great starting point for me.

That said, I couldn’t quite get the desired output when I implemented them. I’m wondering if I might be missing something—either in the script itself or perhaps a setting that needs to be adjusted for it to work correctly.

Do you have any tips on how to troubleshoot in situations like this? For instance, how do you usually test if the issue lies in the code or in the configuration?

Thanks again for your support and guidance!

Best regards, Juan

[Ankur Bawiskar]

@JGuerrero0323 

so it should default to current date+2 days

you can set default value in that variable like this and it will auto populate when form loads.

No need of client script or script include

User can still edit that

javascript: var gdt = new GlideDateTime(date);
        gdt.addDaysUTC(2);
        gdt.getDate();

If my response helped please mark it correct and close the thread so that it benefits future readers.

[Ankur Bawiskar]

@JGuerrero0323 

Hope you are doing good.

Did my reply answer your question?

If my response helped please mark it correct and close the thread so that it benefits future readers.