diff --git a/docs/framework/ui.md b/docs/framework/ui.md
index a85b650aba4d5887e565d0d0c59daf02674fd5bf..1d6013c52ae4a8771f9d068f86adcdfdea6166c1 100644
--- a/docs/framework/ui.md
+++ b/docs/framework/ui.md
@@ -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>