Author Topic: howto: a datepicker in your custom form (Read 686 times)

adixon · May 15, 2014, 08:10:53 am

There's quite a lot of datepicker complexity built into CiviCRM, but if you just want to use the standard jquery.ui date picker for a field in a custom form, it turns out to be easy, if not obvious: include a little javascript in your form template. For my example, it looked like this:

Code: [Select]

{literal}<script type="text/javascript">cj( function() {
cj('#mydatefield').datepicker({dateFormat: 'yy-mm-dd'}); 
});</script>{/literal}

where the selector '#mydatefield' would need to be adjusted for your specific case, and you may want to use a different dateFormat (with bonus points for actually using the value in the civicrm locationization configuration ...).

Erik Hommel · May 19, 2014, 12:48:01 am

Cool! And if you want to use the more complex data picker CiviCRM uses in most cases, use this in your template

Code: [Select]

<div class="crm-section">
  <div class="label">{$form.start_date.label}</div>
  <div class="content">{include file="CRM/common/jcalendar.tpl" elementName=start_date}</div>
  <div class="clear"></div>
</div>

in your Form processing to build the element:

Code: [Select]

    $this->addDate('start_date', ts('Start Date'), false);

CiviCRM Community Forums (archive)

News:

Author Topic: howto: a datepicker in your custom form (Read 686 times)

adixon

howto: a datepicker in your custom form

Erik Hommel

Re: howto: a datepicker in your custom form