1

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.

Improve this question

1 Answer 1

Reset to default
1

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

Improve this answer
6
  • Thankyou for a quick suggestion Rao, hope it works with further releases as well, will definitely try this and revert. ☺️
    – Shri
    Commented Oct 12, 2017 at 18:10
  • I tried it, its working fine but '//' condition isn't handled here aswell.
    – Shri
    Commented Oct 13, 2017 at 8:28
  • Updated the answer.Try adding date_val.includes('//') in the if condition
    – Rao
    Commented Oct 13, 2017 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
    Commented Oct 13, 2017 at 16:48
  • @Shri did the fix work for you ?
    – Rao
    Commented Oct 17, 2017 at 18:52

You must log in to answer this question.

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