How to set value for date-time field by JavaScript in CRM Portal

Date-time fields in CRM Portal is a bit tricky when it comes to setting value dynamically using JavaScript. Behind the scene there are two HTML input fields that we need to worry about.

First is the field that actually contains the value that will be submitted to the server. This field has the CRM attribute name as its HTML ID. This field is not displayed on the page. The second is the field that holds the display value and enables the date-time picker. Below is what the HTML of these fields would look like:

We’d need to set both of these fields in order for the date-time field to work correctly.

The trick is the value that you set for these fields need to be in a particular format. For the submit field, the value should be a UTC date-time string in the format 2018-07-24T02:13:36.0000000. Note that the fractional second part (the last part) requires 7 digits.

For the display field, the value should be a local date-time string in the format determined by the current page (based on the page’s localisation). You can find this format in the data-date-format attribute of the HTML element for the display field.

Luckily CRM Portal uses moment.js by default and we have access to this library on our pages. This makes converting and formatting date-time easy. Below is the complete code to set value for a date-time field. Please review the inline comments.

//fieldId: ID (CRM attribute name) of the field we are setting.
//dateValue: The date-time value to set to. This should be of type Date. 
function setDateTimeFieldValue(fieldId, dateValue) {
	//Get the submit field
	var $submitField = $("#" + fieldId);

	//Get the display field
	var $displayField = $submitField.nextAll(".datetimepicker").children("input");

	//Get the display date format
	var dateFormat = $displayField.attr("data-date-format");

	//Set the submit field. Remember this needs to be in UTC and the format must be exact.
	$submitField.val(moment.utc(dateValue).format("YYYY-MM-DDTHH:mm:ss.SSSSSSS"));

	//Set the display field using the page's date format
	$displayField.val(moment(dateValue).format(dateFormat));
}
Advertisements

About Bernado

Based in Australia, I am a freelance SharePoint and Dynamics CRM developer. I love developing innovative solutions that address business and everyday problems. Feel free to contact me if you think I can help you with your SharePoint or CRM implementation.
This entry was posted in Adxstudio, CRM, CRM Portal. Bookmark the permalink.

3 Responses to How to set value for date-time field by JavaScript in CRM Portal

  1. K Tue says:

    Hi Bernado,
    Very helpful post regarding setting date/time values on the portals.
    I implemented your function above, however AM/PM part in the date/time field is showing in what appears to be Chinese characters, even though all the CRM settings are in English-US. Any idea why that is happening?

    After clicking submit the date/time is set as expected in CRM though.

    Thanks!

    There’s also two warnings
    Deprecation warning: use moment.updateLocale(localeName, config) to change an existing locale. moment.defineLocale(localeName, config) should only be used for creating a new locale See http://momentjs.com/guides/#/warnings/define-locale/ for more info.

    Deprecation warning: value provided is not in a recognized RFC2822 or ISO format. moment construction falls back to js Date(), which is not reliable across all browsers and versions. Non RFC2822/ISO date formats are discouraged and will be removed in an upcoming major release. Please refer to http://momentjs.com/guides/#/warnings/js-date/ for more info.
    Arguments:
    [0] _isAMomentObject: true, _isUTC: true, _useUTC: true, _l: undefined, _i: 7/25/2018 5:00:00 PM, _f: undefined, _strict: undefined, _locale: [object Object]

    • Bernado says:

      Hi there,

      I have tested this again and am not seeing these issues on my environment. Note that the dateValue you pass into the function should be of type Date, and not a string. Is this what you are doing?

      Also, what is the regional setting of your browser machine?

      • K Tue says:

        Hi Bernado,

        I tried passing dateValue both as a Date object and string. Tried Chrome and Firefox as well.
        They both populated the date/time part fine, it’s just the AM/PM part that’s not in English characters. I actually took a different approach due to time constraints.

        It might be something with the CRM/portal environment setting, so I will test this on a different project.

        Thanks,
        Kleanthi

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s