diff --git a/wagtail/contrib/wagtailstyleguide/templates/wagtailstyleguide/base.html b/wagtail/contrib/wagtailstyleguide/templates/wagtailstyleguide/base.html
index 53697e82d3..89f6704c42 100644
--- a/wagtail/contrib/wagtailstyleguide/templates/wagtailstyleguide/base.html
+++ b/wagtail/contrib/wagtailstyleguide/templates/wagtailstyleguide/base.html
@@ -347,8 +347,12 @@
                     {% for field in example_form %}
                         {% if field.name == 'file' %}
                             {% include "wagtailimages/images/_file_field.html" %}
-                        {% elif field.name == 'date' %}
-                            {% include "wagtailadmin/shared/field_as_li.html" with input_classes="iconfield icon-date" %}
+                        {% elif field.name == 'page_chooser' %}
+                            <li>{% include "wagtailadmin/edit_handlers/page_chooser_panel.html" with field=field choose_one_text_str="Choose a page" choose_another_text_str="Choose another page" only %}</li>
+                        {% elif field.name == 'image_chooser' %}
+                             <li>{% include "wagtailimages/edit_handlers/image_chooser_panel.html" with field=field choose_one_text_str="Choose an image" choose_another_text_str="Choose another image" only %}</li>
+                        {% elif field.name == 'document_chooser' %}
+                             <li>{% include "wagtaildocs/edit_handlers/document_chooser_panel.html" with field=field choose_one_text_str="Choose a document" choose_another_text_str="Choose another document" only %}</li>
                         {% else %}
                             {% include "wagtailadmin/shared/field_as_li.html" %}
                         {% endif %}
@@ -357,13 +361,7 @@
                 </ul>
             </form>
 
-            <h3>TODO: Date picker</h3>
-            <h3>TODO: Time picker</h3>
-            <h3>TODO: Datetime picker</h3>
             <h3>TODO: Rich text input</h3>            
-            <h3>TODO: Page chooser</h3>
-            <h3>TODO: Image chooser</h3>
-            <h3>TODO: Document chooser</h3>
             <h3>TODO: Snippet chooser</h3>
         </section>
 
@@ -532,42 +530,43 @@
 {% endblock %}
 
 {% block extra_js %}
-<script>
-    $(function(){
-        // Debugging for stylesheet problems
-        var styleSheets = document.styleSheets, totalStyleSheets = styleSheets.length;
-        for (var j = 0; j < totalStyleSheets; j++) {
-            var styleSheet = styleSheets[j], rules = styleSheet.cssRules, totalSelectorsInStylesheet = 0, style = "";
+    {% include "wagtailadmin/pages/_editor_js.html" %}
+    <script>
+        $(function(){
+            // Debugging for stylesheet problems
+            var styleSheets = document.styleSheets, totalStyleSheets = styleSheets.length;
+            for (var j = 0; j < totalStyleSheets; j++) {
+                var styleSheet = styleSheets[j], rules = styleSheet.cssRules, totalSelectorsInStylesheet = 0, style = "";
 
-            var totalRulesInStylesheet = rules ? rules.length : 0;
+                var totalRulesInStylesheet = rules ? rules.length : 0;
 
-            for (var i = 0; i < totalRulesInStylesheet; i++) {
-                if (rules[i].selectorText) {
-                    try {
-                        totalSelectorsInStylesheet += rules[i].selectorText.split(',').length;
-                    }
-                    catch (err) {
-                        console.log(err);
+                for (var i = 0; i < totalRulesInStylesheet; i++) {
+                    if (rules[i].selectorText) {
+                        try {
+                            totalSelectorsInStylesheet += rules[i].selectorText.split(',').length;
+                        }
+                        catch (err) {
+                            console.log(err);
+                        }
                     }
                 }
+
+                if(totalSelectorsInStylesheet > 4095){
+                    style = 'color:red';
+                }
+                $('#ie9-debug').append("<h3>" + styleSheet.href + "</h3>" + "<p>Total rules: <strong>" + totalRulesInStylesheet + "</strong>. " + "Total selectors: <strong style='" + style + "'>" + totalSelectorsInStylesheet + "</strong></p>");
             }
 
-            if(totalSelectorsInStylesheet > 4095){
-                style = 'color:red';
-            }
-            $('#ie9-debug').append("<h3>" + styleSheet.href + "</h3>" + "<p>Total rules: <strong>" + totalRulesInStylesheet + "</strong>. " + "Total selectors: <strong style='" + style + "'>" + totalSelectorsInStylesheet + "</strong></p>");
-        }
-
-        (function runprogress(){
-            var to = setTimeout(function(){
-                runprogress();
-                clearTimeout(to);
-                var to2 = setTimeout(function(){
-                    $('#progress-example .bar').css('width', '20%'); 
-                }, 2000);                
-            }, 3000);
-            $('#progress-example .bar').css('width', '80%');
-        })();
-    })
-</script>
+            (function runprogress(){
+                var to = setTimeout(function(){
+                    runprogress();
+                    clearTimeout(to);
+                    var to2 = setTimeout(function(){
+                        $('#progress-example .bar').css('width', '20%'); 
+                    }, 2000);                
+                }, 3000);
+                $('#progress-example .bar').css('width', '80%');
+            })();
+        })
+    </script>
 {% endblock %}
\ No newline at end of file
diff --git a/wagtail/contrib/wagtailstyleguide/views.py b/wagtail/contrib/wagtailstyleguide/views.py
index 98112adcbd..4b8139e6fb 100644
--- a/wagtail/contrib/wagtailstyleguide/views.py
+++ b/wagtail/contrib/wagtailstyleguide/views.py
@@ -5,9 +5,21 @@ from wagtail.wagtailadmin import messages
 from django.contrib.auth.decorators import permission_required
 
 from wagtail.wagtailadmin.forms import SearchForm
-
+from wagtail.wagtailadmin.widgets import AdminPageChooser, AdminDateInput, AdminTimeInput, AdminDateTimeInput
+from wagtail.wagtailimages.widgets import AdminImageChooser
+from wagtail.wagtaildocs.widgets import AdminDocumentChooser
 
 class ExampleForm(forms.Form):
+    
+    def __init__(self, *args, **kwargs):
+        super(ExampleForm, self).__init__(*args, **kwargs)
+        self.fields['page_chooser'].widget = AdminPageChooser()
+        self.fields['image_chooser'].widget = AdminImageChooser()
+        self.fields['document_chooser'].widget = AdminDocumentChooser()
+        self.fields['date'].widget = AdminDateInput()
+        self.fields['time'].widget = AdminTimeInput()
+        self.fields['datetime'].widget = AdminDateTimeInput()
+
     CHOICES = (
         ('choice1', 'choice 1'),
         ('choice2', 'choice 2'),
@@ -18,8 +30,13 @@ class ExampleForm(forms.Form):
     email = forms.EmailField(max_length=254)
     date = forms.DateField()
     time = forms.TimeField()
+    datetime = forms.DateTimeField()
     select = forms.ChoiceField(choices=CHOICES)
     boolean = forms.BooleanField(required=False)
+    page_chooser = forms.BooleanField(required=True)
+    image_chooser = forms.BooleanField(required=True)
+    document_chooser = forms.BooleanField(required=True)
+
 
 
 @permission_required('wagtailadmin.access_admin')