0

According to documentation of lightning-output-field which is used in lighting-record-view Time is not Support Record Type. So if we want to display time field in lightning-record-view we can't. Do we have any other component to display time field. here is list of fields supported in lightning-output-field

https://developer.salesforce.com/docs/component-library/bundle/lightning-output-field/documentation

enter image description here

1 Answer 1

0

We can create our own component and use them inside lightning-record-view-form to display time data type. outputTime.html

<template>
    <label class="slds-form-element__label" for="text-input-id-1">{_fieldLabel}</label>
    <output id="text-input-id-1" class="slds-show" >{timeValue}</output>
</template>

outputTime.js

import { LightningElement, api, track,wire } from 'lwc';
import LOCALE from '@salesforce/i18n/locale';
import { getRecord  } from 'lightning/uiRecordApi';
import { getObjectInfo } from 'lightning/uiObjectInfoApi';

export default class OutputTime extends LightningElement {
    @api recordId;
    @track _fieldApiName;
    @track _value;
    _objectName;
    _fieldName;
    _fieldLabel;
    @api
    get fieldApiName() {
        return this._fieldApiName;
    };
    set fieldApiName(value) {
        this._fieldApiName = value;
        if(this._fieldApiName){
            this._objectName = this._fieldApiName.split('.')[0];
            this._fieldName = this._fieldApiName.split('.')[1];
        } else {
            this._objectName = undefined;
            this._fieldName = undefined;
        }
    };
    @wire(getRecord,{recordId: '$recordId',fields: '$_fieldApiName'})
    objRec({error, data}) {
        if (data) {
            this._value = data.fields[this._fieldName].value;
        } else {
            this.error = error;
        }
    }
    @wire(getObjectInfo,{objectApiName: '$_objectName'})
    objectInfo({error, data}) {
        if (data) {
            this._fieldLabel = data.fields[this._fieldName].label;
        } else {
            this._fieldLabel = '';
        }
    }
    get timeValue() {
        if(this._value && this._value.split(':').length > 2){
            let formated = new Intl.DateTimeFormat(LOCALE, {timeStyle: "medium"}).format(new Date(2020, 1, 1, this._value.split(':')[0], (this._value.split(':')[1]).split('.')[0], 0));
            return formated;
        } else {
            return '';
        }
    }
}

This component will display different format time depending upon your locale. We don't need to worry about timezones because Time field like Date field is not dependent on timeZone. Because we need both time and date to apply timezones to change date and time.

So to use this component in lightning-record-view here is an example

<lightning-record-view-form
            record-id={recordId}
            object-api-name="Account">
        <div class="slds-box">
            <lightning-output-field field-name="Name">
            </lightning-output-field>
            <c-output-time record-id={recordId} field-api-name="Account.Customtime__c"></c-output-time>
        </div>
    </lightning-record-view-form>

We have to pass recordId and fieldApiName which is equal to "objectname.fieldName".

This component will work with or without lightning-record-view-form.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .