[sencha touch] datepickerfield month 영문자 숫자로 변경하기

위와 같이 datepickerfield를 사용하면 month영역이 영문자로 나타납니다.

국내와 비영어권 국가에서 불편할 수 있으니 숫자로 바꿔봅시다.

이를 위해서 다음 파일을 수정해야 합니다.

touch -> src -> picker -> Date.js

Date.js파일을 열고 createSlots 메소드를 수정해 봅시다.

for (i = 0, ln = Ext.Date.monthNames.length; i < ln; i++) {

months.push({

// text  : Ext.Date.monthNames[i],

text:  i + 1,

value : i + 1

});

}

위와 같이 숫자가 잘 나타납니다. month부분이 지나치게 비율이 넓어 안좋아 보이니 비율을 createSlot메소드에서 수정해 봅시다.

createSlot: function(name, days, months, years) {

        switch (name) {

            case 'year':

                return {

                    name: 'year',

                    align: 'center',

                    data: years,

                    title: this.getYearText(),

                    flex: 1

                };

            case 'month':

                return {

                    name: name,

                    align: 'center',

                    data: months,

                    title: this.getMonthText(),

                    flex: 1

                };

            case 'day':

                return {

                    name: 'day',

                    align: 'center',

                    data: days,

                    title: this.getDayText(),

                    flex: 1

                };

        }

    },

flex를 모두 1로 같은 비율로 설정해 보았습니다.

마지막으로 상단에 Year, Month, Day title이 신경쓰입니다.

방금전에 수정했던 createSlot을 다시 수정해 봅시다.

createSlot: function(name, days, months, years) {

        switch (name) {

            case 'year':

                return {

                    name: 'year',

                    align: 'center',

                    data: years,

                    title: '년',

                    flex: 1

                };

            case 'month':

                return {

                    name: name,

                    align: 'center',

                    data: months,

                    title: '월',

                    flex: 1

                };

            case 'day':

                return {

                    name: 'day',

                    align: 'center',

                    data: days,

                    title: '일',

                    flex: 1

                };

        }

위와 같이 수정된걸 확인할 수 있습니다.