css + js ) input date 커스텀

input[type='date']가 처음 로딩됐을 떄 placehorder의 내용으로 보여지게 하고 날짜를 선택하면 해당 날짜가 보여지게 함

 

HTML

<input className='has-value' type='date' data-placeholder='From' onchange={dataChange} />

CSS

input[type="date"] {position:relative; padding:14px; width:150px; height:30px; font-size:14px; color:#999; border:none; border-bottom:1px solid #e0e0e0;}
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;}
input[type="date"].has-value::before {content:attr(data-placeholder); width:100%;}

JS

const dataChange = (e) => {
  const target = $(e.target);
  if (target.val() == '') {
    target.addClass('has-value');
  } else {
    target.removeClass('has-value');
}

input의 value값의 유무로 클래스를 첨삭하여 placehorder의 내용을 보였다 안보였다 함

 

결과

기본 출력폼

 

날짜를 선택했을 때