기초튜토리얼 [Wijmo 시작하기] InputDate(날짜입력) 사용법 - 기본편(2)
페이지 정보
작성자 GCK루시
작성일 2023-09-05 13:42 조회 262회
댓글 0건
본문
관련링크
Wijmo(위즈모)는 비즈니스 애플리케이션의 다양한 요구 조건을 충족할 수 있는 UI 자바스크립트 라이브러리 제품입니다.
그리드(Grid), 차트(Chart), OLAP 피벗, Input (텍스트박스, 콤보박스, 달력 등..)과 같이 데이터를 시각화하고 관리할 수 있는 다양한 UI 컨트롤을 제공하고 있습니다.
Wijmo에는 비즈니스 애플리케이션에서 입력 기능을 폭넓게 지원하고 있습니다.
그 중에서도 빼놓을 수 없는 입력 컨트롤군, Input(입력)이 포함되어 있습니다.
이번 포스팅에서는 날짜 입력과 관련되어 달력 표시 등의 편리한 기능을 갖춘 "InputDate(날짜입력)" 컨트롤의 기본적인 사용법을 소개하도록 하겠습니다.
목차
1. 개발 환경
3. 기본 기능 사용해 보기
- 날짜 형식 설정
- 날짜 범위 제한
4. 마치며
개발 환경
이번 포스팅에서는 하단의 개발 환경을 사용하였습니다.
더불어, 이번 Input 시작하기 글에서 사용할 파일은 아래와 같습니다.
index.html | 페이지 메인. 페이지의 요소로 InputDate 컨트롤을 배치합니다. |
app.js | InputDate 컨트롤 다양한 기능을 구현하기 위한 코드 및 데이터를 입력합니다. |
style.css | 각종 페이지 요소의 스타일 정의를 합니다. |
입력 컨트롤 기능을 사용하는 데 필요한 Wijmo 모듈에 대한 참조 설정은 "index.html"에서 추가합니다.
InputDate 컨트롤의 각종 설정과 데이터를 입력하는 "app.js" 참조 역시 추가됩니다.
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Wijmo 시작하기 - input(2)</title>
<link rel='stylesheet' href='./styles/wijmo.min.css'>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="container">
<div class="options">
<fieldset>
<legend>날짜서식 설정</legend>
<label><input type="radio" id="default_calendar" name="format" value="yyyy/MM/dd" checked />기본</label>
<label><input type="radio" id="kr_calendar" name="format" value="yyyy년MM월dd일" />한국</label>
</fieldset>
<br />
<fieldset>
<legend>날짜 범위 설정</legend>
<label>최소값: <input type="date" id="mindate" /></label>
<br />
<label>최대값: <input type="date" id="maxdate" /></label>
<br />
<label><input type="checkbox" id="exceptweekend">주말 입력 제한</label>
</fieldset>
</div>
<div class="controls">
<div id="Wijmo_InputDate"></div>
</div>
</div>
<script src='./controls/wijmo.min.js'></script>
<script src='./controls/wijmo.input.min.js'></script>
<script src='./controls/cultures/wijmo.culture.ko.min.js'></script>
<script src="./app.js"></script>
</body>
</html>페이지의 요소의 스타일을 "styles.css"에서 정의합니다.
@font-face {
font-family: 'SUITE-Regular';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2304-2@1.0/SUITE-Regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
}
body {
margin:20px;
background-color:#e4e8eb;
}
fieldset{
border: 1px solid gray;
padding-top: 15px;
border-radius: 6px;
}
fieldset legend{
padding: 0 10px;
}
fieldset label{
margin-bottom: 8px;
display: inline-block;
}
.container{
font-family: 'SUITE-Regular' !important;
padding:30px;
display: flex;
max-width: 500px;
background-color: white;
border-radius:5px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
input {
font-family: 'SUITE-Regular' !important;
}
input#mindate, input#maxdate{
width:165px;
}
.options{
width: 250px;
}
.controls{
margin-left: 30px;
margin-top: 10px;
width: 220px;
}InputDate 컨트롤 관련하여 자세한 내용을 살펴보고 싶으시다면 하단의 문서를 참고해 주세요.
InputDate 컨트롤 생성
app.js에 아래 코드를 작성하여 InputDate 컨트롤을 생성합니다.
아래 코드의 경우, 최소한의 설정만 입력되어 있습니다.
InputDate의 기본 기능은 다음 섹션에서 설정하도록 하겠습니다.
document.addEventListener("DOMContentLoaded", function () {
//【초기 설정】
// InputDate 생성하기
const day = new Date();
const inputDate = new wijmo.input.InputDate('#Wijmo_InputDate', {
format: "yyyy-MM-dd",
min: new Date(day.getFullYear(), day.getMonth(), 1),
max: new Date(day.getFullYear(), day.getMonth() + 1, 0),
});
inputDate.calendar.formatYearMonth = 'MM-yyyy';
// 날짜 범위 설정용 input 태그
const minDate = inputDate.min.getFullYear().toString() + '-' +
(inputDate.min.getMonth() + 1).toString().padStart(2, '0') + '-' +
inputDate.min.getDate().toString().padStart(2, '0');
document.querySelector('#mindate').value = minDate;
const maxDate = inputDate.max.getFullYear().toString() + '-' +
(inputDate.max.getMonth() + 1).toString().padStart(2, '0') + '-' +
inputDate.max.getDate().toString().padStart(2, '0');
document.querySelector('#maxdate').value = maxDate;
InputDate 컨트롤에서 설정된 속성은 다음과 같습니다.
format | 날짜 표시 형식 설정 |
min | 입력 가능한 최소 날짜 |
max | 입력 가능한 최대 날짜 |
결과는 아래와 같습니다.
기본 기능 사용해 보기
InputDate 컨트롤의 기본 기능에 대해 소개하도록 하겠습니다.
- 날짜 형식 설정
- 날짜 범위 제한
- 외관 사용자 정의
날짜 형식 설정
날짜 형식은 .NET 형식의 날짜 형식 문자열을 사용하여 지정합니다.
샘플에서는 라디오 버튼을 사용하여 일반 서식과 한국 달력 서식으로 전환합니다.
또한, dropdown 달력 헤더의 월 서식과, 팝업 화면 헤더의 년도와 날짜 형식도 전환하도록 합니다.
app.js에 다음 코드를 추가하여 날짜 형식을 전환하는 기능을 구현합니다.
// 【날짜 서식 설정】
// 일반 달력
document.querySelector('#default_calendar').addEventListener('click', e => {
inputDate['format'] = e.target.value;
inputDate.calendar.formatYearMonth = 'MM/yyyy';
inputDate.calendar.formatYear = 'yyyy';
});
// 국내 달력
document.querySelector('#kr_calendar').addEventListener('click', e => {
inputDate['format'] = e.target.value;
inputDate.calendar.formatYearMonth = 'yyyy년 MM월';
inputDate.calendar.formatYear = 'yyyy년';
});일반 서식을 선택할 때 InputDate 컨트롤은 다음과 같습니다.
한국 서식 표시에서는 아래와 같이 변환되어 보여집니다.
날짜 범위 제한
입력 가능한 날짜 범위는 min, max 속성으로 설정됩니다.
앞서 설명한 것처럼 input 태그(type=date)로 지정한 날짜가 InputDate 컨트롤로 설정됩니다.
또한 itemValidator 속성에 날짜 선택 여부를 결정하는 함수를 설정하여 주말(토요일과 일요일)을 선택하지 못하도록 제한할 수 있습니다.
체크박스에서 주말 선택 여부를 전환하도록 합니다.
설명드린 기능을 구현하기 위해 다음 코드를 추가해 보겠습니다.
// 【날짜 범위 제한】
// 최소값 설정
document.querySelector('#mindate').addEventListener('input', e => {
const value = e.target.value;
inputDate['min'] = value.replace(/(\d+)-(\d+)-(\d+)/, '$1\/$2\/$3');
});
// 최대값 설정
document.querySelector('#maxdate').addEventListener('input', e => {
const value = e.target.value;
inputDate['max'] = value.replace(/(\d+)-(\d+)-(\d+)/, '$1\/$2\/$3');
});
// 주말 입력 제한
document.querySelector('#exceptweekend').addEventListener('click', e => {
if(e.target.checked == true){
inputDate['itemValidator'] = (date) => {
const weekday = date.getDay();
return weekday != 0 && weekday != 6;
};
}else{
inputDate['itemValidator'] = (date) => {
return true;
};
}
});
스타일 사용자 정의
마지막으로 드롭다운 캘린더 요소를 커스텀 설정하는 방법을 소개합니다.
- 드롭다운 버튼 아이콘
- 날짜 헤더 스타일
- 선택 날짜 스타일
- 주말과 휴일 스타일
드롭다운 버튼은 "wj-glyph-down"과 "wj-glyph-calendar"의 두 내장 아이콘으로 전환합니다.
※ 기본값은 "wj-glyph-down"이 사용되며 아래 표를 참고하시기 바랍니다.
wj-glyph-calendar | |
wj-glyph-down | |
'날짜 헤더'는 달력의 요일을 표시하는 부분으로, 해당 문자색과 배경색을 변경합니다.
또한 주말과 휴일 스타일을 설정하려면 주말과 휴일을 결정하는 메커니즘(체제)이 필요합니다.
데이터와 판별을 위한 함수는 “app.js”에 기재되어 있습니다.
※ app.js에 기재하고 있는 휴일 데이터는, 2023년을 기준으로 합니다.
아래 코드를 'app.js', 'styles.css'에 각각 추가하여 모양을 사용자 정의합니다.
app.js
// 【외관의 커스터마이징】
// 드롭다운 버튼 변경
inputDate._btn.firstChild.firstChild.className = 'wj-glyph-calendar';
// 주말과 휴일 스타일 변경
inputDate.calendar.formatItem.addHandler((sender, e) => {
const weekday = e.data.getDay();
const holiday = getHoliday(e.data);
wijmo.toggleClass(e.item, 'date-sunday', weekday == 0);
wijmo.toggleClass(e.item, 'date-saturday', weekday == 6);
wijmo.toggleClass(e.item, 'date-holiday', holiday != null);
e.item.title = holiday || '';
});const holidays = {
'1/1': '신정',
'1/21': '설날',
'1/22': '설날',
'1/23': '설날',
'3/1': '삼일절',
'5/5': '어린이날',
'5/27': '부처님오신날',
'6/6': '현충일',
'8/15': '광복절',
'9/28': '추석',
'9/29': '추석',
'9/30': '추석',
'10/3': '개천절',
'10/9': '한글날',
'12/25': '크리스마스'
};
function getHoliday(date) {
const day = date.getDate();
const month = date.getMonth() + 1;
let holiday = holidays[month + '/' + day];
if (!holiday) {
const weekDay = date.getDay();
const weekNum = Math.floor((day - 1) / 7) + 1;
holiday = holidays[month + '/' + weekNum + '/' + weekDay];
}
return holiday;
}styles.css
.date-sunday, .date-holiday{
color: red;
}
.date-saturday{
color: blue;
}
#Wijmo_InputDate{
width:100%;
}
.wj-header{
color: white;
background-color: steelblue;
}
.wj-state-selected{
color: white;
background-color: navy;
}
.wj-calendar-outer{
border: 0;
}스타일을 설정하면 다음과 같은 화면이 나오게 됩니다.
더불어 샘플을 공유드리오니 참고 부탁드립니다.
마치며
Wijmo Input 컨트롤 중 InputDate의 기본 기능에 대해 알아보았습니다.
Wijmo에는 InputDate 컨트롤 외에도 MultiSelect, AutoComplete, ComboBox, InputNumber 등 다양한 Input 컨트롤이 준비되어 있습니다.
다양한 애플리케이션에 최적의 입력 기능을 제공하는 Wijmo를 이용하여 개발해 보시길 바랍니다.
다음 포스팅에서는 Gauge 컨트롤 사용법(기본기능편)에 대해 소개하도록 하겠습니다.
다음 시리즈 글도 기대해 주세요!
감사합니다.
지금 바로 Wijmo를 다운로드하여 직접 테스트해 보세요!
댓글목록
등록된 댓글이 없습니다.
