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 Commented Mar 27, 2021 at 9:05
  • @Rijwandeltax do you have an example of this?
    – Thomas
    Commented Mar 27, 2021 at 9:15
  • Hi @thomas please check below answer, and mark right Commented Mar 27, 2021 at 10:04

1 Answer 1

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
    Commented Mar 27, 2021 at 12:02
  • if you set date format m/d/yy then it will workes Commented Mar 27, 2021 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
    Commented Mar 27, 2021 at 20:09
  • You can change the format on page in jQuery Commented Mar 27, 2021 at 20:18

You must log in to answer this question.

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