diff --git a/packages/react/src/components/DatePicker/DatePicker-story.js b/packages/react/src/components/DatePicker/DatePicker-story.js index 7b4bb519e780..75d9f4ff83b3 100644 --- a/packages/react/src/components/DatePicker/DatePicker-story.js +++ b/packages/react/src/components/DatePicker/DatePicker-story.js @@ -22,8 +22,8 @@ const datePickerOnChangeActions = decorateAction([ ]); const patterns = { - 'Short (d{1,2}/d{4})': 'd{1,2}/d{4}', - 'Regular (d{1,2}/d{1,2}/d{4})': 'd{1,2}/d{1,2}/d{4}', + 'Short (d{1,2}/d{4})': '\\d{1,2}/\\d{4}', + 'Regular (d{1,2}/d{1,2}/d{4})': '\\d{1,2}/\\d{1,2}/\\d{4}', }; const props = { diff --git a/packages/react/src/components/DatePickerInput/DatePickerInput.js b/packages/react/src/components/DatePickerInput/DatePickerInput.js index d7c63d311f95..e9bcc78ad2aa 100644 --- a/packages/react/src/components/DatePickerInput/DatePickerInput.js +++ b/packages/react/src/components/DatePickerInput/DatePickerInput.js @@ -30,6 +30,48 @@ export default class DatePickerInput extends Component { * control */ labelText: PropTypes.node.isRequired, + + /** + * Provide a regular expression that the input value must match + */ + pattern: (props, propName, componentName) => { + if (props[propName] === undefined) { + return; + } + try { + new RegExp(props[propName]); + } catch (e) { + return new Error( + `Invalid value of prop '${propName}' supplied to '${componentName}', it should be a valid regular expression` + ); + } + }, + + /** + * Specify the type of the + */ + type: PropTypes.string, + + /** + * Specify whether or not the input should be disabled + */ + disabled: PropTypes.bool, + + /** + * Specify whether or not the input should be invalid + */ + invalid: PropTypes.bool, + + /** + * Provide a function to be called when the input field is clicked + */ + onClick: PropTypes.func, + + /** + * Specify an `onChange` handler that is called whenever a change in the + * input field has occurred + */ + onChange: PropTypes.func, }; static defaultProps = {