diff --git a/packages/@sanity/form-builder/src/inputs/DateTime/DateTimeInput.js b/packages/@sanity/form-builder/src/inputs/DateTime/DateTimeInput.js index db61a3e77d2..7e03f8ec07c 100644 --- a/packages/@sanity/form-builder/src/inputs/DateTime/DateTimeInput.js +++ b/packages/@sanity/form-builder/src/inputs/DateTime/DateTimeInput.js @@ -6,6 +6,7 @@ import 'react-datepicker/dist/react-datepicker-cssmodules.css' // eslint-disable import {uniqueId} from 'lodash' import React from 'react' import FormField from 'part:@sanity/components/formfields/default' +import TextInput from 'part:@sanity/components/textinputs/default' import styles from './styles/DateTimeInput.css' import PatchEvent, {set, unset} from '../../PatchEvent' @@ -33,12 +34,12 @@ type Props = { title: string, description: string, options?: SchemaOptions, + readOnly?: boolean, }, onChange: PatchEvent => void, level: number } - function parseOptions(options: SchemaOptions = {}): ParsedOptions { return { dateFormat: options.dateFormat || DEFAULT_DATE_FORMAT, @@ -99,7 +100,7 @@ export default class DateInput extends React.Component { render() { const {value, type, level} = this.props const {inputValue} = this.state - const {title, description} = type + const {title, description, readOnly} = type const momentValue: ?Moment = value ? moment(value) : null @@ -109,27 +110,36 @@ export default class DateInput extends React.Component { return ( -
- -
+ {readOnly + ? ( + + ) + : ( +
+ +
+ )}
) } diff --git a/packages/test-studio/schemas/datetime.js b/packages/test-studio/schemas/datetime.js index 75c2f2244af..e98405cd3e0 100644 --- a/packages/test-studio/schemas/datetime.js +++ b/packages/test-studio/schemas/datetime.js @@ -35,6 +35,12 @@ export default { timeFormat: 'hh:mm' } }, + { + name: 'aReadOnlyDateTime', + type: 'datetime', + title: 'A read only datetime', + readOnly: true + }, { name: 'aDateTimeWithCustomDateAndTimeFormat', type: 'datetime',