Merge pull request #2872 from pjackson28/datepicker-format-hide

Now hiding .datepicker-format elements when the datepicker polyfill is not loaded.
wet-boew · Aug 27, 2013 · d92538f · d92538f
2 parents d81bae5 + 155bb41
commit d92538f
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 9 deletions.
diff --git a/demos/datepicker/datepicker-eng.html b/demos/datepicker/datepicker-eng.html
@@ -108,11 +108,11 @@ <h1 id="wb-cont">Date picker - Web Experience Toolkit (WET)</h1>
 <h2>Examples</h2>
 <form method="get" action="#">
 	<div>
-		<label for="startdate">Start Date (<abbr title="Four digits year">YYYY</abbr>-<abbr title="Two digits month">MM</abbr>-<abbr title="Two digits day">DD</abbr>)</label>
+		<label for="startdate">Start Date<span class="datepicker-format"> (<abbr title="Four digits year">YYYY</abbr>-<abbr title="Two digits month">MM</abbr>-<abbr title="Two digits day">DD</abbr>)</span></label>
 		<input type="date" id="startdate" name="startdate" min="2013-03-27" max="2013-05-07" />
 	</div>
 	<div>
-		<label for="enddate">End Date  (<abbr title="Four digits year">YYYY</abbr>-<abbr title="Two digits month">MM</abbr>-<abbr title="Two digits day">DD</abbr>)</label>
+		<label for="enddate">End Date<span class="datepicker-format"> (<abbr title="Four digits year">YYYY</abbr>-<abbr title="Two digits month">MM</abbr>-<abbr title="Two digits day">DD</abbr>)</span></label>
 		<input type="date" id="enddate" name="enddate" min="2013-03-27" max="2016-05-07" />
 	</div>
     <div>

diff --git a/demos/datepicker/datepicker-fra.html b/demos/datepicker/datepicker-fra.html
@@ -106,11 +106,11 @@ <h1 id="wb-cont">Sélecteur de date - Boîte à outils de l'expérience Web (BOE
 <section><h2>Exemples</h2>
 <form method="get" action="#">
 	<div>
-		<label for="startdate">Date de début (<abbr title="Les quatres chiffres de l'année">AAAA</abbr>-<abbr title="Les deux chiffres du mois">MM</abbr>-<abbr title="Les deux chiffres du jour">JJ</abbr>) :</label>
+		<label for="startdate">Date de début<span class="datepicker-format"> (<abbr title="Les quatres chiffres de l'année">AAAA</abbr>-<abbr title="Les deux chiffres du mois">MM</abbr>-<abbr title="Les deux chiffres du jour">JJ</abbr>)</span>&#160;:</label>
 		<input type="date" id="startdate" name="startdate" min="2013-03-27" max="2013-05-07" />
 	</div>
 	<div>
-		<label for="enddate">Date de fin (<abbr title="Les quatres chiffres de l'année">AAAA</abbr>-<abbr title="Les deux chiffres du mois">MM</abbr>-<abbr title="Les deux chiffres du jour">JJ</abbr>) :</label>
+		<label for="enddate">Date de fin<span class="datepicker-format"> (<abbr title="Les quatres chiffres de l'année">AAAA</abbr>-<abbr title="Les deux chiffres du mois">MM</abbr>-<abbr title="Les deux chiffres du jour">JJ</abbr>)</span>&#160;:</label>
 		<input type="date" id="enddate" name="enddate" min="2013-03-27" max="2016-05-07" />
 	</div>
     <div>

diff --git a/demos/formvalid/formvalid-eng.html b/demos/formvalid/formvalid-eng.html
@@ -124,7 +124,7 @@ <h1 id="wb-cont">Form validation</h1>
 </fieldset>
 
 <fieldset class="margin-top-large"><legend>Other examples</legend>
-<label for="date1"><span class="field-name">Date</span> (YYYY-MM-DD)</label><input id="date1" name="date1" type="date" data-rule-dateISO="true" />
+<label for="date1"><span class="field-name">Date</span><span class="datepicker-format"> (YYYY-MM-DD)</span></label><input id="date1" name="date1" type="date" data-rule-dateISO="true" />
 <label for="time1"><span class="field-name">Time</span> (hh:mm)</label><input id="time1" name="time1" type="time" />
 <label for="an1"><span class="field-name">Alphanumeric</span> (at least 4 characters)</label><input id="an1" name="an1" type="text" pattern="[A-Za-z0-9\s]{4,}" data-rule-alphanumeric="true" data-rule-minlength="4" />
 <label for="digits1"><span class="field-name">Digits only</span></label><input id="digits1" name="digits1" type="number" />

diff --git a/demos/formvalid/formvalid-fra.html b/demos/formvalid/formvalid-fra.html
@@ -123,7 +123,7 @@ <h1 id="wb-cont">Validation de formulaires</h1>
 </fieldset>
 
 <fieldset class="margin-top-large"><legend>Autres exemples</legend>
-<label for="date1"><span class="field-name">Date</span> (AAAA-MM-JJ)</label><input id="date1" name="date1" type="date" data-rule-dateISO="true" />
+<label for="date1"><span class="field-name">Date</span><span class="datepicker-format"> (AAAA-MM-JJ)</span></label><input id="date1" name="date1" type="date" data-rule-dateISO="true" />
 <label for="time1"><span class="field-name">Heure</span> (hh:mm)</label><input id="time1" name="time1" type="time" />
 <label for="an1"><span class="field-name">Alphanumérique</span> (4 caractères minimum)</label><input id="an1" name="an1" type="text" pattern="[A-Za-z0-9\s]{4,}" data-rule-alphanumeric="true" data-rule-minlength="4" />
 <label for="digits1"><span class="field-name">Chiffres seulement</span></label><input id="digits1" name="digits1" type="number" />

diff --git a/src/js/sass/includes/_datepicker.scss b/src/js/sass/includes/_datepicker.scss
@@ -2,6 +2,13 @@
  * Web Experience Toolkit (WET) / Boîte à outils de l'expérience Web (BOEW)
  * wet-boew.github.io/wet-boew/License-eng.txt / wet-boew.github.io/wet-boew/Licence-fra.txt
  */
+%datepicker-display-none {
+	display: none;
+}
+%datepicker-display-inline {
+	display: inline;
+}
+
 .cal-container {
 	&.picker-overlay {
 		position: absolute;
@@ -26,18 +33,18 @@
 .ui-mobile {
 	.polyfill {
 		&.picker-field {
-			display: inline;
+			@extend datepicker-display-inline;
 		}
 	}
 	.picker-toggle-hidden, .picker-toggle-visible {
 		img {
-			display: inline;
+			@extend datepicker-display-inline;
 		}
 	}
 }
 
 .picker-toggle {
-	display: none;
+	@extend datepicker-display-none;
 }
 
 .picker-toggle-visible, .picker-toggle-hidden {
@@ -70,4 +77,14 @@ div {
 			}
 		}
 	}
+}
+
+.datepicker-format {
+	@extend datepicker-display-none;
+}
+
+.datepicker-polyfill {
+	.datepicker-format {
+		@extend datepicker-display-inline;
+	}
 }