input - date 외

Cross Browsing

type	chrome	opera	firefox	safari	edge	ie	ios	Android
date	O	O	O	?	O	x	O	O
datetime-local	O	O	△	?	O	x	O	O
month	O	O	x	?	O	x	O	O
week	O	O	x	?	O	x	x	O
time	O	O	x	?	O	x	O	O

• date
• datetime-local
• month
• week
• time

※ firefox : 달력만 제공

view

html

<!-- date -->
<input type="date" class="o-input o-input--date" min="2022-01-01" max="9999-12-31" value="2022-01-01">

<!-- datetime-local -->
<input type="datetime-local" class="o-input o-input--date" min="2022-01-01T00:00" max="9999-12-31T00:00" value="2022-01-01T12:00">

<!-- month -->
<input type="month" class="o-input o-input--date" min="2022-01" max="9999-12" value="2022-01">

<!-- week -->
<input type="week" class="o-input o-input--date" min="2022-W01" max="9999-W52" value="2022-W01">

<!-- time -->
<input type="time" class="o-input o-input--date" min="09:00" max="18:00" value="12:00">

• 입력글자 제한을 하려면 max 값 필요. 없으면 연도 6자리까지 입력 가능

Screen Reader 음성 출력

• Sense Reader

  [[Date Editor]]
  링크
  연도: 2022 스핀버튼
  월: 01 스핀버튼
  일: 01 스핀버튼
  날짜 선택도구 표시 풀다운 버튼메뉴
  
  [[Date Editor]]
  링크
  연도: 2022 스핀버튼
  월: 01 스핀버튼
  일: 01 스핀버튼
  오전/오후: 오후 스핀버튼
  시간: 12 스핀버튼
  분: 00 스핀버튼
  현지 날짜 및 시간 선택도구 표시 풀다운 버튼메뉴
  
  [[Date Editor]]
  링크
  연도: 2022 스핀버튼
  월: 01 스핀버튼
  월 선택도구 표시 풀다운 버튼메뉴
  
  [[Date Editor]]
  링크
  연도: 2022 스핀버튼
  주: 01 스핀버튼
  주 선택도구 표시 풀다운 버튼메뉴
  
  링크
  오전/오후: 오후 스핀버튼
  시간: 12 스핀버튼
  분: 00 스핀버튼
  시간 선택도구 표시 풀다운 버튼메뉴

• NVDA

  날짜 입력 연도 스핀 버튼 2022
  월 스핀 버튼 01
  일 스핀 버튼 01
  날짜 선택도구 표시 메뉴 버튼 하위 메뉴
  
  날짜 입력 연도 스핀 버튼 2022
  월 스핀 버튼 01
  일 스핀 버튼 01
  오전/오후 스핀 버튼 오후
  시간 스핀 버튼 12
  분 스핀 버튼 00
  현지 날짜 및 시간 선택도구 표시 메뉴 버튼 하위 메뉴
  
  날짜 입력 연도 스핀 버튼 2022
  월 스핀 버튼 01
  월 선택도구 표시 메뉴 버튼 하위 메뉴
  
  날짜 입력 연도 스핀 버튼 2022
  주 스핀 버튼 01
  주 선택도구 표시 메뉴 버튼 하위 메뉴
  
  오전/오후 스핀 버튼 오후
  시간 스핀 버튼 12
  분 스핀 버튼 00
  시간 선택도구 표시 메뉴 버튼 하위 메뉴

• VoiceOver

  .2022. 1. 1., 팝업 버튼, 픽커를 활성화하려면 이중 탭하십시오. Android
  .2022. 1. 1. 오후 12 (사용은 가능하지만 VoiceOver에서는 읽어주지 않음)
  .2022년 1월 (사용은 가능하지만 VoiceOver에서는 읽어주지 않음)
  .2022-W01 (ios 지원 안함)
  오후 12, 팝업 버튼, 픽커를 활성화하려면 이중 탭하십시오.

• TalkBack

  .2022년 1월 1일 날짜 선택 도구
  .2022년 1월 1일 T12:00 local 날짜 및 시간 선택 도구
  .2022 01 월 선택 도구
  .2022 -w1 주 선택 도구
  .12시 시간 선택 도구

css

// date
.o-input--date {
  display: block;
  width: 100%;
  height: 45px;
  padding: 0 14px;
  border: 1px solid #ccc;
  background-color: #fff;
  font-size: 15px;
  line-height: 43px;
  text-align: left;
  -webkit-appearance: none !important; // icon - android

  &:hover,
  &:focus {
    border-color: #000;
  }

  &[readonly],
  &:disabled {
    border-color: #ccc !important; // hover, focus 시 border color 변경 X
    background-color: #f4f4f4;
    cursor: default;
  }

  // default style
  // icon
  &::-webkit-inner-spin-button,
  &::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
  }
}

• 기본 아이콘은 테마에 따라 색이 변경되어 background-color 컬러와 같을 경우 안보이게 됨
• 기본 아이콘은 브라우저마다 모양이 다르며, 안드로이드에서만 화살표로 표시됨
• -webkit-calendar-picker-indicator 속성으로 아이콘을 제거 할 수 있으나,
  안드로이드는 input에 -webkit-appearance 속성으로 제거 가능

참고

• <input type="date">
• <input type="datetime-local">
• <input type="month">
• <input type="week">
• <input type="time">