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

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

Rakesh_Damji — Fri, 08 Mar 2024 21:52:06 GMT

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.

Re: How to restrict the 'Date' variable in a catalog item to only allow only the current month click

Aravind2799 — Sat, 09 Mar 2024 14:32:15 GMT

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)

Write a UI Script: Create a UI script for the catalog item that will manipulate the date picker control.
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.
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.
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

Re: How to restrict the 'Date' variable in a catalog item to only allow only the current month click

Community Alums — Sat, 09 Mar 2024 16:03:48 GMT

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); }

Re: How to restrict the 'Date' variable in a catalog item to only allow only the current month click

Its_Azar — Sat, 09 Mar 2024 16:30:52 GMT

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.

If this helps kindly accept the response thanks much

Regards

Azar

Re: How to restrict the 'Date' variable in a catalog item to only allow only the current month click

shyamkumar VK — Sat, 09 Mar 2024 19:14:52 GMT

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

Re: How to restrict the 'Date' variable in a catalog item to only allow only the current month click

OlaN — Sat, 09 Mar 2024 20:23:30 GMT

Hi,

Prohibiting date selection by removing dates before and after the current month is not doable without DOM manipulation, which is to be avoided.

But you can easily implement a UI policy and UI policy action that clears the value if the user selects a invalid date.

No code is required (or almost none depending on your needs).

See example below.

Re: How to restrict the 'Date' variable in a catalog item to only allow only the current month click

Rakesh_Damji — Thu, 14 Mar 2024 15:26:02 GMT

Thank you OlaN for your helpful suggestion. We are not yet on Washington (still on Utah), but were were able to implement your suggestions and they work great. Much appreciated.

Re: How to restrict the 'Date' variable in a catalog item to only allow only the current month click

karan15 — Tue, 14 May 2024 04:27:51 GMT

am not getting option to add "Field Message"

Re: How to restrict the 'Date' variable in a catalog item to only allow only the current month click

OlaN — Sat, 18 May 2024 19:39:00 GMT

I believe this option was introduced in the Washington release.

Have you upgraded yet?

Re: How to restrict the 'Date' variable in a catalog item to only allow only the current month click

Julien Sanchez — Fri, 18 Oct 2024 02:00:09 GMT

How would i do this but for specific days of the week instead of month range?

Re: How to restrict the 'Date' variable in a catalog item to only allow only the current month click

Julien Sanchez — Fri, 18 Oct 2024 02:08:22 GMT

Never Mind, the option for trends lets you select dates.