jquery/Javascript DatePicker를 보고 만든 WeekPicker(2)

 

 

최종 완성 본 링크

 

 

 

 

 

몇 일이 더 흘렀을까... 결국 흘러 흘러 여기까지 오게 되었다. UI적인 변화 음 만족스럽다. 여기저기 달력을 많이 참고하였다. 

 

1. input창에 뜨는 출력값을 설정가능하다.

2. 오늘의 날짜가 노란색으로 표시가 된다.

3. Week 표시를 선택할 수 있다.

4. 주의 시작이 월요일인지 일요일인지 firstDay설정 가능.

5.  Set 버튼을 누르면 해당 달력에 지정 된 기본 값으로 날짜가 설정됨.

6. Get 버튼을 누르면 해당 달력에 지정 된 기본 값을 alert창에 띄어줌.

 

사실 Get Set 에 대한 것은 아직 의문?이지만(요구한 게 기능적으로 내가 생각한 get set과 달라서) 완성!하였다. 

 

당연 많은 수정이 필요하고 갈무리가 필요하지만

 

일단 끝냈다는 것.

 

 

// weekPicker.js
let exWPs = [], exWPobject = [], exWPId = 0;

$.fn.Weekpicker = function (jsonConfig) {
    if (this.selector === undefined && this.length > 0 && this[0].id !== undefined && this[0].id !== null)
        this.selector = '#' + this[0].id;

    if (typeof (jsonConfig) === 'object') {


        jsonConfig.selector = this.selector;
        jsonConfig.id = exWPId + 1;

        exWPs.push(jsonConfig);
    
        $(this).parent().append(_htmlGenerate(jsonConfig.id));

지난 게시글과 달라진 것이 있다면 변수들과 옵션으로 설정된 값을 exWPs 란 array에 object를 밀어 넣어서 관리를 한다.  

 

Weekpicker 란 jquery 함수가 호출 될 때마다 파라미터로 들어온 jsonConfig을 exWPs에 넣어 관리를 하고 

 

function getWeekNumber(nthWeek, id) {
    let exWP;
    for (let i = 0; i < exWPs.length; i++) {
        if (exWPs[i].id === id) {
            exWP = exWPs[i];
            break;
        }
    }
    yearValue = $('#yearChange' + id).val();
    //let selectedFormat = $("#formatOption"+ id).val();
    findInputElement = $("." + id);
    weekDuration = formattingDate(nthWeek, id, yearValue);
    startdate = new Date(weekDuration[0]);
    enddate = new Date(weekDuration[1]);

    if (exWP.displayTemplate) {
        let displayText = exWP.displayTemplate(
            nthWeekOfYear(nthWeek, id),
            startdate,
            enddate);
        $(findInputElement).val(displayText);
    }
    else {
        $(findInputElement).val(yearValue + "-W" + nthWeekOfYear(nthWeek, id))
    }
}

파라미터로 아이디를 받아서 쫙 포문 돌리면 그 아이디에 지정된 옵션들이 호출이 된다. (매우 만족스러움..)

   

지난 게시글에서 기능적인 프로세스는 설명을 다 하였고 오늘은 어떻게 발전하였는가를 적어보았다. 

 

 

function exWeekPickerType(exWP) {
    this.exWP = exWP;
    id = exWP.id;
    exWP.setWeekValue = defaultValue

    this.setWeekValue = function (val) {
        if (val == null) {
            return exWP.setWeekValue;
        } else {
            if (typeof (val) !== 'string') alert('Set value first');
            y = val.substring(0, 4)

            w = Number(val.substring(6, 8))
            first = new Date('01-01-' + y);
            gap = w * 7
            setted_date = first.addDays(gap)
            m = setted_date.getMonth();
            d = setted_date.getDate();
            exWP.setWeekValue = val;
            $('#yearChange' + id).val(y)
            $('#monthChange' + id).val(m)

            nthwk = Math.floor(d / 7) + 1;

            changeYearMonth(y, m, id);
            getWeekNumber(nthwk, id)

            $(this).next().find('tbody tr:nth-child(' + nthwk + ')').addClass('clicked');
        }
    };
}

 

추가 된 get, set하는 함수. ( 파리미터가 없으면 get, 있으면 set)

   

 

이전 글 : jquery/Javascript DatePicker를 보고 만든 WeekPicker(1)