我有一个从数据库返回的 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 中的日期和时间之间添加空格将在客户端上反映这种方式。
实际:日期和时间之间只允许有一个空格。所有其他空格均被删除。
我试图通过开关或按钮单击来确定浮动过滤器的显示。看起来很简单。我应该能够在 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) 我正在尝试动态创建 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)