7

I have designed a VF page with SLDS, which has a calendar field, how could I replace the current date proportion of the calendar field with some image/icon using SLDS? or any other solutions?

Please see the screen-shot,

calendar field

1 Answer 1

5

You can use the SLDS design elements on the visualforce page.
In this example I've just took this Datepicker component and wrapped the calendar icon with a tag. Then, after the page is fully loaded I will "get" the href element from the standard link and set it to my custom a-tag.
Now, if the user clicks on the icon - a todays date will be set into the input element:

enter image description here

Here is a complete code of the visualforce page:

<apex:page standardController="Account" 
           applyBodyTag="false"
           docType="html-5.0">

<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"/>

<!-- Hide the standard date link -->
<style> span.dateFormat { display:none; } </style>

<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">   
    <head>
        <title>My Page</title>
        <apex:stylesheet value="{!URLFOR($Resource.SLDS0120, 'assets/styles/salesforce-lightning-design-system-vf.css')}" />
    </head>
    <body>


    <apex:form>
        <div class="slds">

            <div class="slds-form--horizontal">
                <!-- Datepicker -->
                <div class="slds-form-element" id="myPickerWrapper">
                    <label class="slds-form-element__label" for="inputSample2">Select a Date</label>
                    <div class="slds-form-element__control">
                        <div class="slds-input-has-icon slds-input-has-icon--right">
                            <a id="myPickerToday" href="#">
                                <svg aria-hidden="true" class="slds-input__icon input-text-default">
                                    <use xlink:href="{!URLFOR($Resource.SLDS0120)}/assets/icons/utility-sprite/svg/symbols.svg#event"></use>
                                </svg>
                            </a>
                            <apex:inputField value="{!Account.MyDate__c}" styleClass="slds-input" id="myPicker"/>
                        </div>
                    </div>
                </div>

                <!-- TextArea -->
                <div class="slds-form-element">
                    <label class="slds-form-element__label" for="textareaSample2">Textarea Label</label>
                    <div class="slds-form-element__control">
                        <textarea id="textareaSample2" class="slds-textarea"></textarea>
                    </div>
                </div>
            </div>

        </div>
    </apex:form>    

    <script>
        // Remove onload focus from the datepicker input element
        function setFocusOnLoad() { } 
        // Take the href from the target link and set it to the custom icon link
        jQuery(document).ready(function(){
            jQuery('#myPickerToday').attr('href', jQuery('#myPickerWrapper span.dateFormat a').attr('href'));
        });
    </script>

    </body>
</html>
</apex:page>

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.