相关疑难解决方法(0)

HTML5日期选择器有任何样式选项吗？

我对HTML5日期选择器非常感兴趣.令人耳目一新的是,W3C终于找到了一些懈怠,所以我们不必继续重新发明这种常见的输入形式.

需要注意的是,我没有看到或预见到将颜色应用于拾取器本身的方式,这将使得在大多数站点上使用日期选择器类型的交易破坏者.<select>由于人们无法使其变得漂亮的简单原因而遭受广泛的javascript替换黑客攻击.如果有人知道W3C土地上发生了什么,我很好奇吗？

这有点与另一个更大的问题(如果你知道答案)配对:我是否值得花时间尝试参与W3C或WHATWG,以便其中一些事情能够看到光明的一天？任何形式的见解都是有帮助的.

html5 w3c datepicker

Wra*_*ing

2013 02-19

94
推荐指数

5
解决办法

13万
查看次数

所以我input type="date"在cordova类型的移动应用程序中使用.出于某种原因,placeholder如果输入类型是日期,则不会显示.因此,当出现点击的日历时,会出现类似于空的按钮.所以我试图跟随一个input type="text"有placeholder" 下一个行动日期 " 的黑客.而onfocus我改变的类型date.而onblur我变回type="text"并进行placeholder一次.所以这个过程部分地解决了我正在努力解决的问题.哪个使白色按钮的东西消失了.但在我目前的代码中,我必须遵循两个步骤

首先是单击占位符,然后onfocus将被触发并使白色物体出现
其次,我必须点击白色的东西才能显示日历

我不希望第二步出现.这是我的代码

<ElementsBasket name='nextActionDate' 
    data={this.props.newLead.get('actions').get('nextActionDate')}>
        <div className="form-group">
         <input type="text" className="form-control" onFocus={this._onFocus} onBlur={this._onBlur} placeholder="Next Action Date"        
                       value={this.props.newLead.get('actions').get('nextActionDate')}
                       onChange={onFieldChanged.bind(this, 'actions.nextActionDate')}
                       />       
        </div>
</ElementsBasket>



_onFocus: function(e){
       e.currentTarget.type = "date";
    },


    _onBlur:function(e){
      e.currentTarget.type="text"
      e.currentTarget.placeholder = "Next Action Date";
    },

Run Code Online (Sandbox Code Playgroud)

我也尝试了onclick,这也采取了两个步骤.我已经关注此链接未显示输入类型="日期"字段的占位符

PS:白色的东西是没有文字的按钮,点击后会给出一个日历

这是app = text和placeholder工作的应用程序的初始状态问题!! 单击image1时出现空按钮单击白色按钮时出现日历

javascript cordova reactjs

gat*_*tes

2017 05-23

12
推荐指数

1
解决办法

446
查看次数

当输入[type =“ date”]成为焦点时如何显示日历弹出窗口

有没有一种方法可以在输入元素的焦点上激活本地HTML5日期选择器下拉菜单？

大型输入元素：

大输入[类型=日期]元素

目前，我只能在输入元素最右边的箭头上单击才能使用日历。

大型输入元素单击箭头

大输入[type = date]元素onClick的箭头

我想在输入元素的焦点上激活此日历。

这是有问题的代码。

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Test</title>
  </head>
  <style media="screen">
  .form-question {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 0 3rem;
    min-height: 3rem;
  }
  .form-question__title {
    color: #342357;
    font-size: 1.5rem;
    padding: 1rem;
  }
  .input-container {
    border-bottom: solid 2px #333333;
  }
  .input-container input {
    border: none;
    box-sizing: border-box;
    outline: 0;
    padding: .75rem;
    width: 100%;
  }
  </style>
  <body>
    <div class="form-question">
      <div class="form-question__title">
        <span>Effective Date</span>
      </div>
      <div class="input-container">
        <input id="effective-date" type="date" name="effective-date" minlength="1" maxlength="64" …

Run Code Online (Sandbox Code Playgroud)

html javascript css

MJ1*_*358

2018 07-14

7
推荐指数

2
解决办法

7542
查看次数

如何在HTML5手机中打开日期字段的日历？

我正在使用HTML5和jQuery mobile创建一个移动应用程序.我有一个包含"日期"类型字段的表单:

<form id="registrationForm">
   <div data-role="fieldcontain">
       <input type="date" name="dateOfBirth"/>
   </div>
   <img id="calendar_logo"/>
</form>

Run Code Online (Sandbox Code Playgroud)

当用户点击该字段时,浏览器本机日历显示.我需要的是,通过点击calender_logo图像显示该日历.

我尝试使用jQuery设置焦点,但它不起作用:

$('#calendar_logo').click(function(){
        $("#registrationForm input[name='dateOfBirth']").focusin();
});

Run Code Online (Sandbox Code Playgroud)

有人可以帮忙吗？

谢谢!

javascript jquery html5 jquery-mobile

yog*_*gev

lucky-day

5
推荐指数

1
解决办法

1482
查看次数

如何从javascript中的日期输入调用日期选择器？

Chrome 具有本机日期选择器<input type="date">：用于 chrome 中日期输入的日期选择器

我喜欢它，我完全可以让它只在 chrome 中工作。

问题是如何在 javascript 中为此输入字段调用日期选择器？

通常只有输入字段，直到用户将其聚焦并单击小黑色三角形以打开小日历。我想从 javascript 打开它。

如果可能，我想避免使用 3rd 方日期选择器实现。

我试过element.focus()，element.click()等

html javascript datepicker html5-input-date

Mic*_*jer

lucky-day

5
推荐指数

1
解决办法

9888
查看次数

HTML5按钮用于在移动设备上触发日期输入

我有一个HTML5设计,我希望能够使用按钮显示日期,但我想使用HTML5输入类型="日期"来选择日期.

这是我的代码:

<button type="button" id="btnDate" class="btn btn-primary">
    <span class="glyphicon glyphicon-calendar"></span> <span class="date">27 Jul 2015</span>
</button>
<input type="date" class="hidden" id="tbDate" />

<script type="text/javascript">
    $(document).ready(function() {
        $("#btnDate").click(function () {
            $("#tbDate").focus();
        });
    });             
</script>

Run Code Online (Sandbox Code Playgroud)

我尝试过focus()并点击() - 既不工作......任何想法？

javascript jquery html5

ser*_*0ne

lucky-day

5
推荐指数

1
解决办法

2261
查看次数

在 Google Chrome 中隐藏日历图标

有谁知道如何在 Chrome 的日期字段上隐藏日历图标？（输入[类型=“日期]）

当我查找它时，我发现我应该使用“::-webkit-calendar-picker-indicator”，但这似乎不再起作用了......

css sass

Tim*_*jck

lucky-day

5
推荐指数

1
解决办法

5870
查看次数

如何在 Chrome 中更改 <input type=date> 的外观

我已经将日期选择器创建为一个按钮，当悬停它时，它在 chrome 浏览器中看起来很乱。可能是因为它在浏览器中的默认行为，但我可以更改 chrome 上的悬停效果吗？

火狐中的图像：

默认 <input type=date>

按钮 <input type=date>

Chrome 中的图像：

默认<input type=date>（悬停时）

按钮<input type=date>（悬停时）

有什么办法可以消除 chrome 上的悬停效果？

默认输入：

<input type="date"  id="myInput">

Run Code Online (Sandbox Code Playgroud)

用 CSS 编辑：

.date-picker-button {
  background: #8DBF42;
  color: #fff;
  position: relative;
  cursor: pointer;
  margin-bottom: 10px;
  border: 2px solid #8DBF42;
  font-size: 14px;
  padding: 12px;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -o-border-radius: 3px;
  width: 300px;
}

.input-group {
  position: relative;
  border: 2px solid #cdd7e1;
  margin-bottom: 10px;
  display: block !important;
  width: 300px;
  border: none; …

Run Code Online (Sandbox Code Playgroud)

html css datepicker html5-input-date

Khu*_*ela

2018 04-25

4
推荐指数

1
解决办法

2万
查看次数