Vanilla JS Datepicker 사용법

공식 사이트

Vanilla JS Datepicker
데모 사이트
language 한글 파일 다운로드 깃허브

1. 설치

[ 1-1 ] npm

npm install --save-dev vanillajs-datepicker 

[ 1-2 ] cdn

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.3.4/dist/css/datepicker.min.css">
<script src="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.3.4/dist/js/datepicker-full.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.3.4/dist/js/datepicker.min.js"></script>

2. 사용법

[ 2-1 ] input datepicker

<input type="text" name="foo">

// 상황에 맞게 아래 세개 중 하나로 Datepicker를 inmport 한다.
import Datepicker from 'path/to/node_modules/vanillajs-datepicker/js/Datepicker.js';
import { Datepicker } from 'vanillajs-datepicker';
import Datepicker from 'vanillajs-datepicker/Datepicker';

const elem = document.querySelector('input[name="foo"]');
const datepicker = new Datepicker(elem, {
  // ...options
}); 

input을 클릭하면 datepicker가 나온다.

[ 2-2 ] inline datepicker

<div id="foo" data-date="01/25/2020"></div>

const elem = document.getElementById('foo');
const datepicker = new Datepicker(elem, {
  // ...options
}); 

[ 2-3 ] date range picker

<div id="foo">
  <input type="text" name="start">
  <span>to</span>
  <input type="text" name="end">  
</div>

// 상황에 맞게 아래 세개 중 하나로 Datepicker를 inmport 한다.
import DateRangePicker from 'path/to/node_modules/vanillajs-datepicker/js/DateRangePicker.js';
import { DateRangePicker } from 'vanillajs-datepicker';
import DateRangePicker from 'vanillajs-datepicker/DateRangePicker';

const elem = document.getElementById('foo');
const rangepicker = new DateRangePicker(elem, {
  // ...options
}); 

3. Options

[ 3-1 ] language

npm 설치했을 때

import Datepicker from 'path/to/node_modules/vanillajs-datepicker/js/Datepicker.js';
import es from 'path/to/node_modules/vanillajs-datepicker/js/i18n/locales/es.js';
import fr from 'path/to/node_modules/vanillajs-datepicker/js/i18n/locales/fr.js';
import zhCN from 'path/to/node_modules/vanillajs-datepicker/js/i18n/locales/zh-CN.js';

Object.assign(Datepicker.locales, es, fr, zhCN);

import Datepicker from 'vanillajs-datepicker/Datepicker';
import es from 'vanillajs-datepicker/locales/es';
import fr from 'vanillajs-datepicker/locales/fr';
import zhCN from 'vanillajs-datepicker/locales/zh-CN';

Object.assign(Datepicker.locales, es, fr, zhCN);

둘 중 하나 선택

cdn

<script src="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.3.4/dist/js/datepicker-full.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.3.4/dist/js/locales/es.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.3.4/dist/js/locales/fr.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.3.4/dist/js/locales/zh-CN.js"></script>

custom locale

  Datepicker.locales.ko = {
    days: ['일요일', '월요일', '화요일', '수요일', '목요일', '금요일', '토요일'],
    daysShort: ['일', '월', '화', '수', '목', '금', '토'],
    daysMin: ['일', '월', '화', '수', '목', '금', '토'],
    months: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
    monthsShort: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
    today: '오늘',
    clear: '삭제',
    format: 'yyyy-mm-dd',
    titleFormat: 'y년 m월',
    weekStart: 0,
  };