Date Editor

Date Editor allows you to enter a date with the keyboard or select a date using the calendar pop-up.

When a field's dataType = 'datetime' is set, the grid manages heading data as a date object. When returning the value saved in the grid, it is expressed as 'Wed Jul 03 1996 00:00:00 GMT+0900 (Korea Standard Time)', which is inconvenient to use and you want to use it as the entered text. See the tips link below

text type date editor

...
//Column settings
{
   "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"
   }
}
...

You can select only a specific period by specifying minDate and maxDate.

gridView.setColumnProperty("OrderDate", "editor", {
   type: "date",
   datetimeFormat: "yyyy.MM.dd",
   minDate: new Date("1996-06-1"),
   maxDate: new Date("1996-08-30")
});

You can specify styles and tooltips for specific dates with the holidays attribute.

gridView.setEditorOptions({
   viewGridInside: true;
   holidays: [ {
       type: "day", // Specify the day of the week.
       days : [0,6], // Sunday, Saturday
       tooltips : ["Sunday","Saturday"], // tooltip
       enabled: true // If false, it cannot be selected.
   }, {
       type: "date", // Specifies an anniversary or a specific date.
       dates: ["01-01","03-01","05-05","08-15"], // Anniversary.
       tooltips : ["New Year","March 1st","Children's Day","Liberation Day"],
       styleName: "holidays"
   }]
});

Controlling button visibility

Set the display method by specifying always, default, hidden, rowfocused, and visible in column.editButtonVisibility.

Use bootstrap-datepicker

As an exception, you can use bootstrap-datepicker, an external library for RealGrid. To use bootstrap-datepicker, you must separately include and load the library.

The basic usage is the same as DateCellEditor, and it supports the btOptions property so that you can enter options for the bootStrap datepicker.

//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:"en"
}
 
//Column settings
{
     name: "OrderDate",
     fieldName: "OrderDate",
     width: "130"
     header: {
         text: "Order Date"
     },
     editor: {
         type:"btdate",
         btOptions:btOptions1, //Set option variables
         datetimeFormat:"yyyy-MM-dd",
         textReadOnly:true
     }
}

Month selection calendar using bootstrap-datepicker

Check the "btdate" setting in the column's editor.type property, the btOptions property, and the Order Date column that sets the month selection calendar function using bootstrap. You must apply the bootstrap-datepicker js file as shown below to use the month selection calendar function normally.

The example is a monthly calendar, but a regular calendar can also be used.

Please refer to the link below for detailed usage instructions. 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:"en"
}
 
//Column settings
{
     name: "OrderDate",
     fieldName: "OrderDate",
     width: "130"
     header: {
         text: "Order Date"
     },
     editor: {
         type:"btdate",
         btOptions:btOptions1, //Set option variables
         datetimeFormat:"yyyy-MM",
         textReadOnly:true
     }
}

text type month selection calendar

You can set a month selection calendar with data in the form of text in a column whose field type is text. See the columns "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"
         }
     }
}

Time editor

You can set the time unit editor using the timeSelectType property in the date editor. Attributes include 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"
    }
}

Dropdown MultiSelect Mask Editor