Permalink
Browse files

Textinput: Removes default clear button in date input type

Fixes gh-8001
Closes gh-8002
  • Loading branch information...
kapilgarg1996 authored and arschmitz committed Mar 18, 2015
1 parent 9eeb25e commit 98ce3677ba87a11852e0bc60d99143e4b39adb74
Showing with 34 additions and 15 deletions.
  1. +6 −3 css/structure/jquery.mobile.forms.textinput.css
  2. +25 −12 demos/textinput/index.php
  3. +3 −0 js/widgets/forms/clearButton.js
@@ -111,9 +111,12 @@ for Android 4.1 */
.ui-input-text input[type=number]::-webkit-outer-spin-button {
margin: 0;
}
/* Resolves issue #5756: Textinput in IE10 has a default clear button */
.ui-input-text input::-ms-clear,
.ui-input-search input::-ms-clear {
/* Resolves issue #8001: Default clear button in date input type*/
.ui-textinput-hide-clear::-ms-clear{
display: none;
}
/* This needs to be its own rule because browsers have to drop the whole rule if they encounter an invalid pseudo element*/
.ui-textinput-hide-clear::-webkit-clear-button{
display: none;
}
.ui-input-text input:focus,
View
@@ -81,47 +81,60 @@
<div data-demo-html="true">
<form>
<label for="date-1">Date: data-clear-btn="false"</label>
<label for="date-1">Date: data-clear-btn="false" And Default clear button is enabled</label>
<input type="date" data-clear-btn="false" name="date-1" id="date-1" value="">
<label for="date-2">Date: data-clear-btn="true"</label>
<input type="date" data-clear-btn="true" name="date-2" id="date-2" value="">
<label for="date-2">Date: data-clear-btn="false" And Removes default clear button</label>
<input type="date" class="ui-textinput-hide-clear" data-clear-btn="false" name="date-2" id="date-2" value="">
<label for="date-3">Date: data-clear-btn="true"</label>
<input type="date" data-clear-btn="true" name="date-3" id="date-3" value="">
</form>
</div><!-- /demo-html -->
<h2>Month</h2>
<div data-demo-html="true">
<form>
<label for="month-1">Month: data-clear-btn="false"</label>
<label for="month-1">Month: data-clear-btn="false" And Default clear button is enabled</label>
<input type="month" data-clear-btn="false" name="month-1" id="month-1" value="">
<label for="month-2">Month: data-clear-btn="true"</label>
<input type="month" data-clear-btn="true" name="month-2" id="month-2" value="">
<label for="month-2">Month: data-clear-btn="false" And Removes default clear button</label>
<input type="month" class="ui-textinput-hide-clear" data-clear-btn="false" name="month-2" id="month-2" value="">
<label for="month-3">Month: data-clear-btn="true"</label>
<input type="month" data-clear-btn="true" name="month-3" id="month-3" value="">
</form>
</div><!-- /demo-html -->
<h2>Week</h2>
<div data-demo-html="true">
<form>
<label for="week-1">Week: data-clear-btn="false"</label>
<label for="week-1">Week: data-clear-btn="false" And Default clear button is enabled</label>
<input type="week" data-clear-btn="false" name="week-1" id="week-1" value="">
<label for="week-2">Week: data-clear-btn="true"</label>
<input type="week" data-clear-btn="true" name="week-2" id="week-2" value="">
<label for="week-2">Week: data-clear-btn="false" And Removes default clear button</label>
<input type="week" class="ui-textinput-hide-clear" data-clear-btn="false" name="week-2" id="week-2" value="">
<label for="week-3">Week: data-clear-btn="true"</label>
<input type="week" data-clear-btn="true" name="week-3" id="week-3" value="">
</form>
</div><!-- /demo-html -->
<h2>Time</h2>
<div data-demo-html="true">
<form>
<label for="time-1">Time: data-clear-btn="false"</label>
<label for="time-1">Time: data-clear-btn="false" And Default clear button is enabled</label>
<input type="time" data-clear-btn="false" name="time-1" id="time-1" value="">
<label for="time-2">Time: data-clear-btn="true"</label>
<input type="time" data-clear-btn="true" name="time-2" id="time-2" value="">
<label for="time-2">Time: data-clear-btn="false" And Removes default clear button</label>
<input type="time" class="ui-textinput-hide-clear" data-clear-btn="false" name="time-2" id="time-2" value="">
<label for="time-3">Time: data-clear-btn="true"</label>
<input type="time" data-clear-btn="true" name="time-3" id="time-3" value="">
</form>
</div><!-- /demo-html -->
@@ -47,6 +47,9 @@ define( [
},
_addClearBtn: function() {
//Removes default clear button if jqm clear button is ON
this.element.addClass( "ui-textinput-hide-clear" ) ;
if ( !this.options.enhanced ) {
this._enhanceClear();

0 comments on commit 98ce367

Please sign in to comment.