Create a date snippet

This appears in more than one place, create a snippet to keep both
examples up-to-date.
Also create a date pattern page.

routes.js

@@ -34,8 +34,8 @@ module.exports = {
     });
 
     // Date pattern
-    app.get('/patterns/form-date', function (req, res) {
-      res.render('patterns/form_date', {'assetPath' : assetPath });
+    app.get('/patterns/date', function (req, res) {
+      res.render('patterns/date', {'assetPath' : assetPath });
     });
 
     // Radio and checkbox pattern

views/examples/forms.html

@@ -46,29 +46,7 @@ <h1 class="form-title heading-large">
     </div>
 
     <!-- Date of birth -->
-    <div class="form-group">
-      <fieldset>
-        <legend class="form-label-bold">Date of birth</legend>
-
-        <div class="form-date">
-          <p class="form-hint">For example, 08 04 2014</p>
-
-          <div class="form-group form-group-day">
-            <label for="dob-day">Day</label>
-            <input class="form-control" id="dob-day" type="number" pattern="[0-9]*" min="0" max="31">
-          </div>
-          <div class="form-group form-group-month">
-            <label for="dob-month">Month</label>
-            <input class="form-control" id="dob-month" type="number" pattern="[0-9]*" min="0" max="12">
-          </div>
-          <div class="form-group form-group-year">
-            <label for="dob-year">Year</label>
-            <input class="form-control" id="dob-year" type="number" pattern="[0-9]*" min="0" max="2014">
-          </div>
-        </div>
-
-      </fieldset>
-    </div>
+    {{> form_date }}
 
     <!-- Primary buttons, secondary links -->
     <div class="form-group">

views/patterns/date.html

@@ -0,0 +1,35 @@
+
+{{<govuk_template}}
+
+{{$cookieMessage}}
+  {{>cookie_message}}
+{{/cookieMessage}}
+
+{{$head}}
+  {{>head}}
+{{/head}}
+
+{{$propositionHeader}}
+  {{>propositional_navigation}}
+{{/propositionHeader}}
+
+{{$headerClass}}with-proposition{{/headerClass}}
+
+{{$content}}
+<main id="content" role="main">
+
+  <a href="/" class="example-back-link">Back to GOV.UK elements</a>
+
+  <h1 class="heading-xlarge">Date test page</h1>
+
+  <!-- Date of birth -->
+  {{> form_date }}
+
+</main><!-- /#content -->
+{{/content}}
+
+{{$bodyEnd}}
+  {{>scripts}}
+{{/bodyEnd}}
+
+{{/govuk_template}}

views/snippets/form_date.html

@@ -0,0 +1,26 @@
+<div class="form-group">
+  <fieldset>
+    <legend class="form-label-bold">Date of birth</legend>
+
+    <div class="form-date">
+
+      <p class="form-hint">For example, 08 04 2014</p>
+
+      <div class="form-group form-group-day">
+        <label for="dob-day">Day</label>
+        <input class="form-control" id="dob-day" type="number" pattern="[0-9]*" min="0" max="31">
+      </div>
+
+      <div class="form-group form-group-month">
+        <label for="dob-month">Month</label>
+        <input class="form-control" id="dob-month" type="number" pattern="[0-9]*" min="0" max="12">
+      </div>
+
+      <div class="form-group form-group-year">
+        <label for="dob-year">Year</label>
+        <input class="form-control" id="dob-year" type="number" pattern="[0-9]*" min="0" max="2014">
+      </div>
+    </div>
+
+  </fieldset>
+</div>