使用 Angular-UI Bootstrap 从网格单元格打开的模态内的日期选择器获取日期

Question

也许这有点矫枉过正，但我正在努力
1. 当在 UI-Grid
中单击 link 时，打开一个 Modal window 可以通过修改 http://ui-grid.info/docs/#/tutorial/110_grid_in_modal
来完成 2.在Modal
里面放一个(ui.bootstrap.datepicker) 3. 检索选择的日期
4. 更新 UI-Grid Row

中的日期单元格

so, 是Ui-Grid 'well suited'/'can do this' 给出了上面的要求

蒂亚

Answer 1

不，不是矫枉过正。你可以很容易地用 UI-Grid 做到这一点。有一个关于如何使用 Angular Schema Form here: http://brianhann.com/create-a-modal-row-editor-for-ui-grid-in-minutes/ 连接模态编辑器的指南（注意：我是作者）。

我还创建了一个新的 plunker，它使用 angular-schema-form-datepicker 库来展示如何执行此操作：http://plnkr.co/edit/7t3BI2AUcnvNfav78Btr?p=preview

（plunker 一直在为属于 plunk 的文件抛出 404，因此您可能需要刷新它）

您要做的主要事情是设置您的对象模式：

scope.schema = {
  "type": "object",
  "properties": {
    "myDate": {
      "title": "My Date",
      "type": "string",
      "format": "date"
    }
  }
}

使用与您的列定义相同的属性：

columnDefs = [
  { field: 'myDate', name: 'My Date' }
]

并在表单中指定日期格式：

form = [
  {
    key: 'myDate',
    format: 'yyyy-mm-dd'
  }
]

使用 Angular-UI Bootstrap 从网格单元格打开的模态内的日期选择器获取日期

get date using Angular-UI Bootstrap Datepicker inside Modal opened from Grid cell

modal-dialog

datepicker

angular-ui

angular-ui-grid