In redux-form i want to use datetime picker with manual date entry enabled. I have used maskediinput for proper format. It is working fine with all the browsers for normal page.
When clicking on the input it gives blank screen in modal specific for safari. I can't find what is the issue with safari-modal-datepicker-maskedinput !
renderDateTimePicker = ({ input: { onChange, value }, showTime, id, meta, isRequired, readOnly,inputReadOnly }) => {
return (<div> <DateTimePicker
inputProps={{
component: props => <MaskedInput {...props} readOnly={readOnly || inputReadOnly} type="text"
mask={[ /\d/, /\d/, /\d/, /\d/,".",/\d/, /\d/, ".", /\d/, /\d/ ]} />
}}
onChange={onChange}
format="YYYY.MM.DD"
time={showTime}
id={id}
name="completion_date"
className="date_click"
placeholder={isRequired === true ? id + " *" : id}
value={!value ? null : new Date(value)}
/>{this.renderError(meta)}
</div>
);
}
Here is my package.json file :
{
"name": "reduxapi",
"version": "0.1.0",
"private": true,
"dependencies": {
"@devexpress/dx-grid-core": "^1.10.1",
"@devexpress/dx-react-core": "^1.10.1",
"@devexpress/dx-react-grid": "^1.10.1",
"@devexpress/dx-react-grid-material-ui": "^1.10.1",
"@material-ui/core": "^3.9.2",
"@material-ui/icons": "^3.0.2",
"@types/bootstrap.v3.datetimepicker": "^4.17.46",
"ag-grid": "^18.1.2",
"ag-grid-community": "^20.0.0",
"ag-grid-react": "^20.0.0",
"axios": "^0.18.0",
"bootstrap": "^3.4.0",
"bootstrap-datepicker": "^1.8.0",
"cryptr": "^4.0.2",
"datatables.net": "^1.10.19",
"eslint-config-react-app": "^4.0.1",
"faker": "^4.1.0",
"font-awesome": "^4.7.0",
"jquery": "^1.11.2",
"jspdf": "^1.5.3",
"jspdf-autotable": "^3.1.1",
"jwt-simple": "^0.5.5",
"moment": "^2.24.0",
"prop-types": "^15.6.2",
"query-string": "^6.2.0",
"react": "^16.7.0",
"react-autocomplete": "^1.8.1",
"react-autocomplete-input": "^1.0.10",
"react-autosuggest": "^9.4.3",
"react-awesome-modal": "^2.0.5",
"react-bootstrap": "^1.0.0-beta.5",
"react-confirm-alert": "^2.4.1",
"react-csv": "^1.1.1",
"react-data-grid": "^5.0.5",
"react-data-grid-addons": "^5.0.5",
"react-datepicker": "^2.1.0",
"react-dom": "^16.7.0",
"react-encrypt": "^1.0.1",
"react-grid-layout": "^0.16.6",
"react-helmet": "^5.2.1",
"react-moment": "^0.8.4",
"react-redux": "^6.0.0",
"react-router-dom": "^4.3.1",
"react-scripts": "2.1.3",
"react-select": "^2.4.1",
"react-text-mask": "^5.4.3",
"react-to-print-advanced": "^2.1.2",
"react-widgets": "^4.4.10",
"react-widgets-moment": "^4.0.27",
"react-widgets-moment-localizer": "^1.0.2",
"redux": "^4.0.1",
"redux-form": "^8.1.0",
"redux-multilanguage": "^0.1.2",
"redux-thunk": "^2.3.0",
"select2": "^4.0.6-rc.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}