0

Since I have been looking for a date picker which I can format on a visualforce page for a foce.com site I found that salesforce is very limited. I found the following example which I can format and is working. How do I bind this to a field or send the input to my apex controller?

Code

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css"/>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css"/>
<script>
$(function() {
$( "#datepicker" ).datepicker({ dateFormat: 'dd-mm-yy'});
});
</script>

<input value="{!Job__c.date__c}" type="text" id="datepicker" html-placeholder="Please fill in a date" />
3
  • create a apex:inputhidden field and on change the date type field you can set value in input hidden by jquery and pass this to controller Mar 27 at 9:05
  • @Rijwandeltax do you have an example of this?
    – Thomas
    Mar 27 at 9:15
  • Hi @thomas please check below answer, and mark right Mar 27 at 10:04
2

Apex Page :

<apex:page controller="datectrl">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css"/>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css"/>
<script>
$(function() {
$( "#datepicker" ).datepicker({ dateFormat: 'm/d/yy'});
});
function setValHidden(ele){
    var dateval = $(ele).val();
    $('input[id$=hiddenfield]').val(dateval)
}
</script>
<apex:form >
<input value="{!datevalue}" type="text" id="datepicker" html-placeholder="Please fill in a date" onchange="setValHidden(this)"/>
<apex:inputhidden value="{!datevalue}" id="hiddenfield"/>
<apex:commandButton action="{!updatedval}" title="Save" value="Save"/>
</apex:form>
</apex:page>

ApexClass

public class datectrl {

public String datevalue { get; set; }
public datectrl(){
    date dtt = system.today();
    datevalue = DateTime.newInstance(dtt.year(),dtt.month(),dtt.day()).format('M/d/YYYY');
}
public void updatedval(){
    system.debug('datevalue==>'+datevalue);
    Date dtt = Date.parse(datevalue);
    system.debug('datevalue==>'+dtt);
}
}
4
  • Thanks for the example!. The only issue I still have is the parsing gives an error. The first debug shows 29/3/2021 then I get the error: Invalid date: 29/3/2021 has this to do with local settings perhaps?
    – Thomas
    Mar 27 at 12:02
  • if you set date format m/d/yy then it will workes Mar 27 at 16:15
  • I tried the date format m/d/yy when i do Date.parse('29/03/2021') I still get an error when I do Date.parse('29-03-2021') no error so I seems Date.parse is dependent on Local settings
    – Thomas
    Mar 27 at 20:09
  • You can change the format on page in jQuery Mar 27 at 20:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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