question Re: Hi All, Want to make a date field readonly but it should allow calender to choose date in worksp in Developer forum

Hi All, Want to make a date field readonly but it should allow calender to choose date in workspace

Venkatesh098765 — Fri, 24 Oct 2025 10:19:32 GMT

Hi All, I Want to make a date field readonly or the input box hould be disabled but it should allow calender to choose date in workspace. I tried with ui policies and client scripts but the calender is also becoming readonly in workspace any approach or suggestion here plz?

Re: Hi All, Want to make a date field readonly but it should allow calender to choose date in worksp

MaxMixali — Fri, 24 Oct 2025 10:24:41 GMT

✅ Requirement:
Make a date field read-only (no typing) but still allow using the calendar picker in ServiceNow Workspace.

------------------------------------------------------------
1) UI Builder Property (Best Option)
------------------------------------------------------------
If you control the Workspace page via UI Builder:

1. Open **UI Builder** → your Workspace page → the Record Form or Data Broker component.
2. Select the date field.
3. In the Properties panel, set:
- Disable text input → true
- or Allow text input → false
- or Input mode → Picker only
4. Save and preview.

Users can still click the calendar icon but can’t type in the field.

------------------------------------------------------------
2) Client Script (Workspace-Safe)
------------------------------------------------------------
If you can’t modify the UI Builder page, use an onLoad Client Script:

```javascript
function onLoad() {
var field = 'u_my_date'; // Replace with your field name

(function hook() {
var ctrl = g_form.getControl(field);
if (!ctrl) return setTimeout(hook, 200);

function findAndBlock() {
var input = ctrl.querySelector('input');
if (!input) return setTimeout(findAndBlock, 200);

input.addEventListener('keydown', e => e.preventDefault(), true);
input.addEventListener('beforeinput', e => e.preventDefault(), true);
input.addEventListener('paste', e => e.preventDefault(), true);
input.style.caretColor = 'transparent';
}
findAndBlock();
})();
}
```

- Prevents typing or pasting.
- Still allows date selection via the calendar button.

------------------------------------------------------------
3) CSS Approach (Quick Alternative)
------------------------------------------------------------
Add this CSS rule in your Workspace page or theme:

```css
[data-field="u_my_date"] input {
pointer-events: none;
caret-color: transparent;
}
[data-field="u_my_date"] button {
pointer-events: auto;
}
```

This disables typing in the text box but keeps the calendar button clickable.

------------------------------------------------------------
4) Optional: Map to Due Date
------------------------------------------------------------
If the selected date must map to `due_date`, use:

```javascript
function onChange(control, oldValue, newValue, isLoading) {
if (isLoading) return;
g_form.setValue('due_date', newValue || '');
}
```

------------------------------------------------------------
Summary
------------------------------------------------------------
✅ Best: Use “Disable text input / Picker only” in UI Builder.
✅ If unavailable: Use client script to block typing.
✅ Quick fix: Use CSS to disable pointer events on text input only.

This ensures users can select dates via calendar but cannot manually type them.

Re: Hi All, Want to make a date field readonly but it should allow calender to choose date in worksp

lakshaysharma — Fri, 24 Oct 2025 10:36:51 GMT

In Workspace by making a date field readonly disables both the input and the calendar icon. Instead of readonly, use the readonly display type at runtime like this in a Client Script (onLoad) by doing this disables direct typing but still allows users to open the calendar picker and select a date.

Example -

g_form.setReadOnly('your_date_field', false); g_form.getControl('your_date_field').readOnly = true;

Re: Hi All, Want to make a date field readonly but it should allow calender to choose date in worksp

Ankur Bawiskar — Fri, 24 Oct 2025 11:44:16 GMT

@Venkatesh098765

If it will be read-only, what purpose it serves to allow them to select calendar?

Re: Hi All, Want to make a date field readonly but it should allow calender to choose date in worksp

lakshaysharma — Fri, 24 Oct 2025 11:47:36 GMT

Here Venkatesh doesn’t want read-only data, he want to restrict input method.

Re: Hi All, Want to make a date field readonly but it should allow calender to choose date in worksp

Ankur Bawiskar — Fri, 24 Oct 2025 12:01:22 GMT

@lakshaysharma

got it.

in that case your script will work in native UI but not sure if it works in Workspace

Did you try that in workspace?

Re: Hi All, Want to make a date field readonly but it should allow calender to choose date in worksp

Community Alums — Fri, 24 Oct 2025 12:06:28 GMT

@Ankur Bawiskar

Yes you are right my script works reliably in Classic/Native UI, but in Workspace it depends on how the field is rendered. For a fully Workspace safe solution using UI Builder properties or the Workspace compatible client script approach would be more reliable.

Re: Hi All, Want to make a date field readonly but it should allow calender to choose date in worksp

Community Alums — Fri, 24 Oct 2025 12:08:02 GMT

@Ankur Yes, you are right my script works reliably in Classic/Native UI, but in Workspace it depends on how the field is rendered. For a fully Workspace-safe solution, using UI Builder properties or the Workspace compatible client script approach would be more reliable.

Re: Hi All, Want to make a date field readonly but it should allow calender to choose date in worksp

Community Alums — Fri, 24 Oct 2025 12:08:49 GMT

@Ankur Bawiskar

Yes, you are right my script works reliably in Classic/Native UI, but in Workspace it depends on how the field is rendered.

Re: Hi All, Want to make a date field readonly but it should allow calender to choose date in worksp

Community Alums — Fri, 24 Oct 2025 12:29:03 GMT

@Ankur Bawiskar Yes, you are right; my script works reliably in the Classic-Native UI, but in Workspace it depends on how the field is rendered.