【问题标题】:input type=date then datepicker Icon is not appearing on Firefox输入 type=date 然后 datepicker 图标没有出现在 Firefox 上
【发布时间】:2020-12-01 08:10:51
【问题描述】:

在 Firefox 上,我遇到了一个问题,即日期选择器图标没有出现在文本框中,而它出现在 Chrome 和 Edge 上。 以下是代码行和截图,请检查并告诉我在firefox上显示的方式是什么

<input type="date" required="required" class="formInput">

on chrome icon appears as in this image

on Edge icon appears as in this image

*on Firefox icon disappears as in this image*

【问题讨论】:

    标签: html datepicker razor-pages bootstrap-datepicker


    【解决方案1】:

    输入 UI 取决于浏览器 more info

    您可以使用 jQuery 实现自定义设计(因此它在所有浏览器中始终显示相同)。 Like here.

    【讨论】:

    • 感谢您的回复。您提供的解决方案已经足够好了,但是我会尝试我的应用程序并回复您。谢谢
    • 欢迎堆栈溢出@angelo,通常情况下,如果您将此作为评论发布会更好,因为答案必须在本网站上更加具体和详细,不要担心会达到很多提出问题的用户也可以为您的评论点赞。
    【解决方案2】:

    Firefox 不这样做,但是,我会这样做:

    div 外的输入是给其他浏览器的。 div里面的那个是firefox的。我使用 JS 来检测浏览器并采取相应的行动,隐藏每一个。

    请注意,您需要为您的 img src 下载一个日历图标。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    
    <body>
        <div class="firefox" style="border: 1px solid #DDD; width:max-content;">
    
            <input style="border: none;" type="date" id="start" name="trip-start" value="2018-07-22" min="2018-01-01"
                max="2018-12-31">
            <img src="calendar.png" style="width:15px; padding:10px 15px 0px 0px" />
        </div>
    
        <input class="anotherBrowser" style="border: none;" type="date" id="start" name="trip-start" value="2018-07-22"
            min="2018-01-01" max="2018-12-31">
    
    
        <script>
            // Detect Firefox 1.0+
            var isFirefox = typeof InstallTrigger !== 'undefined';
    
            //Hide 
            if (isFirefox) {
    
                document.querySelector(".anotherBrowser").style.display = "none";
    
            } else {
                document.querySelector(".firefox").style.display = "none";
            }
        </script>
    
    </body>
    
    </html>
    
    

    【讨论】:

    • 感谢您的回复,这在 firebox 上看起来很好管理,但是当用户点击日历图标时如何显示日历?
    【解决方案3】:

    当我们使用 input type="date" 时,我能够解决 datepicker 图标在输入文本框中消失的问题。它适用于 Chrome、Firefox、Edge。 以下是我在 div 上使用和应用的 css

     .cal-wrp {
        position: relative;
        background-color: white;
        margin-bottom: 16px;
     }
    
    .btnCal-wrp {
        display: inline-block;
        width: 100%;
        position: relative;
        z-index: 10;
    }
    
    .btnCal-click {
        border: 0.0625rem solid #cfd0d3;
        background-color: transparent;
        width: 100%;
        padding: 0.75rem;
        cursor: pointer;
        border-radius: 0;
        font-size: 0.875rem;
        line-height: 1.4;
    }
    
        .btnCal-click::-webkit-calendar-picker-indicator {
            right: -10px;
            position: absolute;
            width: 78px;
            height: 40px;
            color: rgba(204, 204, 204, 0);
            opacity: 0;
        }
    
        .btnCal-click::-webkit-inner-spin-button {
            -webkit-appearance: none;
        }
    
        .btnCal-click::-webkit-clear-button {
            margin-right: 75px;
        }
    
    .btnCal {
        background: transparent;
        border: none;
        color: black;
        padding: 13px;
        position: absolute;
        right: 0;
        top: 0;
    }
    

    日历文本框代码:

    <div class="cal-wrp">
       <div class="btnCal-wrp">
            <input class="btnCal-click" type="date" required>
       </div>
       <button class="btnCal"><span class="fa fa-calendar"></span></button>
    </div>
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2017-06-09
      • 2016-11-25
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2013-08-12
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多