ui:inputDate also takes '01//08//2011' as ' 01/08/2011'

Is there any way of restricting ui:inputDate to take any value other than dd/MM/yyyy format when entered manually.

Or

Is there any way to get the exact string entered manually in to ui:inputDate so that it can be handled in javascript.

up vote 1 down vote accepted

There is no readonly attribute associated to an input element when the ui:inputdata renders, so there is no question of making the ui:date readonly. I was going to recommend lightning:input but you do not get the nice date picker option with lightning:input component

This is what I did,

Downloaded momentJS from here: https://momentjs.com/ and load it into the static resource( do not go for CDN option locker service will not support CDN)

Though this JS library is not officially published as locker supported third party library , i looked this forum and saw @mohith answer this question: Is there a version of moment.js that works with the current Locker Service?

The only close answer I found to validate mm/dd/yyyy format was by using momentJS, all other options will fail you somewhere down the line.

Not to the code

Component:

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction" access="global">
    <ltng:require scripts="{!$Resource.momentjs}"
                  afterScriptsLoaded="{!c.validatedate}" />

    <ui:inputDate aura:id="dateField" label="Birthday" value="2014-01-30" displayDatePicker="true" format="MM/dd/yyyy" change="{!c.validatedate}"/>
</aura:component>

controller:

({
    validatedate : function(component, event, helper) {
        var date_val = component.find("dateField").get("v.value");
        var date_formatter = new Date(date_val);
        if(date_val.includes('//') || !moment(date_formatter, 'MM/DD/YYYY', true).isValid()){
             alert("invalid date please enter in MM/DD/YYYY format");
            component.find("dateField").set("v.value","2014-01-30");
        }
    }
})

output:

enter image description here

  • Thankyou for a quick suggestion Rao, hope it works with further releases as well, will definitely try this and revert. ☺️ – Shri Oct 12 '17 at 18:10
  • I tried it, its working fine but '//' condition isn't handled here aswell. – Shri Oct 13 '17 at 8:28
  • Updated the answer.Try adding date_val.includes('//') in the if condition – Rao Oct 13 '17 at 13:27
  • add a check to validate if // or any spl characters your users typically tend to put in for eg: 10-10-2014 etc.. (or) use a regex that will prompt if user enters invalid character using includes() method in javascript w3schools.com/jsref/jsref_includes.asp – Rao Oct 13 '17 at 16:48
  • @Shri did the fix work for you ? – Rao Oct 17 '17 at 18:52

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.