날짜 편집기
날짜 편집기를 사용하면 키보드로 날짜를 입력하거나 달력 팝업을 사용하여 날짜를 선택할 수 있습니다.
필드의 dataType = 'datetime' 으로 설정시 그리드는 해딩 데이터를 date객체로 관리하게 됩니다.
그리드에 저장된 값 반환시 'Wed Jul 03 1996 00:00:00 GMT+0900 (대한민국 표준시)' 이렇게 표현되어 사용하기 불편하고 입력된 텍스트 형태 그대로 사용하고 싶다면
아래 팁 링크를 참고하세요
...
//컬럼설정
{
"name": "OrderDate",
"fieldName": "OrderDate",
"width": "180",
"sortable": false,
"editor": {
"type": "date",
"datetimeFormat": "yyyy.MM.dd",
"commitOnSelect": true,
"mask": {
"editMask": "9999/99/99",
"placeHolder":"yyyy/MM/dd",
"includedFormat": true
}
},
"header": {
"text": "Date Edit"
}
}
...
minDate, maxDate를 지정하여 특정기간만 선택할 수 있습니다.
gridView.setColumnProperty("OrderDate", "editor", {
type: "date",
datetimeFormat: "yyyy.MM.dd",
minDate: new Date("1996-06-1"),
maxDate: new Date("1996-08-30")
});holidays속성으로 특정 날짜에 스타일과 툴팁을 지정할 수 있습니다.
gridView.setEditorOptions({
viewGridInside: true,
holidays: [ {
type : "day", // 요일을 지정합니다.
days : [0,6], // 일요일,토요일
tooltips : ["일요일","토요일"], // tooltip
enabled : true // false인경우 선택할수 없습니다.
}, {
type : "date", // 기념일 또는 특정일자를 지정합니다.
dates : ["01-01","03-01","05-05","08-15"], // 기념일.
tooltips : ["신정","삼일절","어린이날","광복절"],
styleName : "holidays"
}]
});버튼 표시 여부 조작하기
column.editButtonVisibility에 always, default, hidden, rowfocused, visible를 지정하여 보여지는 방식을 설정한다.
bootstrap-datepicker 사용
예외적으로 리얼그리드에 외부 라이브러리인 bootstrap-datepicker를 사용할 수 있습니다.
bootstrap-datepicker를 사용하려면 해당 라이브러리를 별도로 include하여 반드시 로드하여야 합니다.
기본적인 사용법은 DateCellEditor와 동일하며 bootStrap datepicker의 옵션을 입력할수 있도록 btOptions속성을 지원 합니다.
//include
<script src="/lib/bootstrap/bootstrap-datepicker.js"></script>
<script src="/lib/bootstrap/bootstrap-datepicker.ko.min.js"></script>
<link rel="stylesheet" type="text/css" href="/lib/css/bootstrap-datepicker.css">
//editor.btOptions
var btOptions1 = {
startView: 0,
minViewMode: 0,
todayBtn: "linked",
language: "kr",
todayHighlight: true,
language:"ko"
}
//컬럼 설정
{
name: "OrderDate",
fieldName: "OrderDate",
width: "130"
header: {
text: "Order Date"
},
editor: {
type:"btdate",
btOptions:btOptions1, //옵션 변수 설정
datetimeFormat:"yyyy-MM-dd",
textReadOnly:true
}
}bootstrap-datepicker를 사용한 월 선택 달력
컬럼의 editor.type 속성의 "btdate" 설정과 btOptions 속성 그리고 bootstrap을 사용한 월 선택 달력 기능을 설정한 Order Date컬럼 컬럼을 확인해 보세요.
반드시 bootstrap-datepicker js파일을 아래와 같이 적용해야 정상적으로 월 선택 달력 기능을 사용할 수 있습니다.
해당 예제는 월 달력이지만 일반 달력도 사용 가능 합니다.
자세한 사용 방법은 아래 링크를 참조하세요.
https://eternicode.github.io/bootstrap-datepicker/ (opens in a new tab)
//include
<script src="/lib/bootstrap/bootstrap-datepicker.js"></script>
<script src="/lib/bootstrap/bootstrap-datepicker.ko.min.js"></script>
<link rel="stylesheet" type="text/css" href="/lib/css/bootstrap-datepicker.css">
//editor.btOptions
var btOptions1 = {
startView: 1,
minViewMode: 1,
todayBtn: "linked",
language: "kr",
todayHighlight: true,
language:"ko"
}
//컬럼 설정
{
name: "OrderDate",
fieldName: "OrderDate",
width: "130"
header: {
text: "Order Date"
},
editor: {
type:"btdate",
btOptions:btOptions1, //옵션 변수 설정
datetimeFormat:"yyyy-MM",
textReadOnly:true
}
}text 타입 월 선택 달력
field타입이 text인 컬럼에 문자 형태의 데이터로 월 선택 달력을 설정할 수 있습니다.
"yyyyMM", "yyyyMM -> yyyy-MM" 컬럼을 참조하세요.
{
"name": "dateTime3",
"fieldName": "dateTime3",
"width": "160",
"header": {
"text": "yyyyMM -> yyyy-MM"
},
"textFormat": "([0-9]{4})([0-9]{2})$;$1-$2",
"editor": {
"type": "btdate",
"btOptions": {
"startView": 1,
"minViewMode": 1,
"todayBtn": "linked",
"language": "kr",
"todayHighlight": true,
"language": "ko"
},
"datetimeFormat": "yyyyMM",
"textReadOnly": true,
"mask": {
"editMask": "9999-99"
}
}
}시간 편집기
date editor에 timeSelectType속성으로 시간 단위 편집기를 설정할 수 있습니다.
속성으로는 none/hour/minute/second 가 있습니다.
{
"name": "OrderDate",
"fieldName": "OrderDate",
"width": "200",
"sortable": false,
"editButtonVisibility": "default",
"editor": {
"type": "date",
"timeSelectType": "second",
"datetimeFormat": "yyyy-MM-dd HH:mm:ss"
},
"datetimeFormat": "yyyy/MM/dd HH:mm:ss",
"header": {
"text": "default",
"styleName": "orange-column"
}
}