add timestampFormat (#863)
* add timestampFormat * use createTextNode instead innerHTML
This commit is contained in:
parent
90423573ab
commit
ce15bb4b37
30
docs/api.md
30
docs/api.md
|
@ -508,6 +508,36 @@ Constructs a new JSONEditor.
|
||||||
|
|
||||||
Only applicable for modes `tree`, `form`, and `view`.
|
Only applicable for modes `tree`, `form`, and `view`.
|
||||||
|
|
||||||
|
- `{ function({field, value, path}) -> string|null } timestampFormat`
|
||||||
|
|
||||||
|
Customizing the way formating the timestamp. Called when a value is timestamp after `timestampTag`. If it returns null, the timestamp would be formatted with default setting (`new Date(value).toISOString()`).
|
||||||
|
|
||||||
|
parameter:
|
||||||
|
|
||||||
|
```
|
||||||
|
{
|
||||||
|
field: string,
|
||||||
|
value: string,
|
||||||
|
path: string[]
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Example:
|
||||||
|
|
||||||
|
```js
|
||||||
|
var options = {
|
||||||
|
timestampFormat: function ({ field, value, path }) {
|
||||||
|
if (field === 'customTime') {
|
||||||
|
return new Date(value*1000).toString()
|
||||||
|
}
|
||||||
|
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Only applicable for modes `tree`, `form`, and `view`.
|
||||||
|
|
||||||
- `{string} language`
|
- `{string} language`
|
||||||
|
|
||||||
The default language comes from the browser navigator, but you can force a specific language. So use here string as 'en' or 'pt-BR'. Built-in languages: `en`, `pt-BR`, `zh-CN`, `tr`, `ja`, `fr-FR`. Other translations can be specified via the option `languages`.
|
The default language comes from the browser navigator, but you can force a specific language. So use here string as 'en' or 'pt-BR'. Built-in languages: `en`, `pt-BR`, `zh-CN`, `tr`, `ja`, `fr-FR`. Other translations can be specified via the option `languages`.
|
||||||
|
|
|
@ -35,6 +35,7 @@
|
||||||
'null': null,
|
'null': null,
|
||||||
'number': 123,
|
'number': 123,
|
||||||
'object': {'a': 'b', 'c': 'd'},
|
'object': {'a': 'b', 'c': 'd'},
|
||||||
|
'time': 1575599819000,
|
||||||
'string': 'Hello World'
|
'string': 'Hello World'
|
||||||
}
|
}
|
||||||
editor.set(json)
|
editor.set(json)
|
||||||
|
|
|
@ -180,7 +180,7 @@ JSONEditor.VALID_OPTIONS = [
|
||||||
'onSelectionChange', 'onTextSelectionChange', 'onClassName',
|
'onSelectionChange', 'onTextSelectionChange', 'onClassName',
|
||||||
'onFocus', 'onBlur',
|
'onFocus', 'onBlur',
|
||||||
'colorPicker', 'onColorPicker',
|
'colorPicker', 'onColorPicker',
|
||||||
'timestampTag',
|
'timestampTag', 'timestampFormat',
|
||||||
'escapeUnicode', 'history', 'search', 'mode', 'modes', 'name', 'indentation',
|
'escapeUnicode', 'history', 'search', 'mode', 'modes', 'name', 'indentation',
|
||||||
'sortObjectKeys', 'navigationBar', 'statusBar', 'mainMenuBar', 'languages', 'language', 'enableSort', 'enableTransform',
|
'sortObjectKeys', 'navigationBar', 'statusBar', 'mainMenuBar', 'languages', 'language', 'enableSort', 'enableTransform',
|
||||||
'maxVisibleChilds', 'onValidationError'
|
'maxVisibleChilds', 'onValidationError'
|
||||||
|
|
|
@ -1791,8 +1791,22 @@ export class Node {
|
||||||
this.dom.value.parentNode.appendChild(this.dom.date)
|
this.dom.value.parentNode.appendChild(this.dom.date)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
let title = null
|
||||||
|
if (typeof this.editor.options.timestampFormat === 'function') {
|
||||||
|
title = this.editor.options.timestampFormat({
|
||||||
|
field: this.field,
|
||||||
|
value: this.value,
|
||||||
|
path: this.getPath()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
if (!title) {
|
||||||
this.dom.date.innerHTML = new Date(value).toISOString()
|
this.dom.date.innerHTML = new Date(value).toISOString()
|
||||||
this.dom.date.title = new Date(value).toString()
|
} else {
|
||||||
|
while (this.dom.date.firstChild) {
|
||||||
|
this.dom.date.removeChild(this.dom.date.firstChild)
|
||||||
|
}
|
||||||
|
this.dom.date.appendChild(document.createTextNode(title))
|
||||||
|
}
|
||||||
} else {
|
} else {
|
||||||
// cleanup date tag
|
// cleanup date tag
|
||||||
if (this.dom.date) {
|
if (this.dom.date) {
|
||||||
|
|
|
@ -156,6 +156,7 @@ treemode._setOptions = function (options) {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
timestampTag: true,
|
timestampTag: true,
|
||||||
|
timestampFormat: null,
|
||||||
onEvent: null,
|
onEvent: null,
|
||||||
enableSort: true,
|
enableSort: true,
|
||||||
enableTransform: true
|
enableTransform: true
|
||||||
|
|
Loading…
Reference in New Issue