SalesForce, VisualForce Pages, and the jQuery date picker

Question

I've got a bit of an issue, and I'm hoping you can help. I was going to use SalesForce's "built in" date picker, but it appears (at least based on my experimentation) that you can only use one per VisualForce page.

So I went the jQuery route. I can get the jQuery datepicker to work (I have two on the page).

The problem is, when the page goes through validation, if one of the "required" elements is not there, it changes the dates to the UTC format.

For instance, if Date 1 is in mm/dd/yy format, and I have it as 03/01/2017, it puts in the long, extended date.

At one point, I did have it to where it would put in the dates in mm/dd/yy format, but they would be off by one day (one day early), which is no good, and I couldn't figure out how to fix it. I'm not at the office right now, and once I get there I will see if I can log in and actually post the jQuery that I have.

Ok, so here's the code:

$( function() {
                            var ad = $('input[id$="adId"]' );
                            var pld = $('input[id$="pldId"]' );
                            
                            ad.datepicker({minDate: 0, dateFormat: "mm/dd/yy"});
                            pld.datepicker({minDate: 0, dateFormat: "mm/dd/yy"});
                            
                            if(ad.val() != ""){
                                $('input[id$="adId"]').datepicker({dateFormat: "mm/dd/yy"}).datepicker("setDate", new Date(ad.val()));
                            }
                            
                            if(pld.val() != ""){
                                $('input[id$="pldId"]').datepicker({dateFormat: "mm/dd/yy"}).datepicker("setDate", new Date(pld.val()));
                            }
                            
                          } );

I'm using an element for the date picker inside of an outputPanel.

So basically the process is this:

1. Go to page.
2. Fill out all but a couple of things, but make sure dates are there. Dates are in mm/dd/yy format, so they would display as 03/01/2017.
3. When validation occurs, the error messages display that the form is incomplete, and the dates are now in UTC date format (i.e. "Thu Jan 1 19:30:00 UTC+0530 1970") instead of mm/dd/yy.

I think it's a simple formatting issue. Any advice is greatly appreciated.

Answer 1

i think we can use many date picker in VF page. There are different way to do this You can use apex:inputfield and bind the field with date type field

<apex:page standardcontroller=’Account’>
<apex:form>
<apex:inputfield value=”{!Account.DateTypeField}”
</apex:form>
</apex:page

> Other way> You can use also use tag

<apex:page standardcontroller=’Account’ id=”id”>
<apex:form id=”form”>
<apex:inputText styleClass="css" value="{!datename}" size="10" id="demo" onfocus="DatePicker.pickDate(false, 'id:form:demo', false);" />
</apex:form>
</apex:page>

3rd .

<apex:page >
<apex:form >
<table>

<td> Date<br></br><input id="t" name="dat" onfocus="DatePicker.pickDate(false,
't', false);" size="20" tabindex="20" type="text" /><span class="dateFormat">[&nbsp;<a
href="DatePicker.insertDate('3/3/2017', 't', true);"
>2/3/2011</a>&nbsp;]</span></td>
</table>
</apex:form>
</apex:page>

Regards,

Ajay