Skip to content
Snippets Groups Projects
Commit 4313b5a3 authored by Sean Madsen's avatar Sean Madsen
Browse files
parent fd7fcafb
Branches
No related tags found
No related merge requests found
......@@ -157,3 +157,112 @@ an example using the "Edit" button from the Contact View page :
</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.
Please register or to comment