diff --git a/src/legacy/ui/public/field_editor/components/field_format_editor/editors/date_nanos/__snapshots__/date_nanos.test.js.snap b/src/legacy/ui/public/field_editor/components/field_format_editor/editors/date_nanos/__snapshots__/date_nanos.test.js.snap
new file mode 100644
index 000000000000..fe2f35f502d7
--- /dev/null
+++ b/src/legacy/ui/public/field_editor/components/field_format_editor/editors/date_nanos/__snapshots__/date_nanos.test.js.snap
@@ -0,0 +1,75 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DateFormatEditor should render normally 1`] = `
+
+
+
+
+
+
+
+
+ }
+ isInvalid={false}
+ label={
+
+ MMM D, YYYY @ HH:mm:ss.SSSSSSSSS
+ ,
+ }
+ }
+ />
+ }
+ labelType="label"
+ >
+
+
+
+
+`;
diff --git a/src/legacy/ui/public/field_editor/components/field_format_editor/editors/date_nanos/date_nanos.js b/src/legacy/ui/public/field_editor/components/field_format_editor/editors/date_nanos/date_nanos.js
new file mode 100644
index 000000000000..62f6e8742326
--- /dev/null
+++ b/src/legacy/ui/public/field_editor/components/field_format_editor/editors/date_nanos/date_nanos.js
@@ -0,0 +1,96 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, { Fragment } from 'react';
+
+import {
+ EuiCode,
+ EuiFieldText,
+ EuiFormRow,
+ EuiIcon,
+ EuiLink,
+} from '@elastic/eui';
+
+import {
+ DefaultFormatEditor
+} from '../default';
+
+import {
+ FormatEditorSamples
+} from '../../samples';
+
+import { FormattedMessage } from '@kbn/i18n/react';
+
+export class DateNanosFormatEditor extends DefaultFormatEditor {
+ static formatId = 'date_nanos';
+
+ constructor(props) {
+ super(props);
+ this.state.sampleInputs = [
+ '2015-01-01T12:10:30.123456789Z',
+ '2019-05-08T06:55:21.567891234Z',
+ '2019-08-06T17:22:30.987654321Z'
+ ];
+ }
+
+ render() {
+ const { format, formatParams } = this.props;
+ const { error, samples } = this.state;
+ const defaultPattern = format.getParamDefaults().pattern;
+
+ return (
+
+ {defaultPattern}
+ }}
+ />
+ }
+ isInvalid={!!error}
+ error={error}
+ helpText={
+
+
+
+
+
+
+ }
+ >
+ {
+ this.onChange({ pattern: e.target.value });
+ }}
+ isInvalid={!!error}
+ />
+
+
+
+ );
+ }
+}
diff --git a/src/legacy/ui/public/field_editor/components/field_format_editor/editors/date_nanos/date_nanos.test.js b/src/legacy/ui/public/field_editor/components/field_format_editor/editors/date_nanos/date_nanos.test.js
new file mode 100644
index 000000000000..a0ffecef3c34
--- /dev/null
+++ b/src/legacy/ui/public/field_editor/components/field_format_editor/editors/date_nanos/date_nanos.test.js
@@ -0,0 +1,54 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import { DateNanosFormatEditor } from './date_nanos';
+
+const fieldType = 'date_nanos';
+const format = {
+ getConverterFor: jest.fn().mockImplementation(() => (input) => `converted date for ${input}`),
+ getParamDefaults: jest.fn().mockImplementation(() => {
+ return { pattern: 'MMM D, YYYY @ HH:mm:ss.SSSSSSSSS' };
+ }),
+};
+const formatParams = {};
+const onChange = jest.fn();
+const onError = jest.fn();
+
+describe('DateFormatEditor', () => {
+ it('should have a formatId', () => {
+ expect(DateNanosFormatEditor.formatId).toEqual('date_nanos');
+ });
+
+ it('should render normally', async () => {
+ const component = shallow(
+
+ );
+
+ expect(component).toMatchSnapshot();
+ });
+});
diff --git a/src/legacy/ui/public/field_editor/components/field_format_editor/editors/date_nanos/index.js b/src/legacy/ui/public/field_editor/components/field_format_editor/editors/date_nanos/index.js
new file mode 100644
index 000000000000..b82541a21c8b
--- /dev/null
+++ b/src/legacy/ui/public/field_editor/components/field_format_editor/editors/date_nanos/index.js
@@ -0,0 +1,20 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export { DateNanosFormatEditor } from './date_nanos';
diff --git a/src/legacy/ui/public/field_editor/components/field_format_editor/register.js b/src/legacy/ui/public/field_editor/components/field_format_editor/register.js
index 78dea8f952db..3062a3ba8ac1 100644
--- a/src/legacy/ui/public/field_editor/components/field_format_editor/register.js
+++ b/src/legacy/ui/public/field_editor/components/field_format_editor/register.js
@@ -21,6 +21,7 @@ import { RegistryFieldFormatEditorsProvider } from 'ui/registry/field_format_edi
import { BytesFormatEditor } from './editors/bytes';
import { ColorFormatEditor } from './editors/color';
import { DateFormatEditor } from './editors/date';
+import { DateNanosFormatEditor } from './editors/date_nanos';
import { DurationFormatEditor } from './editors/duration';
import { NumberFormatEditor } from './editors/number';
import { PercentFormatEditor } from './editors/percent';
@@ -32,6 +33,7 @@ import { UrlFormatEditor } from './editors/url/url';
RegistryFieldFormatEditorsProvider.register(() => BytesFormatEditor);
RegistryFieldFormatEditorsProvider.register(() => ColorFormatEditor);
RegistryFieldFormatEditorsProvider.register(() => DateFormatEditor);
+RegistryFieldFormatEditorsProvider.register(() => DateNanosFormatEditor);
RegistryFieldFormatEditorsProvider.register(() => DurationFormatEditor);
RegistryFieldFormatEditorsProvider.register(() => NumberFormatEditor);
RegistryFieldFormatEditorsProvider.register(() => PercentFormatEditor);