How to make date picket as read only in UI page

[ramesh_r]

Hi Team,

When clicking on the UI action the is one pop-up page will open(UI page). and I need to make read-only for some scenarios, for that, I am using the below line. it's making the date field read only but still, the date picker is enable

I want to make read-only both date picker and date place.. Please help to resolve this

document.getElementById('date').setAttribute('readonly', 'readonly').

   <div id="ignore_date" class="is-required" style="visibility:hidden">
						<div class="col-sm-4 control-label"><span class="required-marker"></span>$[if(onlyFalsePositive == 'true'){gs.getMessage("Ignore detection until");}else{gs.getMessage("Until");}]</div>
                        <div class="col-sm-5 date-control">
                           <g:ui_date name="date" id="date" class="form-control" style="resize:none" />
                            <div id="until_date_error_messages" style="display:none;" >
                                <div class="outputmsg_div"></div>
                            </div>
                        </div>
                    </div>
                </div>

 

[Community Alums]

Hi @ramesh.r ,

Here is a similar question should help you :https://community.servicenow.com/community?id=community_question&sys_id=bcb50321db1cdbc01dcaf3231f96...

Mark my answer correct & Helpful, if Applicable.

Thanks,
Sandeep

[Ankur Bawiskar]

Hi,

why not hide that date picker box if you want to make it readonly using DOM manipulation?

Regards
Ankur

[-O- · Accepted solution]

Add the following as "Client script" on the UI Page record:

function u_setUIDateReadOnly (name, readOnly) {
	return readOnly ? u_enableUIDate(name) : u_disableUIDate(name);
}

function u_enableUIDate (name) {
	return jQuery(document.getElementsByName(name))
		.attr('readonly', 'readonly')
		.nextAll('.input-group-btn')
		.find('a')
		.attr('disabled', 'disabled');
}

function u_disableUIDate (name) {
	return jQuery(document.getElementsByName(name))
		.removeAttr('readonly', 'readonly')
		.nextAll('.input-group-btn')
		.find('a')
		.removeAttr('disabled', 'disabled');
}

Then you can call

u_setUIDateReadOnly('name', true);

to make the control read-only (completely), or you can call

u_setUIDateReadOnly('name', false);

to make it read-write again.

To start the page with it read-only, you would add to the UI Page HTML:

	<script type="text/javascript">
		addRenderEvent(u_disableUIDate);

		function u_disableUIDate() {
			console.log(u_setUIDateReadOnly('date', true));
		}
	</script>

Of course you might want to replace the hard coded name 'date' with Jelly variables.

Also it would be nice to also mark the field as not-mandatory when setting it to be read-only, to avoid confusion and user frustration. You could create the necessary functions using the provided ones as template.