iOs Safari: clear input type date

问题

I made a .NET mvc application in which i have an field. On iPhone (in Safari), once i click on this field, a native iOs datepicker appears. It works, i can select a date, confirm it (with "Done" button) and submit the form.

Then I access again to this page: the date is already valorized; For example, i will have this:

<input type="date" value="2012-06-30">

I can change it but i can't Clear it with the relative button. The date is still in the field. If i put a new date in this field and then i press "Clear", it come back to previous value (Jun 30, 2012).

If the date field is blank when i load it, i can valorize it and when i press Clear the field will be empty.

So, the "Clear" button doesn't actually CLEAR the date in the field but valorize it based on the value attribute that the field had when showed up to the user.

How can i CLEAR (put a null value) with the "Clear" button without using Javascript?

Thank you

P.S. On desktop browser (Chrome, IE, FF, Edge) it works fine with their native datepicker.

回答1:

This was an interesting issue to tackle on iOS. Just for reference, I am not using iOS Safari, rather, I am using wkwebview for a hybrid app. It appears that the clear button retrieves the defaultValue of the input field then restores the value property from that defaultValue. Although this value is clearly not an HTML accessible property, you can modify it through JavaScript:

First, you'll want to setup a focus event handler for the date input. After that, all you need to do in the handler is set the defaultValue: evt.currentTarget.defaultValue = '';.

I hope this helps you solve your problem!

回答2:

The following is what I came up with. Sorry, yes, you have to use JavaScript. I'm manually adding the buttons in HTML, though with further work I could have the script add the buttons dynamically. (Leaving that off makes the example a bit simpler as well)

HTML:

<input type="date" id="theDate">&nbsp;<button type="button" class="clearField" data-target="theDate">Clear</button>

JavaScript / jQuery:

function initClearFields() {
    var $clearButtons = $( 'button.clearField' );
    $clearButtons.on( 'click', function() {
        var $target = $( 'input#' + $(this).data('target') );
        $target.attr( 'data-origVal', $target.val() );
        $target.attr( 'value', '' );
        $target.val( '' );
        $target.change();
    } );
    $clearButtons.closest('form').on( 'reset', function(event) {
        $clearButtons.each( function( index ) {
            var $target = $( 'input#' + $(this).attr('data-target') );
            if( typeof $target.attr( 'data-origVal' ) !== 'undefined' ) {
                $target.attr( 'value', $target.attr( 'data-origVal' ) );
                $target.removeAttr( 'data-origVal' );
            }
        } );
    } );
}

$(document).ready(function () {
    initClearFields();
}

What this does is add a manual "clear" button after the input. When you click the button it adds a "data-origVal" attribute to the input, then sets the "value" attribute to "" (empty). If the form is Reset, the script first takes to original value and restores it to the value attribute.

NOTE: I use a couple "old" conventions here for compatibility with Grunt. Feel free to use .data('x' ...) instead of .attr('data-x' ...).

来源：https://stackoverflow.com/questions/36977256/ios-safari-clear-input-type-date

标签

html

ios

datepicker

mobile-safari