diff --git a/openbis_ng_ui/package.json b/openbis_ng_ui/package.json
index 91916e3b1acb7a67703a0fa7cd6a9f04b04bbe06..25e0089644f5ed14d840b66c2ece27973e8857a7 100644
--- a/openbis_ng_ui/package.json
+++ b/openbis_ng_ui/package.json
@@ -5,9 +5,12 @@
   "author": "Antti Luomi",
   "license": "Apache-2.0",
   "dependencies": {
+    "@date-io/date-fns": "^1.3.13",
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "^4.0.0-alpha.56",
+    "@material-ui/pickers": "^3.3.10",
+    "date-fns": "^2.22.1",
     "history": "^4.10.1",
     "install": "^0.13.0",
     "npm": "^6.14.8",
diff --git a/openbis_ng_ui/src/js/components/common/date/DatePickerProvider.jsx b/openbis_ng_ui/src/js/components/common/date/DatePickerProvider.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..43bd68d872bfb8a54d6e7d1864006f66143663f6
--- /dev/null
+++ b/openbis_ng_ui/src/js/components/common/date/DatePickerProvider.jsx
@@ -0,0 +1,15 @@
+import React from 'react'
+import { MuiPickersUtilsProvider } from '@material-ui/pickers'
+import DateFnsUtils from '@date-io/date-fns'
+
+class DatePickerProvider extends React.Component {
+  render() {
+    return (
+      <MuiPickersUtilsProvider utils={DateFnsUtils}>
+        {this.props.children}
+      </MuiPickersUtilsProvider>
+    )
+  }
+}
+
+export default DatePickerProvider
diff --git a/openbis_ng_ui/src/js/components/tools/common/HistoryGrid.jsx b/openbis_ng_ui/src/js/components/tools/common/HistoryGrid.jsx
index beb6173ca1c8b6b750c8de229b1b00f2da5507c8..0a680ace9f3668dc1541be44b2409e94c941ec18 100644
--- a/openbis_ng_ui/src/js/components/tools/common/HistoryGrid.jsx
+++ b/openbis_ng_ui/src/js/components/tools/common/HistoryGrid.jsx
@@ -5,6 +5,7 @@ import Grid from '@src/js/components/common/grid/Grid.jsx'
 import UserLink from '@src/js/components/common/link/UserLink.jsx'
 import Collapse from '@material-ui/core/Collapse'
 import SelectField from '@src/js/components/common/form/SelectField.jsx'
+import { DateTimePicker } from '@material-ui/pickers'
 import Link from '@material-ui/core/Link'
 import FormUtil from '@src/js/components/common/form/FormUtil.js'
 import openbis from '@src/js/services/openbis.js'
@@ -265,7 +266,16 @@ class HistoryGrid extends React.PureComponent {
             label: messages.get(messages.DATE),
             sortable: true,
             sort: 'desc',
-            getValue: ({ row }) => date.format(row.registrationDate.value)
+            getValue: ({ row }) => date.format(row.registrationDate.value),
+            renderFilter: ({ value, onChange }) => {
+              return (
+                <DateTimePicker
+                  variant='inline'
+                  value={value}
+                  onChange={onChange}
+                />
+              )
+            }
           }
         ]}
         rows={rows}
diff --git a/openbis_ng_ui/src/js/index.js b/openbis_ng_ui/src/js/index.js
index a85530567bbf5254794773243ac0e88c7eafc108..44c78566e8915909d438ab4e6198c4db3c3db2e4 100644
--- a/openbis_ng_ui/src/js/index.js
+++ b/openbis_ng_ui/src/js/index.js
@@ -4,6 +4,7 @@ import ReactDOM from 'react-dom'
 import { Provider } from 'react-redux'
 import store from '@src/js/store/store.js'
 import ErrorBoundary from '@src/js/components/common/error/ErrorBoundary.jsx'
+import DatePickerProvider from '@src/js/components/common/date/DatePickerProvider.jsx'
 import ThemeProvider from '@src/js/components/common/theme/ThemeProvider.jsx'
 
 const render = () => {
@@ -13,7 +14,9 @@ const render = () => {
     <Provider store={store}>
       <ThemeProvider>
         <ErrorBoundary>
-          <App />
+          <DatePickerProvider>
+            <App />
+          </DatePickerProvider>
         </ErrorBoundary>
       </ThemeProvider>
     </Provider>,