How to make date text box Read-Only in Service Portal

[Kyu Min]

Hi all,

I'm kind of new developing in SN.

I need to find a way to make read-only the text box of the date variable so force the end user to use the calendar (datepicker) to select the date in Service Portal.

The image is from the standard UI. The text box is disabled but I'm able to select the date with the calendar (datepicker).

So far, I've been able to make it work in the standard UI with this Catalog Client Script:

UI Type: Both

Type: onLoad

function onLoad() {

    // Checks if the form is loaded in mobile or desktop

    if (window == null) {

          // For Service Portal - Currently not working

          //g_form.hasField('date_variable').style.backgroundColor = '#F0F0F0';

          //g_form.hasField('date_variable').readOnly = true;

          document.observe("dom:loaded", function(){

                $('date_variable').setAttribute('disabled', true);

          });

    } else {

          // For standard UI

          g_form.getControl('date_variable').style.backgroundColor = '#F0F0F0'; // Sets gray color to background

          g_form.getControl('date_variable').readOnly = true; // Sets the text box as RO

    }

}

g_form.getControl() does not work in Service Portal.

I've researched all day and still haven't found a way to make it work in SP.

Any help is greatly appreciated.

Thanks!

[gmccullough]

Works great in the main application, but Service Portal doesn't like Jelly. 🙂  So no, I had created a Client script with that checks to see if it is in MM-dd-yyyy HH:mm:ss format:

UI Type: All

Script:

function onChange(control, oldValue, newValue, isLoading) {
if (isLoading || newValue == '') {
return;
}

var PreferredDateFormat = "MM-dd-yyyy HH:mm:ss";
var effectiveDate = g_form.getValue('effective_date');
var GetDateFormat = getDateFromFormat(effectiveDate, PreferredDateFormat);

if (GetDateFormat == false) {
alert ("Effective date " + effectiveDate + " is not in the correct date format. Please enter the date in this format: " + PreferredDateFormat);
g_form.clearValue('effective_date');

return false; // Prevents the form from submitting
}
}

[Dave Smith1]

Ouch. An effective date required a time also?

nb: I can see non-US users balking at a confusing date format... just look at the adverse feedback Microsoft have received now they've forced all dates in Skype to conform to US format.

[gmccullough]

What I really wanted them to do is use the date picker. But I couldn't get that to work in both portal and main application.

[Jeff316]

I need to have this feature as well. Today on the portal date field if you enter something like 6/20 in the date field, when you leave the field it changes the display to the correct format, HOWEVER when you submit that catalog item the date field you map to will set the date as the current date. This is in jakarta.  If I could force the user to only use the calendar picker I would be fine, otherwise, I cannot compel the user to enter the correct format because the field will visually take the 6/20 and format it correctly visually in the field but you won't get that date into the target record.

[xiaix]

Requirement also needed here.

This is what I came up with that works pretty great:

Widget Client Script function:

HTML: