[DevExpress] nvarchar(8) 타입을 Date 타입으로 바인딩하는 방법

 

 

nvarchar(8) 타입을 Date 타입으로 바인딩해야 하는 경우

 

일자를 DB에 저장할 때,

 

nvarchar(8) 데이터 타입으로 저장하곤 합니다.

 

예를 들어 "20231121" 입니다.

 

하지만 DevExpress에서 GridViewDataTextColumn로 데이터를 받을 때는 문제가 없지만,

 

GridViewDataDateColumn를 써야 하는 경우가 존재합니다.

 

예를 들어, 캘린더를 열어야 하는 이벤트가 존재할 경우입니다.

 

그럴 때, "yyyyMMdd" 형태를 어떻게 Date 타입에 바인딩할 수 있을까요?

 

아래 코드를 확인해보겠습니다.

 

aspx 코드

 

<dx:GridViewDataDateColumn Caption="일자" Width="130" FieldName="date" CellStyle-HorizontalAlign="left" Settings-AutoFilterCondition="Contains">
    <PropertiesDateEdit>
        <ClientSideEvents ParseDate="DateOnInit" />
    </PropertiesDateEdit>
</dx:GridViewDataDateColumn>

 

이렇게 코드를 넣으면 "20231121" 이런 식으로 바인딩됩니다.

 

OnCustomColumnDisplayText 속성을 사용해서 완전히 랜더링 되기 전에 데이터 양식을 바꿔줄 수도 있지만,

 

edit 모드를 사용하려고 할 때는, 정상적으로 작동이 안됩니다.

 

그럴 때는 어떻게 할 수 있을까요? 

 

자바스크립트 코드를 사용할 수 있습니다.

 

javascript 코드

 

// 날짜 파싱
function DateOnInit(s, e) {
    var date = FormatDate(e.value);
    if (e.value.length >= 6) {
        var date = FormatDate(e.value);
        e.date = date;
        e.handled = true;
    }
}

function FormatDate(value) {
    var year = value.substring(0, 4);
    var month = value.substring(4, 6) - 1;
    var day = value.substring(6, 8);
    return new Date(year, month, day);
}

 

위와 같은 자바스크립트 코드를 사용해서 value를 원하는 format의 date 타입으로 바꾼 뒤, 리턴합니다.

 

그 후, e.date에 바인딩하면, edit 모드에서도 정상적으로 잘 나오게 됩니다.