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

[Venkatesh098765]

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?

[MaxMixali]

✅ 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.

[lakshaysharma]

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;

[Ankur Bawiskar]

@Venkatesh098765 

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

[lakshaysharma]

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