HTML_input date对象

Input Date对象是HTML5的新对象。是日期控件。可是没有placeholder属性

<input type="date" id="XXX" value="XXXX"/>

 

一、在PC端，没有选择日期的时候，显示的是年月日字样，以下图：

二、在移动端H5页面，没有选择日期的状况下，是空白。在此基础上，能够自定义placeholder属性，实现预加载文字。

如：

CSS：

1 input[type="date"]:before {
2     content: attr(placeholder);
3     color:#666666;
4 }

HTML：

1 <input type="date" placeholder="请选择">

若是input获取焦点后，应该删掉placeholder的属性值

JS：

1 var dateInput = document.getElementById("XXX");
2 dateInput.onfocus = function() {
3     this.removeAttribute('placeholder');
4 };
5 dateInput.onblur = function() {
6     if(dateInput.value == '') this.setAttribute('placeholder','请选择');
7 };
8       

 

三、另一个须要注意的地方，就是为Input Date对象设置值。

须要设置的是年月日格式的值，如‘2018-09-01’，注意不管是月仍是天，都必须保证是两位，不然没法设置成功，如‘2018-9-1’，没法设置成功。

 

四、另外在webkit内核浏览器中，还能够经过伪类设置一些特殊样式：

如： 

去掉上下调整的按钮。

 

1 input::-webkit-inner-spin-button {
2     display: none;
3 }

 

下面的例子去掉了年

 

 其余还有一些属性:

input::-webkit-datetime-edit-text{}  // 控制斜杠

其余一些属性，能够本身研究。

input::-webkit-datetime-edit{}

input::-webkit-datetime-edit-fields-wrapper{}

input::-webkit-datetime-edit-ampm-field{}

input::-webkit-datetime-edit-day-field{}

input::-webkit-datetime-edit-hour-field{}

input::-webkit-datetime-edit-millisecond-field{}

input::-webkit-datetime-edit-minute-field{}

input::-webkit-datetime-edit-month-field{}

input::-webkit-datetime-edit-second-field{}

input::-webkit-datetime-edit-week-field{}

input::-webkit-datetime-edit-year-field{}

input::-webkit-datetime-edit-ampm-field:focus{}

input::-webkit-datetime-edit-day-field:focus{}

input::-webkit-datetime-edit-hour-field:focus{}

input::-webkit-datetime-edit-millisecond-field:focus{}

input::-webkit-datetime-edit-minute-field:focus{}

input::-webkit-datetime-edit-month-field:focus{}

input::-webkit-datetime-edit-second-field:focus{}

input::-webkit-datetime-edit-week-field:focus{}

input::-webkit-datetime-edit-year-field:focus{}

input::-webkit-datetime-edit-year-field[disabled]{}
input::-webkit-datetime-edit-month-field[disabled]{}

input::-webkit-datetime-edit-week-field[disabled]{}

input::-webkit-datetime-edit-day-field[disabled]{}

input::-webkit-datetime-edit-ampm-field[disabled]{}

input::-webkit-datetime-edit-hour-field[disabled]{}

input::-webkit-datetime-edit-millisecond-field[disabled]{}

input::-webkit-datetime-edit-minute-field[disabled]{}

input::-webkit-datetime-edit-second-field[disabled]{}

input::-webkit-datetime-edit-text{}

input::-webkit-inner-spin-button{}

input::-webkit-calendar-picker-indicator{}

input::-webkit-calendar-picker-indicator:hover{}