Date Picker

날짜, 시간 또는 기간을 직접 입력하거나 달력에서 선택합니다.

<sy-datepicker>설치 안내 기본 사용법

Live preview

컴포넌트를 조작하면 여기에 결과가 표시됩니다.

코드 보기

HTML

<sy-datepicker
  variant="date"
  mode="day"
  placeholder="날짜 선택"
  format="yyyy-MM-dd"
  year="2026"
  month="10"
  day="15"
  hour="09"
  minute="30"
  second="00"
  name="date"
  id="sample"
  aria-label="날짜 선택"
></sy-datepicker>

사용 가이드

날짜·시간을 고를 때 사용합니다. 입력할 값의 범위에 맞춰 variant를 선택하세요.

오류 문구는 error 슬롯에 작성합니다.
컴포넌트 안에 <span slot="error">오류 메시지</span>을 넣으세요. 글자뿐 아니라 링크 등 필요한 안내도 넣을 수 있습니다. noNativeValidity를 지원하는 입력은 이를 켜면 브라우저 팝업 대신 이 안내를 표시합니다. Switch는 항상 컴포넌트 아래에 오류를 표시합니다.
업무 규칙의 실패는 setCustomError()로 알립니다.
예를 들어 서버가 중복된 값을 거절하면 error 슬롯의 문구를 바꾸고 setCustomError()를 호출하세요. 이 메서드에는 메시지 인자를 전달하지 않습니다. 사용자 지정 오류가 있으면 폼 제출도 차단됩니다.
해결 후 해제하고 제출 가능 여부를 확인합니다.
clearCustomError()로 업무 규칙 오류를 해제하세요. required나 입력 형식 검사까지 해제되지는 않습니다. await checkValidity()는 true/false를, reportValidity()는 검사 결과와 오류 표시를 함께 제공합니다. name을 지정한 유효한 값은 제출 시 FormData로 읽습니다.

날짜

date를 사용합니다. mode로 일·월·연도 선택 단위를 정하세요.

날짜와 시간

datetime으로 날짜와 시각을 함께 선택합니다.

기간

range로 시작일과 종료일을 받습니다.

시간

time으로 날짜 없이 시각만 선택합니다.

표시와 폼 연결: format은 yyyy·MM·dd·hh·mm·ss를 사용합니다. name·required로 폼에 연결하고, selected는 확정 선택, changed는 입력 변화로 구분하세요.

예제

날짜와 초기값

2026년 10월 15일을 초기값으로 표시합니다. 달력 또는 텍스트 입력으로 날짜를 바꾸세요.

코드 보기

HTML

<sy-datepicker
  year="2026"
  month="10"
  day="15"
  hour="09"
  minute="30"
  second="00"
  format="yyyy-MM-dd"
  placeholder="날짜 선택"
></sy-datepicker>

날짜와 시간

달력에서 날짜를 고르고 시간까지 설정합니다.

코드 보기

HTML

<sy-datepicker
  year="2026"
  month="10"
  day="15"
  hour="09"
  minute="30"
  second="00"
  variant="datetime"
  format="yyyy-MM-dd hh:mm:ss"
></sy-datepicker>

기간 선택

시작일과 종료일을 각각 선택합니다. 범위의 양 끝을 설정해 결과를 확인하세요.

코드 보기

HTML

<sy-datepicker
  variant="range"
  format="yyyy-MM-dd"
  placeholder="기간 선택"
></sy-datepicker>

시간만 선택

날짜를 표시하지 않고 시·분·초를 입력하거나 목록에서 선택합니다.

코드 보기

HTML

<sy-datepicker
  year="2026"
  month="10"
  day="15"
  hour="09"
  minute="30"
  second="00"
  variant="time"
  format="hh:mm:ss"
  placeholder="시간 선택"
></sy-datepicker>

월과 연도 선택

집계 기간처럼 날짜까지 필요하지 않은 경우 선택 단위와 표시 형식을 함께 바꿉니다.

코드 보기

HTML

<div style="display:grid;gap:16px;width:100%">
  <sy-datepicker
    year="2026"
    month="10"
    day="15"
    hour="09"
    minute="30"
    second="00"
    mode="month"
    format="yyyy-MM"
    placeholder="월 선택"
  ></sy-datepicker>
  <sy-datepicker
    year="2026"
    month="10"
    day="15"
    hour="09"
    minute="30"
    second="00"
    mode="year"
    format="yyyy"
    placeholder="연도 선택"
  ></sy-datepicker>
</div>

업무일 중심의 달력

월요일부터 시작하고 주말을 숨깁니다. 요일 문구는 일요일부터 토요일 순서의 문자열로 전달합니다.

코드 보기

HTML

<sy-datepicker
  year="2026"
  month="10"
  day="15"
  hour="09"
  minute="30"
  second="00"
  format="yyyy-MM-dd"
  mondaystart
  hideweekend
  datenames="일,월,화,수,목,금,토"
></sy-datepicker>

달력을 화면에 배치

sy-calendar를 직접 배치할 때는 위치를 relative로 지정합니다. 하위 Calendar의 month는 0부터 시작합니다.

코드 보기

HTML

<sy-calendar
  year="2026"
  month="9"
  day="15"
  mondaystart
  style="position:relative;align-self:center"
></sy-calendar>

비활성화와 읽기 전용

날짜를 표시하면서 선택과 편집을 제한합니다.

코드 보기

HTML

<div style="display:grid;gap:16px;width:100%">
  <sy-datepicker
    year="2026"
    month="10"
    day="15"
    hour="09"
    minute="30"
    second="00"
    format="yyyy-MM-dd"
    disabled
  ></sy-datepicker>
  <sy-datepicker
    year="2026"
    month="10"
    day="15"
    hour="09"
    minute="30"
    second="00"
    format="yyyy-MM-dd"
    readonly
  ></sy-datepicker>
</div>

이벤트와 전달 값

컴포넌트를 조작하고 최근 이벤트의 이름과 detail 값을 확인하세요. 코드에는 이 컴포넌트와 하위 구성 요소가 보내는 이벤트의 구독 방법이 모두 포함되어 있습니다.

코드 보기

HTML

<sy-datepicker
  variant="date"
  mode="day"
  placeholder="날짜 선택"
  format="yyyy-MM-dd"
  year="2026"
  month="10"
  day="15"
  hour="09"
  minute="30"
  second="00"
  name="date"
  id="sample"
  aria-label="날짜 선택"
></sy-datepicker>
<output id="demo-events" aria-live="polite">컴포넌트를 조작하면 최근 이벤트와 전달 값이 표시됩니다.
</output>

<script type="module">
  const describeResult = value => JSON.stringify(value, (_key, item) => {
    if (item instanceof File) return {
      name: item.name,
      size: item.size,
      type: item.type
    };
    if (item instanceof Element) return `<${item.localName}>`;
    return item;
  }) ?? '완료';
  for (const name of ["changed", "selected", "closed", "entered", "mode-changed"]) {
    document.addEventListener(name, event => {
      document.querySelector('#demo-events').textContent =
        `${event.target.localName} · ${name}: ${describeResult(event.detail)}`;
    });
  }
</script>

달력에 기간 표시

하위 Calendar를 직접 배치하면 rangestart와 rangeend를 객체로 전달할 수 있습니다. Calendar 계열의 month는 0부터 시작합니다. active는 현재 편집 중인 start 또는 end입니다.

코드 보기

HTML

<sy-calendar
  year="2026"
  month="9"
  day="15"
  active="start"
  variant="range"
  id="sample"
  style="position:relative"
></sy-calendar>

<script type="module">
  const component1 = document.querySelector("#sample");
  Object.assign(component1, {
    "rangestart": {
      "year": 2026,
      "month": 9,
      "day": 10
    },
    "rangeend": {
      "year": 2026,
      "month": 9,
      "day": 20
    }
  });
</script>

시간 구분자와 확인 버튼

Timepicker를 직접 사용할 때 timeSeparator로 시·분·초 사이의 기호를 지정하고 hideButton으로 확인 버튼을 숨길 수 있습니다.

코드 보기

HTML

<sy-timepicker
  hour="9"
  minute="30"
  second="0"
  timeseparator="."
  hidebutton
  style="position:relative"
></sy-timepicker>

폼과 유효성 검사

날짜가 없으면 제출할 수 없습니다. 날짜를 선택한 뒤 제출되는 값과 사용자 지정 오류를 확인하세요.

코드 보기

HTML

<form style="display:grid;gap:16px">
  <sy-datepicker
    name="schedule"
    required
    format="yyyy-MM-dd"
    placeholder="필수 날짜"
    id="sample"
  ><span slot="error">날짜를 선택하세요.</span></sy-datepicker>
  <div style="display:flex;flex-wrap:wrap;gap:8px">
    <sy-button type="submit" variant="primary">제출</sy-button>
    <sy-button type="reset">초기화</sy-button>
  </div>
</form>
<div class="demo-actions"
  style="display:flex;flex-wrap:wrap;gap:8px;margin-top:16px"
>
  <sy-button id="action-0" size="small">유효성 확인</sy-button>
  <sy-button id="action-1" size="small">오류 표시</sy-button>
  <sy-button id="action-2" size="small">오류 해제</sy-button>
</div>
<output id="demo-result" aria-live="polite"></output>

<script type="module">
  const describeResult = value => JSON.stringify(value, (_key, item) => {
    if (item instanceof File) return {
      name: item.name,
      size: item.size,
      type: item.type
    };
    if (item instanceof Element) return `<${item.localName}>`;
    return item;
  }) ?? '완료';
  const actionTarget0 = document.querySelector("#sample");
  document.querySelector('#action-0').addEventListener('click', async () => {
    const result = await actionTarget0.checkValidity();
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
  const actionTarget1 = document.querySelector("#sample");
  document.querySelector('#action-1').addEventListener('click', async () => {
    const result = await actionTarget1.setCustomError();
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
  const actionTarget2 = document.querySelector("#sample");
  document.querySelector('#action-2').addEventListener('click', async () => {
    const result = await actionTarget2.clearCustomError();
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
  document.querySelector('form').addEventListener('submit', event => {
    event.preventDefault();
    document.querySelector('#demo-result').textContent = describeResult([...new FormData(event
      .currentTarget)]);
  });
</script>

검사 결과와 오류 상태 읽기

제출 전에 검사하거나 오류를 화면에 표시할 수 있습니다. 필수 값을 비워 두고 검사한 다음, 값을 채워 반환 값이 어떻게 달라지는지 확인하세요. 상태 조회는 사용자 지정 오류와 필수 입력 오류를 구분하는 데 사용합니다.

코드 보기

HTML

<form style="display:grid;gap:16px">
  <sy-datepicker
    name="schedule"
    required
    format="yyyy-MM-dd"
    placeholder="필수 날짜"
    id="sample"
  ><span slot="error">날짜를 선택하세요.</span></sy-datepicker>
  <div style="display:flex;flex-wrap:wrap;gap:8px">
    <sy-button type="submit" variant="primary">제출</sy-button>
    <sy-button type="reset">초기화</sy-button>
  </div>
</form>
<div class="demo-actions"
  style="display:flex;flex-wrap:wrap;gap:8px;margin-top:16px"
>
  <sy-button id="action-0" size="small">유효성 확인</sy-button>
  <sy-button id="action-1" size="small">오류 표시</sy-button>
  <sy-button id="action-2" size="small">오류 해제</sy-button>
  <sy-button id="action-3" size="small">오류와 함께 검사</sy-button>
  <sy-button id="action-4" size="small">검증 상태 조회</sy-button>
</div>
<output id="demo-result" aria-live="polite"></output>

<script type="module">
  const describeResult = value => JSON.stringify(value, (_key, item) => {
    if (item instanceof File) return {
      name: item.name,
      size: item.size,
      type: item.type
    };
    if (item instanceof Element) return `<${item.localName}>`;
    return item;
  }) ?? '완료';
  const actionTarget0 = document.querySelector("#sample");
  document.querySelector('#action-0').addEventListener('click', async () => {
    const result = await actionTarget0.checkValidity();
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
  const actionTarget1 = document.querySelector("#sample");
  document.querySelector('#action-1').addEventListener('click', async () => {
    const result = await actionTarget1.setCustomError();
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
  const actionTarget2 = document.querySelector("#sample");
  document.querySelector('#action-2').addEventListener('click', async () => {
    const result = await actionTarget2.clearCustomError();
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
  const actionTarget3 = document.querySelector("#sample");
  document.querySelector('#action-3').addEventListener('click', async () => {
    const result = await actionTarget3.reportValidity();
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
  const actionTarget4 = document.querySelector("#sample");
  document.querySelector('#action-4').addEventListener('click', async () => {
    const result = await actionTarget4.getStatus();
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
  document.querySelector('form').addEventListener('submit', event => {
    event.preventDefault();
    document.querySelector('#demo-result').textContent = describeResult([...new FormData(event
      .currentTarget)]);
  });
</script>

사용자 지정 오류 메시지

서버 중복 검사나 업무 규칙에 맞지 않을 때 오류 문구를 직접 표시합니다. 아래 문구를 바꿔 보고 제출을 눌러 차단되는지 확인하세요. 오류 해제 후에는 필수 입력 조건까지 만족해야 제출됩니다.

코드 보기

HTML

<label for="error-message">표시할 오류 메시지</label><input
  id="error-message"
  value="서버에서 이 값을 승인하지 않았습니다. 내용을 확인해 주세요."
  type="text"
>
<form style="display:grid;gap:16px">
  <sy-datepicker
    no-native-validity
    name="schedule"
    required
    format="yyyy-MM-dd"
    placeholder="필수 날짜"
    id="sample"
  ><span slot="error">날짜를 선택하세요.</span></sy-datepicker>
  <div style="display:flex;flex-wrap:wrap;gap:8px">
    <sy-button type="submit" variant="primary">제출</sy-button>
    <sy-button type="reset">초기화</sy-button>
  </div>
</form>
<div class="demo-actions">
  <sy-button id="show-custom-error" variant="primary">오류 표시</sy-button>
  <sy-button id="clear-custom-error">오류 해제</sy-button>
</div>
<output id="custom-error-result" aria-live="polite"></output>
<output id="demo-result" aria-live="polite"></output>

<script type="module">
  const describeResult = value => JSON.stringify(value, (_key, item) => {
    if (item instanceof File) return {
      name: item.name,
      size: item.size,
      type: item.type
    };
    if (item instanceof Element) return `<${item.localName}>`;
    return item;
  }) ?? '완료';
  await (async function customErrorSetup(root) {
    const field = root.querySelector('#sample');
    const message = root.querySelector('[slot="error"]');
    const input = root.querySelector('#error-message');
    const output = root.querySelector('#custom-error-result');
    const update = async () => {
      message.textContent = input.value.trim() || _msg("m_4eea8cef81c6");
      await field.setCustomError();
      output.textContent = _msg("m_e00bd46236d3", [message.textContent]);
    };
    input.addEventListener('input', update);
    root.querySelector('#show-custom-error').addEventListener('click', update);
    root.querySelector('#clear-custom-error').addEventListener('click', async () => {
      await field.clearCustomError();
      output.textContent = await field.checkValidity() ? _msg("m_c454251167b2") : _msg(
        "m_5b8cb48627e5");
    });
    root.querySelector('form').addEventListener('invalid', () => {
      output.textContent = _msg("m_c702c7778166");
    }, true);
    root.querySelector('form').addEventListener('reset', () => {
      output.textContent = _msg("m_b90c2b4dc30f");
    });
    await update();
  })(document);
  document.querySelector('form').addEventListener('submit', event => {
    event.preventDefault();
    document.querySelector('#demo-result').textContent = describeResult([...new FormData(event
      .currentTarget)]);
  });
</script>

기능별 예제

14개 주제에서 필요한 기능을 선택하세요. 속성 설정, 메서드 호출, 이벤트 결과와 슬롯 구성을 실행 화면과 코드로 확인할 수 있습니다.

기능 찾기

사용 예제 · Overview

선택한 예제를 직접 조작해 보세요. 여러 구성이 있는 주제는 세부 예제를 바꿀 수 있습니다.

코드 보기

HTML

예제를 불러오고 있습니다.