1

我正在尝试使用以下组件使用标准日期选择器，但是当输入的日期不在指定的最小和最大范围内时，我想显示自定义错误消息。但我无法实现它，因为我可以看到标准错误消息。我通过参考：https ://developer.salesforce.com/docs/component-library/bundle/lightning:input/example 实现了相同的功能，在此链接中我可以看到可以显示自定义错误消息。但是对我没有任何帮助，任何人都可以帮忙。 https://developer.salesforce.com/docs/component-library/bundle/lightning:input/documentation 

<lightning:input aura:id="field
                     type="date" 
                     name="MyDatefield" 
                     label="MyDateField" 
                     value="2017-09-07" 
                     min="2017-09-05" 
                     messageWhenRangeUnderflow="Select correct date range1"
                     max="2017-09-22" 
                     messageWhenRangeOverflow="Select correct date range2"
                     onchange="{!c.checkValidity }"
</aura:component>
4

1 回答 1

0

1个月前有人问过这个问题，但如果其他人遇到这个问题，请分享答案。使用闪电的setCustomValidity()和reportValidity()方法。

零件：

    <aura:component >
    <lightning:input aura:id="field"
                     type="date" 
                     name="MyDatefield" 
                     label="MyDateField" 
                     value="2017-09-07" 
                     min="2017-09-05" 
                     max="2017-09-22" 
                     onblur ="{!c.checkValidity }"
             />
</aura:component>

控制器：

({
    checkValidity : function(component, event, helper) {
        var inputCmp = component.find("field");
        inputCmp.setCustomValidity(""); //reset error
        var value = inputCmp.get("v.value");
        console.log('value: '+value);
        var lowerRange =  new Date("2017/09/05"); 
        var higherRange =  new Date("2017/09/22"); 
        if(!inputCmp.checkValidity()){
            if(Date.parse(value)){
                if (Date.parse(value) < lowerRange) {
                    inputCmp.setCustomValidity("Select correct date range1");
                }else if (Date.parse(value) > higherRange){
                    inputCmp.setCustomValidity("Select correct date range2"); 
                }
            }else{
                inputCmp.setCustomValidity("Invalid value");
            }
        }
        inputCmp.reportValidity();
    }
})
于 2018-12-07T04:13:12.570 回答