Calendar date range picker in a record producer

[Anagha Pradeep1]

Hi everyone,

I have a requirement where, in a Record Producer form, a user should be able to select a date range — “From” (start date) to “To” (end date) — within the same field, similar to what’s shown in the attached screenshot. Currently, the form only allows selecting one date at a time.

Has anyone worked on something similar before or has any idea how this can be implemented? Any suggestions would be really helpful.

Thanks in advance!

[Ankur Bawiskar]

@Anagha Pradeep1 

not possible directly.

You can use variable of type Custom with label and handle this using custom widget which renders this date range and then store the start date and end date in some hidden string variable so that you can use it later.

💡 If my response helped, please mark it as correct ✅ and close the thread 🔒— this helps future readers find the solution faster! 🙏

[BhavaniYamsani]

Hi @Anagha Pradeep1 ,

ServiceNow Record Producers cannot natively support selecting a date range within a single field — because the platform only provides single date or date/time fields.
But there are several practical approaches to achieve the functionality you want.

Below are the recommended approaches depending on how closely you want to match the UI shown in your screenshot.

---

✅ Why you can’t select a date range in one field (OOTB limitation)

In ServiceNow’s native forms (including Record Producers):

• A field can only store one value (e.g., one date).
• Date fields (glide_date, glide_date_time) support picking a single date from the calendar widget.
• There is no built-in "date range picker" widget in the native UI.

So to capture a date range, ServiceNow normally requires two separate fields.

---

✅ Approach 1 (Recommended): Two Fields + UI Enhancement (Client Script)

Keep two fields in the Record Producer:

• start_date
• end_date

Then improve the UX with:

✔ Client script to enforce:

• End date must be ≥ start date
• Auto-populate end date if blank

Client Script Example (onChange)

JavaScript

function onChange(control, oldValue, newValue, isLoading) {

var start = g_form.getValue('u_start_date');

var end = g_form.getValue('u_end_date');

if (start && end && end < start) {

g_form.showFieldMsg('u_end_date', 'End date must be equal or greater than Start date', 'error');

g_form.setValue('u_end_date', '');

}

}

Show more lines

✔ Clean
✔ Safe
✔ Works on native UI and portals
✔ No custom widgets needed

---

✅ Approach 2: Use Service Portal + Custom Date Range UI (Most flexible)

If your Record Producer is used on Service Portal, you can create a custom widget that contains a Date Range Picker, for example using:

• jQuery Date Range Picker
• Bootstrap Date Range Picker
• Airbnb React date-range package

In the widget:

• User selects start + end in one control
• Widget sets two hidden fields in the Record Producer

Example concept (portal widget client controller)

JavaScript

$scope.onDateRangeSelected = function(range) {

g_form.setValue('u_start_date', range.start);

g_form.setValue('u_end_date', range.end);

};

Show more lines

This gives you a UI exactly like your screenshot.

---

✅ Approach 3: UI Builder (Next Experience) – Use Date Range Picker Component

If your Record Producer is part of a Workspace/Now Experience App, you can embed:

✔ The "Date Range Picker" component — available in Now Experience UI Framework

It outputs:

• startDate
• endDate

You then map that data to two fields when submitting the Record Producer.

But note:
Record Producers themselves don’t run in UI Builder — you would submit data programmatically via an API call or Data Resource.

---

❌ What you cannot do

You cannot create a single field in the Record Producer that stores:

2026-04-01 to 2026-04-15

…because no ServiceNow field type supports storing two dates inside one UI widget.

You can only simulate a combined widget but the backend data will still be stored in two fields.

---

⭐ Recommended solution based on simplicity + UX

If you're building a regular Record Producer on the portal:

**➡️ Use two date fields

➡️ Add a custom portal widget to create the combined range picker UI
➡️ Map values to the two fields**

This gives the user the UI you want without breaking platform standards.

However, this approaches are customizable and they are dependent if you are Record Producer is part of them.
If my Response is help, please mark it as correct.


Thanks
Yamsani Bhavani
Developer - SN SecOps, Custom Applications, Platform Customizations