Skip to content
Snippets Groups Projects
Commit 4313b5a3 authored by Sean Madsen's avatar Sean Madsen
Browse files
parent fd7fcafb
No related branches found
No related tags found
No related merge requests found
...@@ -157,3 +157,112 @@ an example using the "Edit" button from the Contact View page : ...@@ -157,3 +157,112 @@ an example using the "Edit" button from the Contact View page :
</div> </div>
</div> </div>
# crmDatepicker
crmDatepicker is a jQuery widget with bindings for Angular and
Quickform.
Usage:
<div class="code panel" style="border-width: 1px;">
<div class="codeContent panelContent">
$('[name=my_field]').crmDatepicker();
</div>
</div>
<span style="font-size: 10.0pt;line-height: 13.0pt;">With no options
passed in this will create a date/time combo field that displays
according to locale preferences and saves in ISO format.</span>
<span style="font-size: 10.0pt;line-height: 13.0pt;"> </span>Options can
be passed as a plain object. Available options:
- **allowClear**: (bool) provide a button to clear the contents. This
defaults to *true* unless the field has the class or attribute
"required"
- **date**: (string|bool) date display format (e.g. "m/d/y") or *true*
to use the locale default, or *false* for no date entry.
Default: *true*.
- **time**: (number|bool) time display format (12 or 24) or *true* to
use the locale default, or *false* for no time entry<span>.
Default: </span>*true*<span>.</span>
- <span><span>**minDate**: (date|string|number) either a javascript
date object or a unix timestamp or iso datestring (yyyy-mm-dd).
Default *undefined*.</span></span>
- **maxDate**<span
style="font-size: 10.0pt;line-height: 13.0pt;">: (date|string|number)
either a javascript date object or a unix timestamp or iso
datestring
(yyyy-mm-dd).<span> Default </span>*undefined*<span>.</span></span>
- <span style="font-size: 10.0pt;line-height: 13.0pt;"><span>Any other
parameter accepted by the[jQuery UI datepicker
widget](http://api.jqueryui.com/datepicker/){.external-link}.</span></span>
<span>jQuery example of a date-only field in a custom display
format:</span>
<div class="code panel" style="border-width: 1px;">
<div class="codeContent panelContent">
$('[name=my_field]').crmDatepicker({time: false, date: 'dd-mm-yy'});
</div>
</div>
Angular example using the same options with data model binding:
<div class="code panel" style="border-width: 1px;">
<div class="codeHeader panelHeader" style="border-bottom-width: 1px;">
**Angular Binding**
</div>
<div class="codeContent panelContent">
<input crm-ui-datepicker="{time: false, date: 'dd-mm-yy'}" ng-model="myobj.datefield"/>
</div>
</div>
From a php class extending CRM_Core_Form:
<div class="code panel" style="border-width: 1px;">
<div class="codeHeader panelHeader" style="border-bottom-width: 1px;">
**PHP - QuickForm Binding**
</div>
<div class="codeContent panelContent">
// Use default settings
$this->add('datepicker', 'field_name', ts('Field Label'));
// Make it required, customize datepicker and remove time field
$this->add(
'datepicker',
'field_2',
ts('Field 2'),
array('class' => 'some-css-class'),
TRUE,
array('time' => FALSE, 'date' => 'mm-dd-yy', 'minDate' => '2000-01-01')
);
</div>
</div>
<span>\
</span>
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment