
# [Date Editor](/refs/Interface/DateCellEditor#date)

[Date Editor](/refs/Interface/DateCellEditor#date) 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](/guides/tip/text-date-editor)

```js
const fields = [
  {
    fieldName: "OrderID",
    dataType: "text"
  },
  {
    fieldName: "CustomerID"
  },
  {
    fieldName: "EmployeeID"
  },
  {
    fieldName: "OrderDate",
    dataType: "datetime",
    datetimeFormat: "yyyy-MM-dd"
  },
  {
    fieldName: "CompanyName"
  },
  {
    fieldName: "Country"
  },
  {
    fieldName: "CountryKor"
  },
  {
    fieldName: "Phone"
  },
  {
    fieldName: "ProductName"
  },
  {
    fieldName: "QuantityPerUnit"
  },
  {
    fieldName: "Quantity",
    dataType: "number"
  },
  {
    fieldName: "UnitPrice",
    dataType: "number"
  }
];

const columns = [
  {
    name: "OrderID",
    fieldName: "OrderID",
    editor: {
      maxLength: 5
    },
    width: "90",
    textInputCase: "upper",
    header: {
      text: "Text editor"
    }
  },
  {
    name: "OrderDate",
    fieldName: "OrderDate",
    width: "180",
    sortable: false,
    editButtonVisibility: "always",
    editor: {
      type: "date",
      datetimeFormat: "yyyy/MM/dd",
      commitOnSelect: true,
      mask: {
        editMask: "9999/99/99",
        placeHolder: "yyyy/MM/dd",
        includedFormat: true
      }
    },
    header: {
      text: "Date Edit",
      styleName: "orange-column"
    },
    datetimeFormat: "yyyy/MM/dd"
  },
  {
    name: "CompanyName",
    fieldName: "CompanyName",
    width: "200",
    editor: {
      type: "multiline",
      textCase: "upper"
    },
    header: {
      text: "Multiline Edit"
    }
  },
  {
    name: "Quantity",
    fieldName: "Quantity",
    width: "100",
    sortable: false,
    editor: {
      type: "number",
      textAlignment: "far",
      editFormat: "#,##0.##",
      multipleChar: "+"
    },
    header: {
      text: "Number Edit"
    }
  },
  {
    name: "CustomerID",
    fieldName: "CustomerID",
    width: "150",
    sortable: false,
    lookupDisplay: true,
    values: [
      "VINET",
      "HANAR",
      "SUPRD",
      "VICTE",
      "THREE",
      "SEVEN"
    ],
    labels: [
      "<VINET>",
      "<HANAR>",
      "<SUPRD>",
      "<VICTE>",
      "<THREE>",
      "<SEVEN>"
    ],
    editor: {
      type: "dropdown",
      dropDownCount: 4
    },
    header: {
      text: "DropDown Edit"
    }
  },
  {
    name: "CustomerID2",
    fieldName: "CustomerID",
    width: "150",
    sortable: false,
    editor: {
      type: "dropdown",
      dropDownCount: 4,
      domainOnly: true,
      textReadOnly: true,
      values: [
        "VINET",
        "HANAR",
        "SUPRD",
        "VICTE",
        "THREE",
        "SEVEN"
      ],
      labels: [
        "<VINET>",
        "<HANAR>",
        "<SUPRD>",
        "<VICTE>",
        "<THREE>",
        "<SEVEN>"
      ]
    },
    header: {
      text: "Domain Only"
    }
  },
  {
    name: "CustomerID3",
    fieldName: "CustomerID",
    width: "150",
    sortable: false,
    editor: {
      type: "search",
      searchLength: 1,
      searchDelay: 1000,
      useCtrlEnterKey: true,
      useEnterKey: true
    },
    header: {
      text: "Search Editor "
    }
  },
  {
    name: "CountryKor",
    fieldName: "Country",
    width: "150",
    sortable: false,
    lookupDisplay: true,
    values: [
      "Austria",
      "Belgium",
      "Brazil",
      "Finland",
      "France",
      "Germany",
      "Ireland",
      "Italy",
      "Mexico",
      "Spain",
      "Sweden",
      "Switzerland",
      "UK",
      "USA",
      "Venezuela"
    ],
    labels: [
      "Austria",
      "Belgium",
      "Brazil",
      "Finland",
      "France",
      "Germany",
      "Ireland",
      "Italy",
      "Mexico",
      "Spain",
      "Sweden",
      "Switzerland",
      "UK",
      "USA",
      "Venezuela"
    ],
    editor: {
      type: "dropDown",
      dropDownCount: 5,
      partialMatch: true
    },
    header: {
      text: "partialMatch"
    }
  },
  {
    name: "Country",
    fieldName: "Country",
    width: "100",
    header: {
      text: "Country"
    }
  },
  {
    name: "Phone",
    fieldName: "Phone",
    width: "100",
    header: {
      text: "Phone"
    }
  },
  {
    name: "ProductName",
    fieldName: "ProductName",
    width: "200",
    header: {
      text: "Product Name"
    }
  }
];

const CustomerNames = ["ALFKI", "ANATR", "ANTON", "AROUT", "BERGS", "BLAUS", "BLONP", "BOLID", "BONAP", "BOTTM", "BSBEV", "CACTU", "CENTC", "CHOPS", "COMMI", "CONSH", "DRACD", "DUMON", "EASTC", "ERNSH", "FAMIA", "FISSA", "FOLIG", "FOLKO", "FRANK", "FRANR", "FRANS", "FURIB", "GALED", "GODOS", "GOURL", "GREAL", "GROSR", "HANAR", "HILAA", "HUNGC", "HUNGO", "ISLAT", "KOENE", "LACOR", "LAMAI", "LAUGB", "LAZYK", "LEHMS", "LETSS", "LILAS", "LINOD", "LONEP", "MAGAA", "MAISD", "MEREP", "MORGK", "NORTS", "OCEAN", "OLDWO", "OTTIK", "PARIS", "PERIC", "PICCO", "PRINI", "QUEDE", "QUEEN", "QUICK", "RANCH", "RATTC", "REGGC", "RICAR", "RICSU", "ROMEY", "SANTG", "SAVEA", "SEVES", "SIMOB", "SPECD", "SPLIR", "SUPRD", "THEBI", "THECR", "TOMSP", "TORTU", "TRADH", "TRAIH", "VAFFE", "VICTE", "VINET", "WANDK", "WARTH", "WELLI", "WHITC", "WILMK", "WOLZA"];

const { gridView, dataProvider } = RealGrid.createGrid("realgrid", {
  columns,
  header: {
    height: 40
  },
  display: {
    rowHeight: 36,
    emptyMessage: "No data to display."
  },
  edit: {
    insertable: true,
    appendable: true
  },
  footer: {
    height: 40
  },
  stateBar: {
    width: 16
  },
  onEditSearch: function (grid, index, text) {
    console.log("onEditSearch:" + index.itemIndex + "," + index.column + ", " + text);
    const items = CustomerNames.filter(function (str) {
      return str.indexOf(text) === 0;
    });
    console.log(items);
    grid.fillEditSearchItems(index.column, text, items);
  },
  onInitialized: (grid) => {
    fetch('/data/en/editor_demoData.json')
      .then(response => response.json())
      .then(data => {
        grid.getDataSource().setRows(data);
        gridView.refresh();
      });
  }
}, {
  fields
});

window.gridView = gridView;
window.dataProvider = dataProvider;

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

function btnSetHolidays() {
  gridView.setEditorOptions({
    viewGridInside: true,
    holidays: [{
      type: "day",
      days: [0, 6],
      tooltips: ["Sunday", "Saturday"],
      enabled: true
    }, {
      type: "date",
      dates: ["01-01", "03-01", "05-05", "08-15"],
      tooltips: ["whennjeong", "Independence Movement Day", "Children's Day", "Liberation Day"],
      styleName: "holidays"
    }]
  });
}
```

```js
...
//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.

```js
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.

```js
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](/refs/realgrid#buttonvisibility).

```js
const fields = [
  {
    fieldName: "OrderID",
    dataType: "text"
  },
  {
    fieldName: "CustomerID"
  },
  {
    fieldName: "EmployeeID"
  },
  {
    fieldName: "OrderDate",
    dataType: "datetime",
    datetimeFormat: "yyyy-MM-dd"
  },
  {
    fieldName: "CompanyName"
  },
  {
    fieldName: "Country"
  },
  {
    fieldName: "CountryKor"
  },
  {
    fieldName: "Phone"
  },
  {
    fieldName: "ProductName"
  },
  {
    fieldName: "QuantityPerUnit"
  },
  {
    fieldName: "Quantity",
    dataType: "number"
  },
  {
    fieldName: "UnitPrice",
    dataType: "number"
  }
];

const columns = [
  {
    name: "OrderID",
    fieldName: "OrderID",
    editor: {
      maxLength: 5
    },
    width: "90",
    textInputCase: "upper",
    header: {
      text: "Text editor"
    }
  },
  {
    name: "OrderDate",
    fieldName: "OrderDate",
    width: "120",
    sortable: false,
    editButtonVisibility: "always",
    editor: {
      type: "date"
    },
    header: {
      text: "always",
      styleName: "orange-column"
    }
  },
  {
    name: "OrderDate",
    fieldName: "OrderDate",
    width: "120",
    sortable: false,
    editButtonVisibility: "default",
    editor: {
      type: "date"
    },
    header: {
      text: "default",
      styleName: "orange-column"
    }
  },
  {
    name: "OrderDate",
    fieldName: "OrderDate",
    width: "120",
    sortable: false,
    editButtonVisibility: "hidden",
    editor: {
      type: "date"
    },
    header: {
      text: "hidden",
      styleName: "orange-column"
    }
  },
  {
    name: "OrderDate",
    fieldName: "OrderDate",
    width: "120",
    sortable: false,
    editButtonVisibility: "rowfocused",
    editor: {
      type: "date"
    },
    header: {
      text: "rowfocused",
      styleName: "orange-column"
    }
  },
  {
    name: "OrderDate",
    fieldName: "OrderDate",
    width: "120",
    sortable: false,
    editButtonVisibility: "visible",
    editor: {
      type: "date"
    },
    header: {
      text: "visible",
      styleName: "orange-column"
    }
  },
  {
    name: "CompanyName",
    fieldName: "CompanyName",
    width: "200",
    editor: {
      type: "multiline",
      textCase: "upper"
    },
    header: {
      text: "Multiline Edit"
    }
  },
  {
    name: "Quantity",
    fieldName: "Quantity",
    width: "100",
    sortable: false,
    editor: {
      type: "number",
      textAlignment: "far",
      editFormat: "#,##0.##",
      multipleChar: "+"
    },
    header: {
      text: "Number Edit"
    }
  },
  {
    name: "CustomerID",
    fieldName: "CustomerID",
    width: "150",
    sortable: false,
    lookupDisplay: true,
    values: [
      "VINET",
      "HANAR",
      "SUPRD",
      "VICTE",
      "THREE",
      "SEVEN"
    ],
    labels: [
      "<VINET>",
      "<HANAR>",
      "<SUPRD>",
      "<VICTE>",
      "<THREE>",
      "<SEVEN>"
    ],
    editor: {
      type: "dropdown",
      dropDownCount: 4
    },
    header: {
      text: "DropDown Edit"
    }
  },
  {
    name: "CustomerID2",
    fieldName: "CustomerID",
    width: "150",
    sortable: false,
    editor: {
      type: "dropdown",
      dropDownCount: 4,
      domainOnly: true,
      textReadOnly: true,
      values: [
        "VINET",
        "HANAR",
        "SUPRD",
        "VICTE",
        "THREE",
        "SEVEN"
      ],
      labels: [
        "<VINET>",
        "<HANAR>",
        "<SUPRD>",
        "<VICTE>",
        "<THREE>",
        "<SEVEN>"
      ]
    },
    header: {
      text: "Domain Only"
    }
  },
  {
    name: "CustomerID3",
    fieldName: "CustomerID",
    width: "150",
    sortable: false,
    editor: {
      type: "search",
      searchLength: 1,
      searchDelay: 1000,
      useCtrlEnterKey: true,
      useEnterKey: true
    },
    header: {
      text: "Search Editor "
    }
  },
  {
    name: "CountryKor",
    fieldName: "Country",
    width: "150",
    sortable: false,
    lookupDisplay: true,
    values: [
      "Austria",
      "Belgium",
      "Brazil",
      "Finland",
      "France",
      "Germany",
      "Ireland",
      "Italy",
      "Mexico",
      "Spain",
      "Sweden",
      "Switzerland",
      "UK",
      "USA",
      "Venezuela"
    ],
    labels: [
      "Austria",
      "Belgium",
      "Brazil",
      "Finland",
      "France",
      "Germany",
      "Ireland",
      "Italy",
      "Mexico",
      "Spain",
      "Sweden",
      "Switzerland",
      "UK",
      "USA",
      "Venezuela"
    ],
    editor: {
      type: "dropDown",
      dropDownCount: 5,
      partialMatch: true
    },
    header: {
      text: "partialMatch"
    }
  },
  {
    name: "Country",
    fieldName: "Country",
    width: "100",
    header: {
      text: "Country"
    }
  },
  {
    name: "Phone",
    fieldName: "Phone",
    width: "100",
    header: {
      text: "Phone"
    }
  },
  {
    name: "ProductName",
    fieldName: "ProductName",
    width: "200",
    header: {
      text: "Product Name"
    }
  }
];

const CustomerNames = ["ALFKI", "ANATR", "ANTON", "AROUT", "BERGS", "BLAUS", "BLONP", "BOLID", "BONAP", "BOTTM", "BSBEV", "CACTU", "CENTC", "CHOPS", "COMMI", "CONSH", "DRACD", "DUMON", "EASTC", "ERNSH", "FAMIA", "FISSA", "FOLIG", "FOLKO", "FRANK", "FRANR", "FRANS", "FURIB", "GALED", "GODOS", "GOURL", "GREAL", "GROSR", "HANAR", "HILAA", "HUNGC", "HUNGO", "ISLAT", "KOENE", "LACOR", "LAMAI", "LAUGB", "LAZYK", "LEHMS", "LETSS", "LILAS", "LINOD", "LONEP", "MAGAA", "MAISD", "MEREP", "MORGK", "NORTS", "OCEAN", "OLDWO", "OTTIK", "PARIS", "PERIC", "PICCO", "PRINI", "QUEDE", "QUEEN", "QUICK", "RANCH", "RATTC", "REGGC", "RICAR", "RICSU", "ROMEY", "SANTG", "SAVEA", "SEVES", "SIMOB", "SPECD", "SPLIR", "SUPRD", "THEBI", "THECR", "TOMSP", "TORTU", "TRADH", "TRAIH", "VAFFE", "VICTE", "VINET", "WANDK", "WARTH", "WELLI", "WHITC", "WILMK", "WOLZA"];

const { gridView, dataProvider } = RealGrid.createGrid("realgrid", {
  columns,
  header: {
    height: 40
  },
  display: {
    rowHeight: 36,
    emptyMessage: "No data to display."
  },
  edit: {
    insertable: true,
    appendable: true
  },
  footer: {
    height: 40
  },
  stateBar: {
    width: 16
  },
  onEditSearch: function (grid, index, text) {
    console.log("onEditSearch:" + index.itemIndex + "," + index.column + ", " + text);
    const items = CustomerNames.filter(function (str) {
      return str.indexOf(text) === 0;
    });
    console.log(items);
    grid.fillEditSearchItems(index.column, text, items);
  },
  onInitialized: (grid) => {
    fetch('/data/en/editor_demoData.json')
      .then(response => response.json())
      .then(data => {
        grid.getDataSource().setRows(data);
        gridView.refresh();
      });
  }
}, {
  fields
});

window.gridView = gridView;
window.dataProvider = dataProvider;
```

## 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.

```js
const fields = [
  {
    fieldName: "OrderID",
    dataType: "text"
  },
  {
    fieldName: "CustomerID"
  },
  {
    fieldName: "EmployeeID"
  },
  {
    fieldName: "OrderDate",
    dataType: "datetime",
    datetimeFormat: "yyyy-MM-dd"
  },
  {
    fieldName: "CompanyName"
  },
  {
    fieldName: "Country"
  },
  {
    fieldName: "CountryKor"
  },
  {
    fieldName: "Phone"
  },
  {
    fieldName: "ProductName"
  },
  {
    fieldName: "QuantityPerUnit"
  },
  {
    fieldName: "Quantity",
    dataType: "number"
  },
  {
    fieldName: "UnitPrice",
    dataType: "number"
  }
];

const btOptions1 = {
  startView: 0,
  minViewMode: 0,
  todayBtn: "linked",
  language: "ko",
  todayHighlight: true
};

const columns = [
  {
    name: "OrderID",
    fieldName: "OrderID",
    editor: {
      maxLength: 5
    },
    width: "90",
    textInputCase: "upper",
    header: {
      text: "Text editor"
    }
  },
  {
    name: "OrderDate",
    fieldName: "OrderDate",
    width: "180",
    sortable: false,
    editButtonVisibility: "always",
    editor: {
      type: "btdate",
      btOptions: btOptions1,
      datetimeFormat: "yyyy-MM-dd",
      textReadOnly: true,
      commitOnSelect: true
    },
    header: {
      text: "Date Edit",
      styleName: "orange-column"
    },
    datetimeFormat: "yyyy/MM/dd"
  },
  {
    name: "CompanyName",
    fieldName: "CompanyName",
    width: "200",
    editor: {
      type: "multiline",
      textCase: "upper"
    },
    header: {
      text: "Multiline Edit"
    }
  },
  {
    name: "Quantity",
    fieldName: "Quantity",
    width: "100",
    sortable: false,
    editor: {
      type: "number",
      textAlignment: "far",
      editFormat: "#,##0.##",
      multipleChar: "+"
    },
    header: {
      text: "Number Edit"
    }
  },
  {
    name: "CustomerID",
    fieldName: "CustomerID",
    width: "150",
    sortable: false,
    lookupDisplay: true,
    values: [
      "VINET",
      "HANAR",
      "SUPRD",
      "VICTE",
      "THREE",
      "SEVEN"
    ],
    labels: [
      "<VINET>",
      "<HANAR>",
      "<SUPRD>",
      "<VICTE>",
      "<THREE>",
      "<SEVEN>"
    ],
    editor: {
      type: "dropdown",
      dropDownCount: 4
    },
    header: {
      text: "DropDown Edit"
    }
  },
  {
    name: "CustomerID2",
    fieldName: "CustomerID",
    width: "150",
    sortable: false,
    editor: {
      type: "dropdown",
      dropDownCount: 4,
      domainOnly: true,
      textReadOnly: true,
      values: [
        "VINET",
        "HANAR",
        "SUPRD",
        "VICTE",
        "THREE",
        "SEVEN"
      ],
      labels: [
        "<VINET>",
        "<HANAR>",
        "<SUPRD>",
        "<VICTE>",
        "<THREE>",
        "<SEVEN>"
      ]
    },
    header: {
      text: "Domain Only"
    }
  },
  {
    name: "CustomerID3",
    fieldName: "CustomerID",
    width: "150",
    sortable: false,
    editor: {
      type: "search",
      searchLength: 1,
      searchDelay: 1000,
      useCtrlEnterKey: true,
      useEnterKey: true
    },
    header: {
      text: "Search Editor "
    }
  },
  {
    name: "CountryKor",
    fieldName: "Country",
    width: "150",
    sortable: false,
    lookupDisplay: true,
    values: [
      "Austria",
      "Belgium",
      "Brazil",
      "Finland",
      "France",
      "Germany",
      "Ireland",
      "Italy",
      "Mexico",
      "Spain",
      "Sweden",
      "Switzerland",
      "UK",
      "USA",
      "Venezuela"
    ],
    labels: [
      "Austria",
      "Belgium",
      "Brazil",
      "Finland",
      "France",
      "Germany",
      "Ireland",
      "Italy",
      "Mexico",
      "Spain",
      "Sweden",
      "Switzerland",
      "UK",
      "USA",
      "Venezuela"
    ],
    editor: {
      type: "dropDown",
      dropDownCount: 5,
      partialMatch: true
    },
    header: {
      text: "partialMatch"
    }
  },
  {
    name: "Country",
    fieldName: "Country",
    width: "100",
    header: {
      text: "Country"
    }
  },
  {
    name: "Phone",
    fieldName: "Phone",
    width: "100",
    header: {
      text: "Phone"
    }
  },
  {
    name: "ProductName",
    fieldName: "ProductName",
    width: "200",
    header: {
      text: "Product Name"
    }
  }
];

const CustomerNames = ["ALFKI", "ANATR", "ANTON", "AROUT", "BERGS", "BLAUS", "BLONP", "BOLID", "BONAP", "BOTTM", "BSBEV", "CACTU", "CENTC", "CHOPS", "COMMI", "CONSH", "DRACD", "DUMON", "EASTC", "ERNSH", "FAMIA", "FISSA", "FOLIG", "FOLKO", "FRANK", "FRANR", "FRANS", "FURIB", "GALED", "GODOS", "GOURL", "GREAL", "GROSR", "HANAR", "HILAA", "HUNGC", "HUNGO", "ISLAT", "KOENE", "LACOR", "LAMAI", "LAUGB", "LAZYK", "LEHMS", "LETSS", "LILAS", "LINOD", "LONEP", "MAGAA", "MAISD", "MEREP", "MORGK", "NORTS", "OCEAN", "OLDWO", "OTTIK", "PARIS", "PERIC", "PICCO", "PRINI", "QUEDE", "QUEEN", "QUICK", "RANCH", "RATTC", "REGGC", "RICAR", "RICSU", "ROMEY", "SANTG", "SAVEA", "SEVES", "SIMOB", "SPECD", "SPLIR", "SUPRD", "THEBI", "THECR", "TOMSP", "TORTU", "TRADH", "TRAIH", "VAFFE", "VICTE", "VINET", "WANDK", "WARTH", "WELLI", "WHITC", "WILMK", "WOLZA"];

const { gridView, dataProvider } = RealGrid.createGrid("realgrid", {
  columns,
  header: {
    height: 40
  },
  display: {
    rowHeight: 36,
    emptyMessage: "No data to display."
  },
  edit: {
    insertable: true,
    appendable: true
  },
  footer: {
    height: 40
  },
  stateBar: {
    width: 16
  },
  onEditSearch: function (grid, index, text) {
    console.log("onEditSearch:" + index.itemIndex + "," + index.column + ", " + text);
    const items = CustomerNames.filter(function (str) {
      return str.indexOf(text) === 0;
    });
    console.log(items);
    grid.fillEditSearchItems(index.column, text, items);
  },
  onInitialized: (grid) => {
    fetch('/data/en/editor_demoData.json')
      .then(response => response.json())
      .then(data => {
        grid.getDataSource().setRows(data);
        gridView.refresh();
      });
  }
}, {
  fields
});

window.gridView = gridView;
window.dataProvider = dataProvider;
```

```js
//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/](https://eternicode.github.io/bootstrap-datepicker/)

```js
const fields = [
  {
    fieldName: "OrderDate",
    dataType: "datetime"
  },
  {
    fieldName: "dateTime1"
  },
  {
    fieldName: "dateTime2"
  },
  {
    fieldName: "dateTime3"
  }
];

const columns = [
  {
    name: "dateTime1",
    fieldName: "dateTime1",
    width: "110",
    header: {
      text: "yyyyMM"
    },
    editor: {
      type: "btdate",
      btOptions: {
        startView: 1,
        minViewMode: 1,
        todayBtn: "linked",
        language: "ko",
        todayHighlight: true
      },
      datetimeFormat: "yyyyMM",
      textReadOnly: true,
      mask: {
        editMask: "999999"
      }
    }
  },
  {
    name: "dateTime2",
    fieldName: "dateTime2",
    width: "110",
    header: {
      text: "yyyy-MM"
    },
    editor: {
      type: "btdate",
      btOptions: {
        startView: 1,
        minViewMode: 1,
        todayBtn: "linked",
        language: "ko",
        todayHighlight: true
      },
      textReadOnly: true,
      datetimeFormat: "yyyy-MM",
      mask: {
        editMask: "9999-99",
        includedFormat: true
      }
    }
  },
  {
    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: "ko",
        todayHighlight: true
      },
      datetimeFormat: "yyyyMM",
      textReadOnly: true,
      mask: {
        editMask: "9999-99"
      }
    }
  },
  {
    name: "OrderDate",
    fieldName: "OrderDate",
    type: "data",
    width: "130",
    header: {
      text: "Order Date"
    }
  }
];

const CustomerNames = ["ALFKI", "ANATR", "ANTON", "AROUT", "BERGS", "BLAUS", "BLONP", "BOLID", "BONAP", "BOTTM", "BSBEV", "CACTU", "CENTC", "CHOPS", "COMMI", "CONSH", "DRACD", "DUMON", "EASTC", "ERNSH", "FAMIA", "FISSA", "FOLIG", "FOLKO", "FRANK", "FRANR", "FRANS", "FURIB", "GALED", "GODOS", "GOURL", "GREAL", "GROSR", "HANAR", "HILAA", "HUNGC", "HUNGO", "ISLAT", "KOENE", "LACOR", "LAMAI", "LAUGB", "LAZYK", "LEHMS", "LETSS", "LILAS", "LINOD", "LONEP", "MAGAA", "MAISD", "MEREP", "MORGK", "NORTS", "OCEAN", "OLDWO", "OTTIK", "PARIS", "PERIC", "PICCO", "PRINI", "QUEDE", "QUEEN", "QUICK", "RANCH", "RATTC", "REGGC", "RICAR", "RICSU", "ROMEY", "SANTG", "SAVEA", "SEVES", "SIMOB", "SPECD", "SPLIR", "SUPRD", "THEBI", "THECR", "TOMSP", "TORTU", "TRADH", "TRAIH", "VAFFE", "VICTE", "VINET", "WANDK", "WARTH", "WELLI", "WHITC", "WILMK", "WOLZA"];

const { gridView, dataProvider } = RealGrid.createGrid("realgrid", {
  columns,
  header: {
    height: 40
  },
  display: {
    rowHeight: 36,
    emptyMessage: "No data to display."
  },
  edit: {
    insertable: true,
    appendable: true
  },
  footer: {
    height: 40
  },
  stateBar: {
    width: 16
  },
  onEditSearch: function (grid, index, text) {
    console.log("onEditSearch:" + index.itemIndex + "," + index.column + ", " + text);
    const items = CustomerNames.filter(function (str) {
      return str.indexOf(text) === 0;
    });
    console.log(items);
    grid.fillEditSearchItems(index.column, text, items);
  },
  onInitialized: (grid) => {
    const sampleData = [
      ["2019-01-01", "201901", "2019-01", "201901"],
      ["2019-01-01", "201901", "2019-01", "201901"],
      ["2019-01-01", "201901", "2019-01", "201901"],
      ["2019-01-01", "201901", "2019-01", "201901"],
      ["2019-01-01", "201901", "2019-01", "201901"],
      ["2019-01-01", "201901", "2019-01", "201901"]
    ];
    grid.getDataSource().setRows(sampleData);
    gridView.refresh();
  }
}, {
  fields
});

window.gridView = gridView;
window.dataProvider = dataProvider;
```

```js
//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".

```js
{
     "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.

```js
const fields = [
  {
    fieldName: "OrderID",
    dataType: "text"
  },
  {
    fieldName: "CustomerID"
  },
  {
    fieldName: "EmployeeID"
  },
  {
    fieldName: "OrderDate",
    dataType: "datetime",
    datetimeFormat: "yyyy-MM-dd"
  },
  {
    fieldName: "CompanyName"
  },
  {
    fieldName: "Country"
  },
  {
    fieldName: "CountryKor"
  },
  {
    fieldName: "Phone"
  },
  {
    fieldName: "ProductName"
  },
  {
    fieldName: "QuantityPerUnit"
  },
  {
    fieldName: "Quantity",
    dataType: "number"
  },
  {
    fieldName: "UnitPrice",
    dataType: "number"
  }
];

const columns = [
  {
    name: "OrderID",
    fieldName: "OrderID",
    editor: {
      maxLength: 5
    },
    width: "90",
    textInputCase: "upper",
    header: {
      text: "Text editor"
    }
  },
  {
    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"
    }
  },
  {
    name: "CompanyName",
    fieldName: "CompanyName",
    width: "200",
    editor: {
      type: "multiline",
      textCase: "upper"
    },
    header: {
      text: "Multiline Edit"
    }
  },
  {
    name: "Quantity",
    fieldName: "Quantity",
    width: "100",
    sortable: false,
    editor: {
      type: "number",
      textAlignment: "far",
      editFormat: "#,##0.##",
      multipleChar: "+"
    },
    header: {
      text: "Number Edit"
    }
  },
  {
    name: "CustomerID",
    fieldName: "CustomerID",
    width: "150",
    sortable: false,
    lookupDisplay: true,
    values: [
      "VINET",
      "HANAR",
      "SUPRD",
      "VICTE",
      "THREE",
      "SEVEN"
    ],
    labels: [
      "<VINET>",
      "<HANAR>",
      "<SUPRD>",
      "<VICTE>",
      "<THREE>",
      "<SEVEN>"
    ],
    editor: {
      type: "dropdown",
      dropDownCount: 4
    },
    header: {
      text: "DropDown Edit"
    }
  },
  {
    name: "CustomerID2",
    fieldName: "CustomerID",
    width: "150",
    sortable: false,
    editor: {
      type: "dropdown",
      dropDownCount: 4,
      domainOnly: true,
      textReadOnly: true,
      values: [
        "VINET",
        "HANAR",
        "SUPRD",
        "VICTE",
        "THREE",
        "SEVEN"
      ],
      labels: [
        "<VINET>",
        "<HANAR>",
        "<SUPRD>",
        "<VICTE>",
        "<THREE>",
        "<SEVEN>"
      ]
    },
    header: {
      text: "Domain Only"
    }
  },
  {
    name: "CustomerID3",
    fieldName: "CustomerID",
    width: "150",
    sortable: false,
    editor: {
      type: "search",
      searchLength: 1,
      searchDelay: 1000,
      useCtrlEnterKey: true,
      useEnterKey: true
    },
    header: {
      text: "Search Editor "
    }
  },
  {
    name: "CountryKor",
    fieldName: "Country",
    width: "150",
    sortable: false,
    lookupDisplay: true,
    values: [
      "Austria",
      "Belgium",
      "Brazil",
      "Finland",
      "France",
      "Germany",
      "Ireland",
      "Italy",
      "Mexico",
      "Spain",
      "Sweden",
      "Switzerland",
      "UK",
      "USA",
      "Venezuela"
    ],
    labels: [
      "Austria",
      "Belgium",
      "Brazil",
      "Finland",
      "France",
      "Germany",
      "Ireland",
      "Italy",
      "Mexico",
      "Spain",
      "Sweden",
      "Switzerland",
      "UK",
      "USA",
      "Venezuela"
    ],
    editor: {
      type: "dropDown",
      dropDownCount: 5,
      partialMatch: true
    },
    header: {
      text: "partialMatch"
    }
  },
  {
    name: "Country",
    fieldName: "Country",
    width: "100",
    header: {
      text: "Country"
    }
  },
  {
    name: "Phone",
    fieldName: "Phone",
    width: "100",
    header: {
      text: "Phone"
    }
  },
  {
    name: "ProductName",
    fieldName: "ProductName",
    width: "200",
    header: {
      text: "Product Name"
    }
  }
];

const CustomerNames = ["ALFKI", "ANATR", "ANTON", "AROUT", "BERGS", "BLAUS", "BLONP", "BOLID", "BONAP", "BOTTM", "BSBEV", "CACTU", "CENTC", "CHOPS", "COMMI", "CONSH", "DRACD", "DUMON", "EASTC", "ERNSH", "FAMIA", "FISSA", "FOLIG", "FOLKO", "FRANK", "FRANR", "FRANS", "FURIB", "GALED", "GODOS", "GOURL", "GREAL", "GROSR", "HANAR", "HILAA", "HUNGC", "HUNGO", "ISLAT", "KOENE", "LACOR", "LAMAI", "LAUGB", "LAZYK", "LEHMS", "LETSS", "LILAS", "LINOD", "LONEP", "MAGAA", "MAISD", "MEREP", "MORGK", "NORTS", "OCEAN", "OLDWO", "OTTIK", "PARIS", "PERIC", "PICCO", "PRINI", "QUEDE", "QUEEN", "QUICK", "RANCH", "RATTC", "REGGC", "RICAR", "RICSU", "ROMEY", "SANTG", "SAVEA", "SEVES", "SIMOB", "SPECD", "SPLIR", "SUPRD", "THEBI", "THECR", "TOMSP", "TORTU", "TRADH", "TRAIH", "VAFFE", "VICTE", "VINET", "WANDK", "WARTH", "WELLI", "WHITC", "WILMK", "WOLZA"];

const { gridView, dataProvider } = RealGrid.createGrid("realgrid", {
  columns,
  header: {
    height: 40
  },
  display: {
    rowHeight: 36,
    emptyMessage: "No data to display."
  },
  edit: {
    insertable: true,
    appendable: true
  },
  footer: {
    height: 40
  },
  stateBar: {
    width: 16
  },
  onEditSearch: function (grid, index, text) {
    console.log("onEditSearch:" + index.itemIndex + "," + index.column + ", " + text);
    const items = CustomerNames.filter(function (str) {
      return str.indexOf(text) === 0;
    });
    console.log(items);
    grid.fillEditSearchItems(index.column, text, items);
  },
  onInitialized: (grid) => {
    fetch('/data/en/editor_demoData.json')
      .then(response => response.json())
      .then(data => {
        grid.getDataSource().setRows(data);
        gridView.refresh();
      });
  }
}, {
  fields
});

window.gridView = gridView;
window.dataProvider = dataProvider;
```

```js
{
     "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"
    }
}
```