4

On VF pages, I'm using apex:inputField as a column in a pageblockTable. The inputField is bound to a Date field. SFDC displays this as a box followed by '[ todaysDate ]'

I like that SFDC displays the date in the input box using the user's locale as this makes the input box consistent with other SFDC page layouts using date fields. It also is critical in our multi-TZ deployment.

However, the horizontal space consumed by the '[ todaysDate ]' element is excessive and I'd like to replace the '[ todaysDate ]' with a calendar icon that when clicked brings up the SFDC date picker.

I've looked at the Bob Buzzard post: http://bobbuzzard.blogspot.com/2012/03/custom-date-picker.html and while this solves the calendar icon issue, it creates a picker that is styled differently than the rest of SFDC and the solutions for locale-specific date formatting are something I'd like to avoid.

Is there any easy way to smash the '[ todaysDate ]' part of the inputField control to display a horizontally-less-consuming calendar icon? (and again, this is within a pageBlockTable so there are many rows that are affected)

2 Answers 2

3

To hide the today's date - how about simple CSS rule? span.dateFormat {display:none} should be enough.

To display a calendar icon probably you can reuse this JS function call DatePicker.pickDate(true, 'field id here', false);. But are you sure you need it? I'd say regular "onfocus" is what users expect and this is technically screen-scraping, SF can modify this internal function any time...

2

If you're comfortable getting some CSS into the page, this is doable while leaving the native picker intact. Just bear in mind your changes to the UI may be short-lived if/when upgrades come about.

sans picker with picker

<style>
   span.dateInput.dateOnlyInput > span.dateFormat {
     font-size: 0;
    line-height: 16px;
    vertical-align: middle;
  }

  span.dateInput.dateOnlyInput > span.dateFormat > a {
    width: 16px;
    height: 16px;
    overflow: hidden;
    text-indent: 16px;
    display: inline-block;
    background: url('/img/func_icons/util/datePicker16.gif');
  }
</script>

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.