Merge pull request alphagov#47 from alphagov/remove-native-date-picker

Improve date pattern

public/sass/elements/forms/_form-date.scss

@@ -1,46 +1,39 @@
-// Date of birth
+// Date pattern
 
-.form-date label {
-  display: block;
-  margin-bottom: 5px;
+// Hide the 'spinner' for webkit
+// and also for Firefox
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0
 }
-
-.form-date .form-group {
-  width: 50px;
-  float: left;
-  margin-right: 20px;
-  margin-bottom: 0;
-  clear: none;
+input[type=number] {
+  -moz-appearance: textfield
 }
 
-.form-date .form-group-year {
-  width: 70px;
-}
+.form-date {
 
-.form-date .form-group input {
-  width: 100%;
-}
+  .form-group {
+    float: left;
+    width: 50px;
 
+    margin-right: 20px;
+    margin-bottom: 0;
+    clear: none;
 
-// Use Modernizr to detect for touch events
-// Build: http://modernizr.com/download/#-touch-cssclasses-teststyles-prefixes
+    label {
+      display: block;
+      margin-bottom: 5px;
+    }
 
-// Hide date of birth
-.touch .form-date {
-  display: none;
-}
+    input {
+      width: 100%;
+    }
 
-// Hide native date of birth
-.no-touch .native-date-picker {
-  display: none;
-}
+  }
 
-// Show native date of birth
-.touch .native-date-picker {
-  display: block;
-}
+  .form-group-year {
+    width: 70px;
+  }
 
-// Set a minimum height for date inputs
-.touch input[type="date"] {
-  min-height: 36px;
 }

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,34 +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 type="text" class="form-control" id="dob-day">
-          </div>
-          <div class="form-group form-group-month">
-            <label for="dob-month">Month</label>
-            <input type="text" class="form-control" id="dob-month">
-          </div>
-          <div class="form-group form-group-year">
-            <label for="dob-year">Year</label>
-            <input type="text" class="form-control" id="dob-year">
-          </div>
-        </div>
-
-        <div class="form-date native-date-picker">
-          <p class="form-hint">For example, 08 April 2014</p>
-          <input type="date" class="form-control">
-        </div>
-
-      </fieldset>
-    </div>
+    {{> form_date }}
 
     <!-- Primary buttons, secondary links -->
     <div class="form-group">

views/includes/scripts.html

@@ -5,6 +5,5 @@
 <script src="/public/javascripts/govuk/selection-buttons.js"></script>
 
 <!-- govuk_elements js -->
-<script src="/public/javascripts/vendor/modernizr.custom.77028.js"></script>
 <script src="/public/javascripts/vendor/details.polyfill.js"></script>
 <script src="/public/javascripts/application.js"></script>

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, 31 3 1980</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>