iOs Safari:清除输入类型日期 [英] iOs Safari: clear input type date

问题描述

我制作了一个.NET mvc应用程序，其中有一个字段. 在iPhone(在Safari中)上，一旦我单击此字段，就会出现本机iOs日期选择器. 它可以正常工作，我可以选择一个日期，然后确认它(使用完成"按钮)并提交表格.

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">

我可以更改它，但是我不能使用相对按钮清除它.日期仍在该字段中. 如果我在此字段中输入新日期，然后按清除"，则它将返回到以前的值(2012年6月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.

因此，清除"按钮实际上并不清除字段中的日期，而是根据该字段在显示给用户时的 value 属性对其进行估价.

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.

如何在不使用Javascript的情况下使用清除"按钮清除(输入空值)?

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

谢谢

P.S. 在桌面浏览器(Chrome，IE，FF，Edge)上，其本地日期选择器可以正常工作.

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

推荐答案

以下是我提出的内容.抱歉，是的，您必须使用JavaScript.我正在手动添加HTML中的按钮，但是通过进一步的工作，我可以让脚本动态添加按钮. (取消该操作也使示例更简单)

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:

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();
}

这是在输入后添加一个手动清除"按钮的功能.当您单击按钮时，它将"data-origVal"属性添加到输入，然后将"value"属性设置为"(空).如果表单为重置"，则脚本首先获取原始值，然后将其还原到value属性.

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.

注意:为了与Grunt兼容，我在这里使用了一些旧"约定.随时使用.data('x' ...)代替.attr('data-x' ...).

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

这篇关于iOs Safari:清除输入类型日期的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！