- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
03-08-2024 01:49 PM - edited 03-08-2024 01:52 PM
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.
Solved! Go to Solution.

- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
03-09-2024 12:23 PM
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.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
03-09-2024 06:32 AM
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
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
03-09-2024 08:03 AM
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);
}
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
03-09-2024 08:30 AM
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
Kind Regards,
Mohamed Azarudeen Z
Developer @ KPMG
Microsoft MVP (AI Services), India
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
03-09-2024 11:14 AM
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
Regards,
Shyamkumar