小编Ree*_*off的帖子

使用 moment.js 在日期和时间之间添加空格

我有一个从数据库返回的 ISO 格式的日期时间。它们看起来像这样:2015-11-03T10:06:50.000Z。我使用 moment.js 来解析它,以便它更具可读性,结果如下所示:11-03-2015 10:06:50 AM。我只是想在日期和时间之间添加另一个空格,以便更容易阅读。有什么想法吗?

我尝试在日期和时间之间添加另一个空格,但似乎它删除了除一个空格之外的所有空格。我也尝试过连字符和管道,但它们看起来并不像我想要的那样。

rows.forEach(row => {
    // TODO find a way to put more blank space between date and time
    let formattedDateTime = moment.utc(row.DateTime).format(`MM-DD-YYYY hh:mm:ss A`)
    row.DateTime = formattedDateTime
    // console.log('formatted datetime', formattedDateTime)
  })
Run Code Online (Sandbox Code Playgroud)

预期:在 moment.format 中的日期和时间之间添加空格将在客户端上反映这种方式。

实际:日期和时间之间只允许有一个空格。所有其他空格均被删除。

momentjs vue.js

5
推荐指数
2
解决办法
5049
查看次数

切换 Ag-Grid 中的浮动过滤器?

我试图通过开关或按钮单击来确定浮动过滤器的显示。看起来很简单。我应该能够在 true 和 false 之间切换,将该值提供给网格选项中的浮动过滤器,然后刷新标题,对吗?不幸的是,网格似乎总是落后一步。当我第一次点击时,什么也没有发生。当我将开关切换回 false 时,浮动过滤器就会出现。然后,浮动过滤器将继续出现(当开关为假时)并消失(当开关为真时)。为了让事情变得更奇怪,如果我切换浮动过滤器开关几次,然后尝试切换 rowGroupPanelShow (我也试图切换),它将触发浮动过滤器切换到以前不是的任何值。但只有一次。

我对此尝试了一些变化。我试过开关和按钮。我尝试过观察者并编写自己的函数来切换 true 和 false。我尝试this.gridApi.refreshHeader()在与切换相同的函数中调用并从它自己的函数中调用它。我尝试过打电话this.columnApi.resetColumnState()(适用于重置分组)。控制台的所有内容都正确记录,但网格似乎总是落后一步。

这是我从 ag-grid 网站上获取并修改以演示其行为的 plunker 的链接:https://plnkr.co/edit/Me51NOVOCbmvFxx95WpP ?p=preview

这是开关和网格:

<v-layout row wrap justify-center>
  <v-flex xs6 sm2 md2>
    <v-switch
      class="switch"
      color="blue"
      id="filterSwitch"
      label="Floating Filter"
      v-model="filterSwitch"
    ></v-switch>
  </v-flex>
  <v-flex xs6 sm2 md2>
    <v-switch
      class="switch"
      color="blue"
      id="groupSwitch"
      label="Row Grouping Panel"
      v-model="groupSwitch"
    ></v-switch>
  </v-flex>
</v-layout>
<div class="buys">
  <ag-grid-vue
  id="personTableAgGridTest"
  style="width: 100%; height: 65vh;"
  class="ag-theme-balham"
  :columnDefs="columnDefs"
  :rowData="rowData"
  :cacheBlockSize="cacheBlockSize"
  :rowModelType="rowModelType"
  :enableColResize="true"
  :enableFilter="true"
  :enableSorting="true"
  :rowSelection="rowSelection"
  :animateRows="true"
  :floatingFilter="floatingFilter"
  :maxConcurrentDatasourceRequests="maxConcurrentDatasourceRequests"
  :defaultColDef="defaultColDef"
  :columnTypes="columnTypes"
  :sideBar="sideBar" …
Run Code Online (Sandbox Code Playgroud)

javascript vue.js ag-grid

5
推荐指数
1
解决办法
5721
查看次数

Vuetify 动态创建 v-select

我正在尝试动态创建 v-selects。当用户从第一个 v-select 中选择一个选项时,另一个应该出现。由于 v-selects 不是 html 组件,我在将新组件附加到 DOM 时遇到了很多麻烦。这是创建新 v-select 的函数。

makeNewSelect () {
  let newVSelect = document.createElement('div')
  let html = ` <div role="combobox" class="v-input ma-2 v-text-field v-text-field--enclosed v-text-field--outline v-select theme--light">
                <div class="v-input__control"><div class="v-input__slot">
                  <div class="v-select__slot"><label aria-hidden="true" class="v-label theme--light" style="left: 0px; right: auto; position: absolute;">Select</label>
                    <div class="v-select__selections"><input aria-label="Select" readonly="readonly" type="text" autocomplete="on" aria-readonly="false"></div>
                      <div class="v-input__append-inner">
                        <div class="v-input__icon v-input__icon--append"><i aria-hidden="true" class="v-icon material-icons theme--light">arrow_drop_down</i></div>
                      </div>
                    </div>
                    <div class="v-menu"></div>
                  </div>
                  <div class="v-text-field__details">
                    <div class="v-messages theme--light">
                      <div class="v-messages__wrapper"></div>
                    </div>
                  </div>
                </div>
              </div>`
  newVSelect.innerHTML = …
Run Code Online (Sandbox Code Playgroud)

javascript vue.js vuetify.js

0
推荐指数
1
解决办法
1651
查看次数

标签 统计

vue.js ×3

javascript ×2

ag-grid ×1

momentjs ×1

vuetify.js ×1