date type input에 placeholder 만들기

Tip

date type input에 placeholder 만들기

CodeMania 2021. 12. 21. 15:32

date type inptu에 placeholder를 넣고싶다는 생각이 들었다.
그런데 찾아보니까 내가 원하는대로 동작하는 코드는 딱히 없었다.
그래서 직접 작성했다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
      .date_empty:before {
        content: attr(data-placeholder);
        width: calc(100% - 42px);
      }
    </style>
  </head>

  <body>
    <input
      type="date"
      class="date_empty placeholder-date"
      style="width: 200px"
      data-placeholder="날짜 입력"
    />
    <script>
      $("input[type=date].placeholder-date").on("change", (e) => {
        const target = $(e.target);
        if (target.val() == "") target.addClass("date_empty");
        else target.removeClass("date_empty");
      });
    </script>
  </body>
</html>

.date_empty:before에서 calc를 사용할 때 %를 사용해서인지 너비가 계속 변하여서

input의 width를 200px로 고정시켜주니 괜찮아졌다.

또한 42px을 빼주는 이유는 맨 끝에 있는 아이콘의 공간을 남겨주기 위한 것이다.

이건.... 그냥 직접 해보면 42px을 빼주는 게 딱 알맞다는 것을 깨닫게 된다.

동작은 다음 링크에서 확인해볼 수 있다!

https://jsfiddle.net/rinkokomong/p5o4u1vj/3/

더 좋은 방법이 있으면, 공유해주세요!!!