HTML_input date對象

Input Date對象是HTML5的新對象。是日期控件。但是沒有placeholder屬性

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

 

1、在PC端，沒有選擇日期的時候，顯示的是年月日字樣，如下圖：

2、在移動端H5頁面，沒有選擇日期的情況下，是空白。在此基礎上，可以自定義placeholder屬性，實現預加載文字。

如：

CSS：

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

HTML：

<input type="date" placeholder="請選擇">

如果input獲取焦點后，應該刪掉placeholder的屬性值

JS：

var dateInput = document.getElementById("XXX");
dateInput.onfocus = function() {
    this.removeAttribute('placeholder');
};
dateInput.onblur = function() {
    if(dateInput.value == '') this.setAttribute('placeholder','請選擇');
};
      

 

3、另外一個需要注意的地方，就是為Input Date對象設置值。

需要設置的是年月日格式的值，如‘2018-09-01’，注意無論是月還是天，都必須保證是兩位，否則無法設置成功，如‘2018-9-1’，無法設置成功。

 

4、另外在webkit內核瀏覽器中，還可以通過偽類設置一些特殊樣式：

如： 

去掉上下調整的按鈕。

 

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

 

下面的例子去掉了年

 

 其他還有一些屬性:

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{}