Date Picker with Start and End dates

[lpolicarpio]

Hi team,

We have a requirement to have a date field in which you can select the start and end dates (like when you're booking a flight or a hotel). Have you implemented something like this in a record producer or widget? Would really appreciate for some ideas on how it can be done.

Thank you!

[BhavaniYamsani]

Hi @lpolicarpio ,

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.

Please mark this as helpful, if you learn something from my answer


Thanks
Yamsani Bhavani
Developer - SN SecOps, Custom Applications, UI Builder, Service Portal

[SohamTipnis]

Hi @lpolicarpio,

Yes, this can be done in ServiceNow, but there isn’t a native date range picker in a Record Producer like the ones we see on flight or hotel booking sites.

A simple way to handle this is by creating two date variables in the Record Producer: one for Start Date and another for End Date. This is the most commonly used approach. You can then add a catalog client script to validate the values, for example, making sure the end date is not earlier than the start date.

If you want a more interactive experience (similar to a single date range picker), it can be achieved by building a custom widget in Service Portal using a JavaScript date range picker library. That widget can capture both dates and pass them to the record.

In most cases though, using two date fields with client-side validation works well and is much simpler to maintain.

You can also refer to the below articles; this will help you understand the concept of start date and end date:

https://www.servicenow.com/docs/r/now-intelligence/reporting/t_CustomizeAStartAndEndDate.html

https://www.servicenow.com/docs/r/field-service-management/field-service-scheduling/dynamic-sched-ta...

https://www.servicenow.com/docs/r/employee-service-management/contract-management-pro/cncore-conf-st...

If you find my answer useful, please mark it as Helpful and Correct. ‌‌‌‌‌‌‌😊

Regards,
Soham Tipnis
ServiceNow Developer ||  Technical Consultant
LinkedIn: www.linkedin.com/in/sohamtipnis10

[lpolicarpio]

Can you recommend a JavaScript library I can look into using? Thanks

[Ankur Bawiskar]

@lpolicarpio 

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! 🙏