[SalesForce] Restricting ui:inputDate to take ‘//’

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.

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

Best Answer

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:

Related Solutions

[SalesForce] Date formatting when using JavaScript Remoting

You could either use some of the Javascript date format functions (i.e.)

var date = new Date(1324339200000);

date.toString("MMM dd"); // "Dec 20"

Change the return type of your remote action:

@RemoteAction
global static String[] GetData(string someParam)
{
    String[] results = New String[]{};
    for(MyCustObj__c o : [Select Id, Name, Date__c from MyCustObj__c where myField__c = :someParam]){
        if(o.Date__c != null) results.add(o.Date__c.format());
    }

    return results;
}

[SalesForce] Inserting Date Field with JS Remote Objects

You can pass javascript date object to the apex date field..

initialise the js date from the date string and pass the js date variable

var dt = new Date('2015-12-12');
var oppDetails = { Name: 'Test Opp', CloseDate: dt, StageName:'New' };

here's the full code I tested in my dev org which worked..

<apex:page >
  <script type="text/javascript">
     function createOpp(){    
        var dt = new Date('2015-12-12');
        var oppDetails = { Name: 'Test Opp', CloseDate: dt, StageName:'New' };
        var opp = new RemoteObjectModel.Opportunity();
        opp.create(oppDetails, function(err) {
            if(err) { 
                console.log(err);
                alert(err.message);
            }
            else {
                console.log(opp.get('Id')); 
                alert('success');
            }
        });
     }
  </script>
  <apex:remoteObjects jsNamespace="RemoteObjectModel">
    <apex:remoteObjectModel name="Opportunity" fields="Id,Name,CloseDate,StageName">
    </apex:remoteObjectModel>
  </apex:remoteObjects>
  <input type="button" onClick="createOpp()" value="Create Opp" />
</apex:page>

Best Answer

Related Solutions

[SalesForce] Date formatting when using JavaScript Remoting

[SalesForce] Inserting Date Field with JS Remote Objects

Related Topic