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