s464958/FirmTracker
2
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

datepicker zamiast zwyklych inputow #5

Merged
s153592 merged 1 commits from fe-poprawki2 into master 2025-01-02 23:49:35 +01:00
Conversation 0 Commits 1 Files Changed 6 +21 -10
6 changed files with 21 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
firm/src/components/DatePicker.js
View File

@ -27,7 +27,7 @@ const DatePicker = ({ value, onChange, name, className, minDate, maxDate }) => {
<input <input
type="datetime-local" type="datetime-local"
name={name} name={name}
value={value || getCurrentDate()} value={value}
onChange={handleChange} onChange={handleChange}
className={className} className={className}
/> />

1
firm/src/components/DodawanieTransakcji.js
View File

@ -66,7 +66,6 @@ const DodawanieTransakcji = () => {
const handleInputChange = (event) => { const handleInputChange = (event) => {
const { name, value } = event.target; const { name, value } = event.target;
setNewTransaction({ ...newTransaction, [name]: value }); setNewTransaction({ ...newTransaction, [name]: value });
console.log(`po: ${name}, ${value}`)
}; };
const handleCancel = () => { const handleCancel = () => {
navigate('/transakcje'); navigate('/transakcje');

4
firm/src/components/EdycjaTransakcji.js
View File

@ -3,6 +3,7 @@ import axios from "axios";
import { useParams, useNavigate } from "react-router-dom"; import { useParams, useNavigate } from "react-router-dom";
import {ReactComponent as MinusIcon} from "../icons/minus-icon.svg" import {ReactComponent as MinusIcon} from "../icons/minus-icon.svg"
import Select from "react-select"; import Select from "react-select";
import DatePicker from './DatePicker';
const EdycjaTransakcji = () => { const EdycjaTransakcji = () => {
const { id } = useParams(); const { id } = useParams();
@ -212,12 +213,13 @@ const EdycjaTransakcji = () => {
<div className="mb-4 flex items-center space-x-4"> <div className="mb-4 flex items-center space-x-4">
<div> <div>
<label className="block mb-2 text-gray-700 font-medium">Data transakcji</label> <label className="block mb-2 text-gray-700 font-medium">Data transakcji</label>
<input <DatePicker
type="datetime-local" type="datetime-local"
name="date" name="date"
value={transaction.date} value={transaction.date}
onChange={handleInputChange} onChange={handleInputChange}
className="flex-1 mb-4 px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500" className="flex-1 mb-4 px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
maxDate="2099-12-31T23:59"
/> />
{errors.date && <span className="text-red-500 text-sm">{errors.date}</span>} {errors.date && <span className="text-red-500 text-sm">{errors.date}</span>}
</div> </div>

13
firm/src/components/PanelAdministratora.js
View File

@ -1,6 +1,7 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import axios from 'axios'; import axios from 'axios';
import WidokHarmonogramu from './WidokHarmonogramu'; import WidokHarmonogramu from './WidokHarmonogramu';
import DatePicker from './DatePicker';
const PanelAdministratora = () => { const PanelAdministratora = () => {
const [selectedOption, setSelectedOption] = useState('harmonogramy'); const [selectedOption, setSelectedOption] = useState('harmonogramy');
@ -164,23 +165,25 @@ const PanelAdministratora = () => {
<div className="mb-4"> <div className="mb-4">
<label htmlFor="startDate" className="block text-lg font-medium text-gray-700 mb-2">Wybierz datę początkową:</label> <label htmlFor="startDate" className="block text-lg font-medium text-gray-700 mb-2">Wybierz datę początkową:</label>
<input <DatePicker
type="datetime-local" type="datetime-local"
id="startDate" id="startDate"
value={startDate} value={startDate}
onChange={(e) => setStartDate(e.target.value)} onChange={(e) => setStartDate(e.target.value)}
className="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" className="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
maxDate="2099-12-31T23:59"
/> />
</div> </div>
<div className="mb-6"> <div className="mb-6">
<label htmlFor="endDate" className="block text-lg font-medium text-gray-700 mb-2">Wybierz datę końcową:</label> <label htmlFor="endDate" className="block text-lg font-medium text-gray-700 mb-2">Wybierz datę końcową:</label>
<input <DatePicker
type="datetime-local" type="datetime-local"
id="endDate" id="endDate"
value={endDate} value={endDate}
onChange={(e) => setEndDate(e.target.value)} onChange={(e) => setEndDate(e.target.value)}
className="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" className="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
maxDate="2099-12-31T23:59"
/> />
</div> </div>
@ -261,23 +264,25 @@ const PanelAdministratora = () => {
<div className="mb-4"> <div className="mb-4">
<label htmlFor="startDate" className="block text-lg font-medium text-gray-700 mb-2">Wybierz datę początkową:</label> <label htmlFor="startDate" className="block text-lg font-medium text-gray-700 mb-2">Wybierz datę początkową:</label>
<input <DatePicker
type="datetime-local" type="datetime-local"
id="startDate" id="startDate"
value={startDate} value={startDate}
onChange={(e) => setStartDate(e.target.value)} onChange={(e) => setStartDate(e.target.value)}
className="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" className="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
maxDate="2099-12-31T23:59"
/> />
</div> </div>
<div className="mb-6"> <div className="mb-6">
<label htmlFor="endDate" className="block text-lg font-medium text-gray-700 mb-2">Wybierz datę końcową:</label> <label htmlFor="endDate" className="block text-lg font-medium text-gray-700 mb-2">Wybierz datę końcową:</label>
<input <DatePicker
type="datetime-local" type="datetime-local"
id="endDate" id="endDate"
value={endDate} value={endDate}
onChange={(e) => setEndDate(e.target.value)} onChange={(e) => setEndDate(e.target.value)}
className="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" className="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
maxDate="2099-12-31T23:59"
/> />
</div> </div>

7
firm/src/components/Raporty.js
View File

@ -1,6 +1,7 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import axios from 'axios'; import axios from 'axios';
import {ReactComponent as KoszIcon} from '../icons/delete.svg'; import {ReactComponent as KoszIcon} from '../icons/delete.svg';
import DatePicker from './DatePicker';
const Raporty = () => { const Raporty = () => {
const [fromDate, setFromDate] = useState(''); const [fromDate, setFromDate] = useState('');
@ -131,23 +132,25 @@ const Raporty = () => {
<div className="mb-6 flex items-center space-x-6"> <div className="mb-6 flex items-center space-x-6">
<div className="flex-1"> <div className="flex-1">
<label htmlFor="fromDate" className="block text-lg font-medium text-gray-700 mb-2">Od:</label> <label htmlFor="fromDate" className="block text-lg font-medium text-gray-700 mb-2">Od:</label>
<input <DatePicker
type="datetime-local" type="datetime-local"
id="fromDate" id="fromDate"
value={fromDate} value={fromDate}
onChange={handleFromDateChange} onChange={handleFromDateChange}
className="w-full px-4 py-2 border-2 border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" className="w-full px-4 py-2 border-2 border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
maxDate="2099-12-31T23:59"
/> />
</div> </div>
<div className="flex-1"> <div className="flex-1">
<label htmlFor="toDate" className="block text-lg font-medium text-gray-700 mb-2">Do:</label> <label htmlFor="toDate" className="block text-lg font-medium text-gray-700 mb-2">Do:</label>
<input <DatePicker
type="datetime-local" type="datetime-local"
id="toDate" id="toDate"
value={toDate} value={toDate}
onChange={handleToDateChange} onChange={handleToDateChange}
className="w-full px-4 py-2 border-2 border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" className="w-full px-4 py-2 border-2 border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
maxDate="2099-12-31T23:59"
/> />
</div> </div>
</div> </div>

4
firm/src/components/Wydatki.js
View File

@ -1,6 +1,7 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import axios from 'axios'; import axios from 'axios';
import { ReactComponent as KoszIcon } from '../icons/delete.svg'; import { ReactComponent as KoszIcon } from '../icons/delete.svg';
import DatePicker from './DatePicker';
const Wydatki = () => { const Wydatki = () => {
const [expenses, setExpenses] = useState([]); const [expenses, setExpenses] = useState([]);
@ -114,12 +115,13 @@ const Wydatki = () => {
<div className="flex space-x-6"> <div className="flex space-x-6">
<div className="flex-1"> <div className="flex-1">
<label htmlFor="expenseDate" className="block text-sm font-medium text-gray-700">Data</label> <label htmlFor="expenseDate" className="block text-sm font-medium text-gray-700">Data</label>
<input <DatePicker
type="datetime-local" type="datetime-local"
id="expenseDate" id="expenseDate"
value={newExpense.date} value={newExpense.date}
onChange={handleDateChange} onChange={handleDateChange}
className="mt-1 py-2 px-3 block w-full shadow-md sm:text-sm rounded-lg border-gray-300 focus:ring-indigo-500 focus:border-indigo-500" className="mt-1 py-2 px-3 block w-full shadow-md sm:text-sm rounded-lg border-gray-300 focus:ring-indigo-500 focus:border-indigo-500"
maxDate="2099-12-31T23:59"
/> />
</div> </div>