본문 바로가기

jQuery/w2ui

[w2ui] w2ui 캘린더 한글 달력으로 변환히기

반응형

해당포스팅은 [w2ui] w2ui 설정하기의 세팅서 설정한 내용을 기본으로 하여 작성되었습니다.





■ w2ui기본 캘린더 출력



01. 아래는 w2ui 기본 캘린더를 출력하는 예제이다.

 w2ui_date.php

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>W2UI</title>
<link rel="stylesheet" type="text/css" href="./css/w2ui-1.4.3.css"/>
<script type="text/javascript" src="./js/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="./js/w2ui-1.4.3.js"></script>
<style type="text/css">
.block {
    padding-top:20px;
    padding-bottom:10px;
    color:#999;
}
.w2ui-div {
    float:left;
    padding:4px;
    border:1px solid silver;
    border-radius:3px;
}
.w2ui-field input {
    width:90px;
}
.w2ui-field > div > span {
    margin-left:20px;
}
</style>
</head>
<body>
<div class="w2ui-div">
    <div class="block">
        <b>US Format</b>
    </div>
    <div class="w2ui-field">
        <label>Date:</label>
        <div> <input type="us-date"> </div>
    </div>
</div>
<div class="w2ui-div">
    <div class="block">
        <b>EU Common Format</b>
    </div>
    <div class="w2ui-field">
        <label>Date:</label>
        <div> <input type="eu-date"> </div>
    </div>
</div>
<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery("input[type=us-date]").w2field("date");
    jQuery("input[type=eu-date]").w2field("date",  {format:"d.m.yyyy"});    // format : 날짜 형식을 포맷
});
</script>
</body>
</html>



02. 출력하면 아래와 같은 결과가 나오는 것을 확인 할 수 있다.


① US Format




② EU Common Format








한국시간 형식에 맞게 변환한 캘린더 출력하기




01. 사용중인 w2ui-1.4.3.js를 텍스트 에디터로 오픈한다.




02. 아래 코드 내용에서 영문으로 날짜형식이 세팅된 것을 확인 할 수 있다.


 w2ui-1.4.3.js(수정전)

var w2utils = (function () {
    var tmp = {}; // for some temp variables
    var obj = {
        version  : '1.4.3',
        settings : {
            "locale"            : "en-us",
            "date_format"       : "m/d/yyyy",
            "date_display"      : "Mon d, yyyy",
            "time_format"       : "hh:mi pm",
            "currencyPrefix"    : "$",
            "currencySuffix"    : "",
            "currencyPrecision" : 2,
            "groupSymbol"       : ",",
            "decimalSymbol"     : ".",
            "shortmonths"       : ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
            "fullmonths"        : ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
            "shortdays"         : ["M", "T", "W", "T", "F", "S", "S"],
            "fulldays"          : ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
            "dataType"          : 'HTTP',
            "phrases"           : {}
        },



        ---- 이하 생략 ----



        getMonthHTML: function (month, year) {
            var td         = new Date();
            var months     = w2utils.settings.fullmonths;
            var days       = w2utils.settings.fulldays;
            var daysCount  = ['31', '28', '31', '30', '31', '30', '31', '31', '30', '31', '30', '31'];
            var today      = td.getFullYear() + '/' + (Number(td.getMonth()) + 1) + '/' + td.getDate();
            // normalize date
            year  = w2utils.isInt(year)  ? parseInt(year)  : td.getFullYear();
            month = w2utils.isInt(month) ? parseInt(month) : td.getMonth() + 1;
            if (month > 12) { month -= 12; year++; }
            if (month < 1 || month === 0)  { month += 12; year--; }
            if (year/4 == Math.floor(year/4)) { daysCount[1] = '29'; } else { daysCount[1] = '28'; }
            this.options.current = month + '/' + year;

            // start with the required date
            td = new Date(year, month-1, 1);
            var weekDay = td.getDay() + 1;
            var tabDays = w2utils.settings.shortdays;
            var dayTitle = '';
            for ( var i = 0, len = tabDays.length; i < len; i++) {
                dayTitle += '<td>' + tabDays[i] + '</td>';
            }
            var html  =
                '<div class="w2ui-calendar-title title">'+
                '    <div class="w2ui-calendar-previous previous"> <div></div> </div>'+
                '    <div class="w2ui-calendar-next next"> <div></div> </div> '+
                        months[month-1] +', '+ year +
                '</div>'+
                '<table class="w2ui-calendar-days" cellspacing="0">'+
                '    <tr class="w2ui-day-title">' + dayTitle + '</tr>'+
                '    <tr>';

            var day = 1;
            for (var ci=1; ci<43; ci++) {
                if (weekDay === 0 && ci == 1) {
                    for (var ti=0; ti<6; ti++) html += '<td class="w2ui-day-empty">&nbsp;5</td>';
                    ci += 6;
                } else {
                    if (ci < weekDay || day > daysCount[month-1]) {
                        html += '<td class="w2ui-day-empty">&nbsp;</td>';
                        if ((ci) % 7 === 0) html += '</tr><tr>';
                        continue;
                    }
                }
                var dt  = year + '/' + month + '/' + day;

                var className = '';
                if (ci % 7 == 0)  className  = ' w2ui-saturday';
                if (ci % 7 === 1) className  = ' w2ui-sunday';
                if (dt == today)  className += ' w2ui-today';

                var dspDay  = day;
                var col     = '';
                var bgcol   = '';
                var tmp_dt  = w2utils.formatDate(dt, this.options.format);
                if (this.options.colored && this.options.colored[tmp_dt] !== undefined) { // if there is predefined colors for dates
                    tmp   = this.options.colored[tmp_dt].split(':');
                    bgcol = 'background-color: ' + tmp[0] + ';';
                    col   = 'color: ' + tmp[1] + ';';
                }
                html += '<td class="'+ (this.inRange(tmp_dt) ? 'w2ui-date ' : 'w2ui-blocked') + className + '" style="'+ col + bgcol + '" date="'+ tmp_dt +'">'+
                            dspDay +
                        '</td>';
                if (ci % 7 === 0 || (weekDay === 0 && ci == 1)) html += '</tr><tr>';
                day++;
            }
            html += '</tr></table>';
            return html;
        },




03. 이제 위 내용을 한국 달력에 맞게 아래와 같이 수정하여 보자.


 w2ui-1.4.3.js(수정후)

var w2utils = (function () {
    var tmp = {}; // for some temp variables
    var obj = {
        version  : "1.4.3",
        settings : {
            "locale" : "ko-kr",
            "date_format" : "yyyy-mm-dd",
            "date_display" : "yyyy, Mon d",
            "time_format" : "hh:mi pm",
            "currencyPrefix" : "$",
            "currencySuffix" : "",
            "currencyPrecision" : 2,
            "groupSymbol" : ",",
            "decimalSymbol" : ".",
            "shortmonths" : ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
            "fullmonths" : ["1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월"],
            "shortdays" : ["월", "화", "수", "목", "금", "토", "일"],
            "fulldays" : ["월요일", "화요일", "수요일", "목요일", "금요일", "토요일", "일요일"],
            "dataType" : 'HTTP',
            "phrases" : {}
        },



        ---- 이하 생략 ----



        getMonthHTML: function (month, year) {
            var td         = new Date();
            var months     = w2utils.settings.fullmonths;
            var days       = w2utils.settings.fulldays;
            var daysCount  = ['31', '28', '31', '30', '31', '30', '31', '31', '30', '31', '30', '31'];
            var today      = td.getFullYear() + '/' + (Number(td.getMonth()) + 1) + '/' + td.getDate();
            // normalize date
            year  = w2utils.isInt(year)  ? parseInt(year)  : td.getFullYear();
            month = w2utils.isInt(month) ? parseInt(month) : td.getMonth() + 1;
            if (month > 12) { month -= 12; year++; }
            if (month < 1 || month === 0)  { month += 12; year--; }
            if (year/4 == Math.floor(year/4)) { daysCount[1] = '29'; } else { daysCount[1] = '28'; }
            this.options.current = month + '/' + year;

            td = new Date(year, month - 1, 1);
            var weekDay = td.getDay() + 1;    // + 1을 더해서 출력일을 한칸 뒤로 미룬다.
            var tabDays = w2utils.settings.shortdays;
            var dayTitle = '';
            for ( var i = 0, len = tabDays.length; i < len; i++) {
                dayTitle += '<td>' + tabDays[i] + '</td>';
            }
            var html  =
                '<div class="w2ui-calendar-title title">'+
                '    <div class="w2ui-calendar-previous previous"> <div></div> </div>'+
                '    <div class="w2ui-calendar-next next"> <div></div> </div> '+

                        // 캘린더의 타이틀 부분을 변경한다.

                        // months[month - 1] +', '+ year +
                        year + '년, ' + months[month - 1] +
                '</div>'+
                '<table class="w2ui-calendar-days" cellspacing="0">'+
                '    <tr class="w2ui-day-title">' + dayTitle + '</tr>'+
                '    <tr>';

            var day = 1;
            for (var ci=1; ci<43; ci++) {
                if (weekDay === 0 && ci == 1) {
                    for (var ti=0; ti<6; ti++) html += '<td class="w2ui-day-empty">&nbsp;5</td>';
                    ci += 6;
                } else {
                    if (ci < weekDay || day > daysCount[month-1]) {
                        html += '<td class="w2ui-day-empty">&nbsp;</td>';
                        if ((ci) % 7 === 0) html += '</tr><tr>';
                        continue;
                    }
                }
                var dt  = year + '/' + month + '/' + day;

                var className = '';

                if (ci % 7 == 0)  className  = ' w2ui-saturday';       // 토요일 날짜를 맨 뒤로 이동한다.
                if (ci % 7 === 1) className  = ' w2ui-sunday';        // 일요일 날짜를 맨 앞으로 이동한다.

                if (dt == today)  className += ' w2ui-today';

                var dspDay  = day;
                var col     = '';
                var bgcol   = '';
                var tmp_dt  = w2utils.formatDate(dt, this.options.format);
                if (this.options.colored && this.options.colored[tmp_dt] !== undefined) { // if there is predefined colors for dates
                    tmp   = this.options.colored[tmp_dt].split(':');
                    bgcol = 'background-color: ' + tmp[0] + ';';
                    col   = 'color: ' + tmp[1] + ';';
                }
                html += '<td class="'+ (this.inRange(tmp_dt) ? 'w2ui-date ' : 'w2ui-blocked') + className + '" style="'+ col + bgcol + '" date="'+ tmp_dt +'">'+
                            dspDay +
                        '</td>';
                if (ci % 7 === 0 || (weekDay === 0 && ci == 1)) html += '</tr><tr>';
                day++;
            }
            html += '</tr></table>';
            return html;
        },




04. 이제 변경된 시간을 출력하는 *.php 파일을 만들고 잘 변경되었는지 확인해 보자.

 w2ui_kr_date.php

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>W2UI</title>
<link rel="stylesheet" type="text/css" href="./css/w2ui-1.4.3.css"/>
<script type="text/javascript" src="./js/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="./js/w2ui-1.4.3.js"></script>
<style type="text/css">
.block {
    padding-top:20px;
    padding-bottom:10px;
    color:#999;
}
.w2ui-div {
    float:left;
    padding:4px;
    border:1px solid silver;
    border-radius:3px;
}
.w2ui-field input {
    width:90px;
}
.w2ui-field > div > span {
    margin-left:20px;
}
</style>
</head>
<body>
<div class="w2ui-div">
    <div class="block">
        <b>KR Format</b>
    </div>
    <div class="w2ui-field">
        <label>Date:</label>
        <div> <input type="kr-date"> </div>
    </div>
</div>
<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery("input[type=kr-date]").w2field("date");
});
</script>
</body>
</html>




05. 위 작성한 예제를 출력하면 아래와 같은 화면이 나오는 것을 확인 할 수 있다.



반응형