Add time picker

frontend/package-lock.json

@@ -22,6 +22,7 @@
         "react": "^18.1.0",
         "react-big-calendar": "^1.5.0",
         "react-date-picker": "^9.1.0",
+        "react-datetime-picker": "^4.1.1",
         "react-dom": "^18.1.0",
         "react-hook-form": "^7.31.3",
         "react-modal": "^3.16.1",
@@ -35,6 +36,7 @@
       },
       "devDependencies": {
         "@types/react-big-calendar": "^0.38.2",
+        "@types/react-datetime-picker": "^3.4.1",
         "@types/react-modal": "^3.13.1",
         "autoprefixer": "^10.4.7",
         "postcss": "^8.4.14",
@@ -3890,6 +3892,15 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-datetime-picker": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/@types/react-datetime-picker/-/react-datetime-picker-3.4.1.tgz",
+      "integrity": "sha512-JHqB74+8Zq6cY0PTJ6Wi5Pm6qkNUmooyFfW5SiknSY2xJG1UG8+ljyWTZAvgHvj0XpqcWCHqqYUPiAVagnf9Sg==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/react-dom": {
       "version": "18.0.4",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.4.tgz",
@@ -13904,6 +13915,24 @@
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/react-clock": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/react-clock/-/react-clock-4.0.0.tgz",
+      "integrity": "sha512-CBevN5B40TDUegSWzXk6bSwXhYzyerL9JGTme8GMAY0zO4FiEhVTGN1uzgC0rn/oSAMJw3M5wSf/OJpp9vcN2Q==",
+      "dependencies": {
+        "@wojtekmaj/date-utils": "^1.0.0",
+        "clsx": "^1.2.1",
+        "get-user-locale": "^1.4.0",
+        "prop-types": "^15.6.0"
+      },
+      "funding": {
+        "url": "https://github.com/wojtekmaj/react-clock?sponsor=1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-date-picker": {
       "version": "9.1.0",
       "resolved": "https://registry.npmjs.org/react-date-picker/-/react-date-picker-9.1.0.tgz",
@@ -13927,6 +13956,30 @@
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/react-datetime-picker": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/react-datetime-picker/-/react-datetime-picker-4.1.1.tgz",
+      "integrity": "sha512-e8ANKLcWFL4/TutvggqVfRiDigyelcVdLvWQzOP5cMJ6IxR08Qv2dOncjBWVkwU9vTsDemuHSAGIGqZXtr3aXA==",
+      "dependencies": {
+        "@wojtekmaj/date-utils": "^1.0.3",
+        "clsx": "^1.2.1",
+        "get-user-locale": "^1.2.0",
+        "make-event-props": "^1.1.0",
+        "prop-types": "^15.6.0",
+        "react-calendar": "^4.0.0",
+        "react-clock": "^4.0.0",
+        "react-date-picker": "^9.1.0",
+        "react-fit": "^1.4.0",
+        "react-time-picker": "^5.1.0"
+      },
+      "funding": {
+        "url": "https://github.com/wojtekmaj/react-datetime-picker?sponsor=1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-dev-utils": {
       "version": "12.0.1",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz",
@@ -14287,6 +14340,28 @@
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/react-time-picker": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/react-time-picker/-/react-time-picker-5.1.0.tgz",
+      "integrity": "sha512-NGpy5FM8WYdgCKXE/a85mhf0TunOk+N8ZG6rXBahD0mXeQZ/aBM+iVuKN4ell+QFH8/7F8dhT200ZKatBIphnA==",
+      "dependencies": {
+        "@wojtekmaj/date-utils": "^1.0.0",
+        "clsx": "^1.2.1",
+        "get-user-locale": "^1.2.0",
+        "make-event-props": "^1.1.0",
+        "prop-types": "^15.6.0",
+        "react-clock": "^4.0.0",
+        "react-fit": "^1.4.0",
+        "update-input-width": "^1.2.2"
+      },
+      "funding": {
+        "url": "https://github.com/wojtekmaj/react-time-picker?sponsor=1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-transition-group": {
       "version": "4.4.2",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz",
@@ -19802,6 +19877,15 @@
         "@types/react": "*"
       }
     },
+    "@types/react-datetime-picker": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/@types/react-datetime-picker/-/react-datetime-picker-3.4.1.tgz",
+      "integrity": "sha512-JHqB74+8Zq6cY0PTJ6Wi5Pm6qkNUmooyFfW5SiknSY2xJG1UG8+ljyWTZAvgHvj0XpqcWCHqqYUPiAVagnf9Sg==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/react-dom": {
       "version": "18.0.4",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.4.tgz",
@@ -26979,6 +27063,17 @@
         "prop-types": "^15.6.0"
       }
     },
+    "react-clock": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/react-clock/-/react-clock-4.0.0.tgz",
+      "integrity": "sha512-CBevN5B40TDUegSWzXk6bSwXhYzyerL9JGTme8GMAY0zO4FiEhVTGN1uzgC0rn/oSAMJw3M5wSf/OJpp9vcN2Q==",
+      "requires": {
+        "@wojtekmaj/date-utils": "^1.0.0",
+        "clsx": "^1.2.1",
+        "get-user-locale": "^1.4.0",
+        "prop-types": "^15.6.0"
+      }
+    },
     "react-date-picker": {
       "version": "9.1.0",
       "resolved": "https://registry.npmjs.org/react-date-picker/-/react-date-picker-9.1.0.tgz",
@@ -26995,6 +27090,23 @@
         "update-input-width": "^1.2.2"
       }
     },
+    "react-datetime-picker": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/react-datetime-picker/-/react-datetime-picker-4.1.1.tgz",
+      "integrity": "sha512-e8ANKLcWFL4/TutvggqVfRiDigyelcVdLvWQzOP5cMJ6IxR08Qv2dOncjBWVkwU9vTsDemuHSAGIGqZXtr3aXA==",
+      "requires": {
+        "@wojtekmaj/date-utils": "^1.0.3",
+        "clsx": "^1.2.1",
+        "get-user-locale": "^1.2.0",
+        "make-event-props": "^1.1.0",
+        "prop-types": "^15.6.0",
+        "react-calendar": "^4.0.0",
+        "react-clock": "^4.0.0",
+        "react-date-picker": "^9.1.0",
+        "react-fit": "^1.4.0",
+        "react-time-picker": "^5.1.0"
+      }
+    },
     "react-dev-utils": {
       "version": "12.0.1",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz",
@@ -27248,6 +27360,21 @@
         "react-transition-group": "^4.3.0"
       }
     },
+    "react-time-picker": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/react-time-picker/-/react-time-picker-5.1.0.tgz",
+      "integrity": "sha512-NGpy5FM8WYdgCKXE/a85mhf0TunOk+N8ZG6rXBahD0mXeQZ/aBM+iVuKN4ell+QFH8/7F8dhT200ZKatBIphnA==",
+      "requires": {
+        "@wojtekmaj/date-utils": "^1.0.0",
+        "clsx": "^1.2.1",
+        "get-user-locale": "^1.2.0",
+        "make-event-props": "^1.1.0",
+        "prop-types": "^15.6.0",
+        "react-clock": "^4.0.0",
+        "react-fit": "^1.4.0",
+        "update-input-width": "^1.2.2"
+      }
+    },
     "react-transition-group": {
       "version": "4.4.2",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz",

frontend/package.json

@@ -17,6 +17,7 @@
     "react": "^18.1.0",
     "react-big-calendar": "^1.5.0",
     "react-date-picker": "^9.1.0",
+    "react-datetime-picker": "^4.1.1",
     "react-dom": "^18.1.0",
     "react-hook-form": "^7.31.3",
     "react-modal": "^3.16.1",
@@ -54,6 +55,7 @@
   },
   "devDependencies": {
     "@types/react-big-calendar": "^0.38.2",
+    "@types/react-datetime-picker": "^3.4.1",
     "@types/react-modal": "^3.13.1",
     "autoprefixer": "^10.4.7",
     "postcss": "^8.4.14",

frontend/src/views/coordinator/Schedule.tsx

@@ -16,7 +16,7 @@ import Select from 'react-select'
 import { getLeaders } from '../../api/leaders'
 import useLocalStorageState from 'use-local-storage-state'
 import bigCalendarTranslations from '../../utils/bigCalendarTranslations'
-import DatePicker from 'react-date-picker'
+import DateTimePicker from 'react-datetime-picker'
 import dayjs from 'dayjs'
 import dayjsLocalizer from '../../utils/dayjsLocalizer'
 
@@ -280,16 +280,20 @@ const Schedule = () => {
     <div className="flex flex-col">
       <div>
         Start zapisów dla studentów: <label htmlFor="end_date">Od </label>
-        <DatePicker
+        <DateTimePicker
           onChange={setStartDate}
           value={startDate}
-          format={'yyyy-MM-dd'}
+          format={'yyyy-MM-dd HH:mm:ss'}
+          locale={'pl'}
+          disableClock
         />
         <label htmlFor="end_date">Do </label>
-        <DatePicker
+        <DateTimePicker
           onChange={setEndDate}
           value={endDate}
-          format={'yyyy-MM-dd'}
+          format={'yyyy-MM-dd HH:mm:ss'}
+          locale={'pl'}
+          disableClock
         />
         <button
           className="btn btn-success ml-2"

frontend/src/views/coordinator/Schedules.tsx

@@ -3,7 +3,7 @@ import { createSchedule, getSchedules } from '../../api/schedule'
 import { useForm } from 'react-hook-form'
 import { Link } from 'react-router-dom'
 import useLocalStorageState from 'use-local-storage-state'
-import DatePicker from 'react-date-picker'
+import DateTimePicker from 'react-datetime-picker'
 import { useState } from 'react'
 
 const Schedules = () => {
@@ -60,20 +60,24 @@ const Schedules = () => {
             Od
           </label>
 
-          <DatePicker
+          <DateTimePicker
             onChange={setStartDate}
             value={startDate}
-            format={'yyyy-MM-dd'}
+            format={'yyyy-MM-dd HH:mm:ss'}
+            locale={'pl'}
+            disableClock
           />
 
           <label className="label" htmlFor="end_date">
             Do
           </label>
 
-          <DatePicker
+          <DateTimePicker
             onChange={setEndDate}
             value={endDate}
-            format={'yyyy-MM-dd'}
+            format={'yyyy-MM-dd HH:mm:ss'}
+            locale={'pl'}
+            disableClock
           />
         </div>
         <button className="btn btn-success mt-4">Stwórz zapisy</button>