[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,
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:
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>
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" thehref
element from the standard link and set it to my customa
-tag.Now, if the user clicks on the icon - a todays date will be set into the input element:
Here is a complete code of the visualforce page: