Apex Code Development You need to sign in to do that
Don't have an account?
Stevev Using jQuery in Apex
I want to provide my users a broader experience with the UI than is provided by the standard UI (not meant as a criticism it does a good job).
As the platform is opening up with the Google Visualization API I figure that I should be able to do the same using the jQuery library and the datePicker feature. I've written a simple example that shows 2 date fields. The first is a standard javascript text field implementation using the jQuery library (this also makes sure I'm picking up the library successfully). The second is the Birthdate field for a Contact. I applied the id and style but is not overriding the standard implementation. Anyone implemented this?
<apex:page id="thePage" standardController="Contact"> <!-- Load libraries --> <head> <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> <script> $(document).ready(function() { $("#datepicker").datepicker(); }); </script> </head> <apex:form > <apex:pageBlock> <apex:pageblockSection> <div type="text" id="datepicker" style="font-size:62.5%;"></div> </apex:pageblockSection> </apex:pageBlock> <apex:pageBlock> <apex:pageblockSection> <apex:inputfield value="{!Contact.Birthdate}" id="datepicker" style="font-size:62.5%;"/> <apex:pageBlockSectionItem /> </apex:pageblockSection> </apex:pageBlock> </apex:form> </apex:page>
I have seen some examples where the library is uploaded as a static resource but I don't think that should be necessary when using an Open Source library unless there is some security concerns. Any ideas would be appreciated.
Your suggestion worked and I managed to override the calendar. I also added a weekday ony option (which doesn't make sense in the context of birth date of course but just to prove the idea). I also removed the default date. I put the style in a style library and uploaded to the Static Resources.
The code looks as follows:
The one problem I had was the font-size appears to not be picked up by the code. The solution was to add a body tag with the font size:
Another option is to add a theme but I need to explore that further. Hopefully this is useful anecdotal information.
Thanks to sfdcfox
All Answers
The style attribute of inputField only affects the input tag of the entire generated code (which includes a label and a span). Furthermore, the Force.com platform mangles the id attribute of a generated field, thus causing your code to fail to pick up the field correctly. In fact, it is that very mangling that is allowing your code to run correctly, because duplicate id values are not allowed in a form in Visualforce (well, they are allowed to be duplicated on normal HTML tags, but not for tags in the apex, c, or managed-package-name namespaces, but you should not do that anyways because it is not standards compliant).
To override the default date field mechanisms, you'll probably want to do the following:
$('span[class~="dateOnlyInput"] input').removeAttr('onfocus').datepicker();First, I find input fields thus mangled by Salesforce, then I remove their default onfocus attribute (which is the default behavior picklist), then I call datepicker() to attach the new behavior. Note that the "current-day" selector will still work as expected. You can remove that element separately if you desire. Alternatively, you can use the styleClass attribute of the inputField tag to give the date-picker input field a specific class you can select them by.
Edit: You can remove the current-day links using:
$('.dateFormat').empty()Your suggestion worked and I managed to override the calendar. I also added a weekday ony option (which doesn't make sense in the context of birth date of course but just to prove the idea). I also removed the default date. I put the style in a style library and uploaded to the Static Resources.
The code looks as follows:
The one problem I had was the font-size appears to not be picked up by the code. The solution was to add a body tag with the font size:
Another option is to add a theme but I need to explore that further. Hopefully this is useful anecdotal information.
Thanks to sfdcfox