Microsoft Edge 中输入类型日期的清除值

Posted 2023-02-25

【中文标题】Microsoft Edge 中输入类型日期的清除值

【英文标题】：Clear value of input type date in Microsoft Edge

【发布时间】：2015-12-14 06:19:51

【问题描述】：

Microsoft Edge 显示 html5 日期选择器以输入由定义的输入的值

<input type="date">

有没有办法显示一个清除按钮或一个“x”装饰来删除该值，就像谷歌浏览器所做的那样？

【问题讨论】：

如果您受此影响，请务必在 uservoice wpdev.uservoice.com/forums/257854-microsoft-edge-developer/… 投票

新功能请求链接在这里：microsoftedge.uservoice.com/forums/928828-developer/suggestions/…

【参考方案1】：

我从Where did the clear button go on date type input elements in Chrome? 的简单示例开始。

<input id=el type=datetime-local value="2025-07-01T12:44">
<button onclick="javascript:el.value=''">X</button>

并将其变成我的 C# ASP.NET Web 应用程序中的扩展方法。

public static System.Web.IHtmlString editorWithClearFor<TModel, TValue>(
  this System.Web.Mvc.HtmlHelper<TModel> helper,
  System.Linq.Expressions.Expression<Func<TModel, TValue>> expression,
  object additionalViewData )

  //------------------------------
  // Determine the input element ID.
  // The ID might be the property name.
  ModelMetadata metadata = ModelMetadata.FromLambdaExpression( expression, helper.ViewData );
  string inputElemId =  metadata.PropertyName;

  //------------------------------
  // The ID might be specified in the HTML attributes within the view data.
  Type t = additionalViewData.GetType();
  PropertyInfo pi = t.GetProperty( "htmlAttributes" );
  IDictionary<string, object> attribs = pi.GetValue( additionalViewData, null ) as IDictionary<string, object>;
  if ( attribs.ContainsKey( "id" ) )
  
    inputElemId = attribs["id"].ToString();
  

  //------------------------------
  // For the input and the button to be side by side,
  // must I must wrap each of them in a div?  That seems to be the only thing that works.

  //------------------------------
  // Input.
  IHtmlString input = helper.EditorFor( expression, additionalViewData );

  //------------------------------
  // Wrap the input in a div.
  TagBuilder div1 = new TagBuilder( "div" );
  div1.MergeAttribute( "style", "display: inline-block;" );
  div1.InnerHtml = input.ToString();

  //------------------------------
  // Clear button.
  TagBuilder btn = new TagBuilder( "button" );
  btn.MergeAttribute( "title", "Clear" );
  btn.MergeAttribute( "style", "border: none; background-color: transparent;" );
  btn.MergeAttribute( "onclick", String.Format( "javascript:0.value=''", inputElemId ) );
  btn.InnerHtml = "X";

  //------------------------------
  // Wrap the button in a div.
  TagBuilder div2 = new TagBuilder( "div" );
  div2.MergeAttribute( "style", "display: inline-block;" );
  div2.InnerHtml = btn.ToString();

  //------------------------------
  // Concatenate.
  Debug.WriteLine( div1.ToString() + div2.ToString() ); 
  return MvcHtmlString.Create( div1.ToString() + div2.ToString() );

cshtml 标记中的使用示例：

@Html.editorWithClearFor( m => m.DueDate, new  htmlAttributes = new  "class", "form-control"   )

【参考方案2】：

这里最好的选择可能是隐藏Chrome提供的自定义清除标记，并提供您自己的供所有浏览器使用：

input::-webkit-clear-button 
    display: none;

然后您将提供自己的清除按钮：

<input type="date" required />
<button>Clear</button>

最后，在点击按钮时清除输入的一小段逻辑：

(function () 

    "use strict";

    var elmnt = document.querySelector( "input" );
    var clear = document.querySelector( "button" );

    clear.addEventListener( "click", function ( event ) 
        elmnt.value = "";
    );

());

我希望这会有所帮助。

小提琴：http://jsfiddle.net/zcay9qc5/

【讨论】：

好的，这行得通。但令我惊讶的是，Microsoft Edge 支持输入类型日期，但不提供清除按钮。

@Michael 当 IE 10 发布时，我们（我在 Microsoft Edge 团队工作）为几乎每个表单元素添加了清晰的按钮。许多开发人员很不高兴，因为他们已经在他们的 UI 中有清晰的按钮。这次我们可能尝试吸取教训 ;)

@Sampson 感谢您为开发人员提供的解决方法。根据您对 Michael 的评论（我意识到这已经很老了），我觉得 Edge 团队没有抓住重点。 问题不在于没有清除按钮。问题是如果没有开发人员提供的解决方法，就无法清除日期字段。 如果我可以选择日期文本并点击 Backspace 或 Delete，那么我不会发表评论，但我不能甚至这样做。