[SalesForce] Lightning (SLDS) styling for calendar

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

Best Answer

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>
Related Topic