为了账号安全,请及时绑定邮箱和手机立即绑定

在Chrome中显示本机日期选择器的方法

/ 猿问

在Chrome中显示本机日期选择器的方法

<input type="date">当浏览器不支持该字段时,我使用的字段会优雅地回退到jQuery。相对最近,Chrome开始提供本机日期选择器,这很棒。但是我发现许多用户都错过了带起日历的小箭头,因此错过了一个易于选择日期的日历这一事实。

为了使操作更直观,当用户将焦点移至输入或单击其他元素(如小日历图标)时,我可以调出本机datepicker UI会很棒。

我可以在Chrome中使用一种方法来触发日期选择器UI吗?


查看完整描述

3 回答

?
蝴蝶不菲

我认为您无法触发显示本机日历控件,但可以将其突出显示一些:


input[type="date"]:hover::-webkit-calendar-picker-indicator {

  color: red;

}

input[type="date"]:hover:after {

  content: " Date Picker ";

  color: #555;

  padding-right: 5px;

}

input[type="date"]::-webkit-inner-spin-button {

  /* display: none; <- Crashes Chrome on hover */

  -webkit-appearance: none;

  margin: 0;

}

<input type="date" />

您可以按原样阻止它显示,例如从docs中显示:


您可以通过以下代码禁用本机日历选择器:


<style>

::-webkit-calendar-picker-indicator {

    display: none;

}

</style>

<input type=date id=dateInput>

<script>

dateInput.addEventListener('keydown', function(event) {

    if (event.keyIdentifier == "Down") {

        event.preventDefault()

    }

}, false);

</script>

这是Webkit的文档,我从上面获得了以下内容:


http://trac.webkit.org/wiki/Styling%20Form%20Controls


也许可以将其扭曲并显示日期选择器,但问自己一下,是否希望每次在页面上漫游鼠标时每个日历控件都弹出?

查看完整回答
反对 回复 2019-11-18
?
犯罪嫌疑人X

当用户单击字段本身时,这是一种触发日期选择器的方法,因为不识字的计算机用户不知道应该单击何处:


input[type="date"] {

    position: relative;

}


/* create a new arrow, because we are going to mess up the native one

see "List of symbols" below if you want another, you could also try to add a font-awesome icon.. */

input[type="date"]:after {

    content: "\25BC"; 

    color: #555;

    padding: 0 5px;

}


/* change color of symbol on hover */

input[type="date"]:hover:after {

    color: #bf1400;

}


/* make the native arrow invisible and stretch it over the whole field so you can click anywhere in the input field to trigger the native datepicker*/

input[type="date"]::-webkit-calendar-picker-indicator {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    width: auto;

    height: auto;

    color: transparent;

    background: transparent;

}


/* adjust increase/decrease button */

input[type="date"]::-webkit-inner-spin-button {

    z-index: 1;

}


 /* adjust clear button */

 input[type="date"]::-webkit-clear-button {

     z-index: 1;

 }

<input type="date">


查看完整回答
反对 回复 2019-11-18
?
慕姐8265434

诀窍是F4在输入元素上触发KeyboardEvent:


function openPicker(inputDateElem) {

    var ev = document.createEvent('KeyboardEvent');

    ev.initKeyboardEvent('keydown', true, true, document.defaultView, 'F4', 0);

    inputDateElem.dispatchEvent(ev);

}


var cal = document.querySelector('#cal');

cal.focus();

openPicker(cal);

这是jsfiddle:http : //jsfiddle.net/v2d0vzrr/


顺便说一句,chrome中有一个有趣的错误。如果在单独的选项卡中打开jsfiddle,则日历弹出窗口将显示在当前选项卡上。已经有报道了。


查看完整回答
反对 回复 2019-11-18

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信