Permalink
Browse files

Now hiding .datepicker-format elements when the datepicker polyfill i…

…s not loaded.
  • Loading branch information...
pjackson28 committed Aug 27, 2013
1 parent d81bae5 commit 155bb41aa1c98d00772f077fd69656bd51edcc3b
@@ -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>
@@ -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>
@@ -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" />
@@ -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" />
@@ -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;
}
}

0 comments on commit 155bb41

Please sign in to comment.