fonteva-design-guide
Version:
## Dev, Build and Test
56 lines (55 loc) • 2.54 kB
HTML
<template>
<c-pfm-text if:true={label} type="label" class={backendLabelClass}>{label}</c-pfm-text>
<div class={classes}>
<div class="pfm-input_date-range-tile" onclick={openPopover} tabindex="0" onfocus={openPopover}>
<div>
<c-pfm-output-field type="date" value={fromOutput} options={formatOptions}></c-pfm-output-field> -
<c-pfm-output-field type="date" value={toOutput} options={formatOptions}></c-pfm-output-field>
</div>
<div>
<lightning-icon icon-name="utility:event" size="xx-small"></lightning-icon>
</div>
</div>
<div class="pfm-input_date-range-popover">
<c-pfm-row wrap pull="xx-small">
<c-pfm-column padding="horizontal:xx-small, bottom:small" size="1:1">
<c-pfm-input
backend={backend}
type="date"
name={fromValue}
val={val}
readonly={fromReadOnly}
label={fromLabel}
tabindex={fromTabIndex}
required={required}
data-name={fromName}
>
</c-pfm-input>
</c-pfm-column>
<c-pfm-column padding="horizontal:xx-small, bottom:small" size="1:1">
<c-pfm-input
backend={backend}
type="date"
name={toValue}
val={val}
readonly={toReadOnly}
label={toLabel}
tabindex={toTabIndex}
required={required}
data-name={toName}
>
</c-pfm-input>
</c-pfm-column>
</c-pfm-row>
<c-pfm-row if:true={showError}>
<c-pfm-text size="small" color="danger" margin="bottom:small">
{errorMessageFromBeforeTo}
</c-pfm-text>
</c-pfm-row>
<c-pfm-row align="center">
<c-pfm-button variant="outline" label={cancelLabel} onclick={cancelPopover} disable-loader></c-pfm-button>
<c-pfm-button label={applyLabel} onsubmit={saveHandler} data-name="applyState"></c-pfm-button>
</c-pfm-row>
</div>
</div>
</template>