How to restrict the 'Date' variable in a catalog item to only allow only the current month clickable

[Rakesh_Damji]

We have a request to limit our users from selecting a date in a catalog request item to the current month only. For example, today is March 8, 2024, we want to ONLY allow any day in the current month (March) to be selectable. We do not want users being able to select a past date in a previous month, or a future date in the next month.

[Aravind2799]

Here are two general approaches you can use to restrict the clickable dates in a ServiceNow catalog item's 'Date' variable to only the current month:

Approach 1: UI Script (Client-Side)

1. Write a UI Script: Create a UI script for the catalog item that will manipulate the date picker control.
2. Access the Date Picker: Use JavaScript code to access the date picker element associated with the 'Date' variable. You might need to reference the variable name or a DOM element ID.
3. Filter Dates: Write logic within the script to disable all dates except those within the current month. This could involve functions to get the current date and compare it with the selected date in the picker.
4. Disable Past/Future Dates: Based on the comparison, disable click events or visually gray out dates that fall outside the current month.

Here's a basic UI script example (modify it based on your specific UI framework):

// Assuming 'datepicker' is the ID of the date picker element

function onChange() {
  var today = new Date();
  var selectedDate = datepicker.getValue();

  if (selectedDate.getMonth() != today.getMonth()) {
    datepicker.setDateRange(null, null); // Disable all dates
  }
}

datepicker.onChange = onChange;

This approach provides a more user-friendly experience by directly restricting clickable dates in the date picker.

Thanks 
Aravind Panchanathan

[Amit Pandey]

Hi @Rakesh_Damji 

I had a similar requirement in past and had achieved it using onChange client script-

 var selectedDate = new GlideDateTime(newValue),
        beginningOfThisMonth = new GlideDateTime().setDay(1).setMonthUTC(selectedDate.getMonthUTC()).setYearUTC(selectedDate.getYearUTC()).setUTCHours(0).setUTCMinutes(0).setUTCSeconds(0).setUTCMilliseconds(0),
        endOfThisMonth = new GlideDateTime().setDayUTC(1).setMonthUTC(selectedDate.getMonthUTC() + 1).setYearUTC(selectedDate.getYearUTC()).setUTCHours(0).setUTCMinutes(0).setUTCSeconds(0).setUTCMilliseconds(0).subtract(1000);

    if (selectedDate.before(beginningOfThisMonth) || selectedDate.after(endOfThisMonth)) {
        g_form.addErrorMessage("You can only select dates within the current month.");
        g_form.setValue(control.name, oldValue);
    }

[Its_Azar]

Hi @Rakesh_Damji 

Firstly, create a client script that validates the selected date and restricts it to the current month. it should trigger on both the onload and onchange events of the date picker field.

Within the script, validate whether the selected date falls within the current month. If it doesn't, display an error message prompting users to select a date within the current month. 

Attach this client script to the date picker field in the catalog request item form to enforce the desired restriction.

find the below client script below.

function onChange(control, oldValue, newValue, isLoading) {
    if (isLoading || newValue == '') {
        return;
    }
    
    var selectedDate = new GlideDateTime(newValue);
    var currentDate = new GlideDateTime();

    if (selectedDate.getMonthOfYear() !== currentDate.getMonthOfYear()) {
        g_form.addErrorMessage('Please select a date within the current month.');
        g_form.clearValue(control.name);
    }
}

If this helps kindly accept the response thanks much

Regards

Azar

[shyamkumar VK]

Hi @Rakesh_Damji , No code is Required for this we can Implement this Via UI Policy  , below I have added screenshot for your Reference 

function onCondition() {
    g_form.addInfoMessage("date cannot be selected in the past & Future")
    g_form.clearValue('date_validation');
}

Regards,

Shyamkumar