728x90
반응형
JavaScript에서 Toast UI datepicker 사용법
1️⃣ header에 링크 추가
<!-- toast UI -->
<link rel="stylesheet" href="https://uicdn.toast.com/tui.date-picker/latest/tui-date-picker.css" />
2️⃣ body에 script 추가
<script src="https://uicdn.toast.com/tui.date-picker/latest/tui-date-picker.js"></script>
3️⃣ datepicker 불러 올 area에 아래의 태그 삽입
<span class="tui-datepicker-input tui-datetime-input tui-has-focus">
<input type="text" id="datepicker-input" aria-label="Date-Time">
<span class="tui-ico-date"></span>
</span>
<div id="tui-datepicker" style="margin-top: -1px;"></div>
4️⃣ script 태그 안에 아래의 코드 넣기
$(document).ready(function () {
var datepicker = new tui.DatePicker('#tui-datepicker',
{
language: 'en',
date: new Date(),
input: {
element: '#datepicker-input',
format: 'yyyy-MM-dd'
}
});
});
참고
language 옵션이 있다고 알고 있었는데 language: 'ko'는 설정이 안돼서 'en'으로 설정
전체 코드
<!DOCTYPE p PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>toast ui</title>
<!-- toast UI -->
<link rel="stylesheet" href="https://uicdn.toast.com/tui.date-picker/latest/tui-date-picker.css" />
</head>
<body>
<script src="https://uicdn.toast.com/tui.date-picker/latest/tui-date-picker.js"></script>
<span class="tui-datepicker-input tui-datetime-input tui-has-focus">
<input type="text" id="datepicker-input" aria-label="Date-Time">
<span class="tui-ico-date"></span>
</span>
<div id="tui-datepicker" style="margin-top: -1px;"></div>
<script>
$(document).ready(function () {
var datepicker = new tui.DatePicker('#tui-datepicker',
{
language: 'en',
date: new Date(),
input: {
element: '#datepicker-input',
format: 'yyyy-MM-dd'
}
});
});
</script>
</body>
</html>반응형
'프로그래밍 > JavaScript' 카테고리의 다른 글
| [JavaScript] 배열 특정 값 찾기 (0) | 2022.11.15 |
|---|---|
| [Error] Uncaught TypeError: Cannot read property 'addEventListener' of null (0) | 2022.09.27 |
| [JavaScript] a 태그 링크 막는 방법 e.preventDefault() (0) | 2022.03.31 |
| Uncaught TypeError: $(...). is not a function 오류 (0) | 2021.12.17 |
| 클릭 시 alert창 띄우기 (0) | 2021.09.07 |