Add time picker
This commit is contained in:
parent
b98cfcfeb9
commit
1b4318cece
127
frontend/package-lock.json
generated
127
frontend/package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user