Merge pull request 'datepicker zamiast zwyklych inputow' (#5) from fe-poprawki2 into master

Reviewed-on: #5
This commit is contained in:
s153592 2025-01-02 23:49:35 +01:00
commit 3643fd1377
6 changed files with 21 additions and 10 deletions

View File

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

View File

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

View File

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

View File

@ -1,6 +1,7 @@
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import WidokHarmonogramu from './WidokHarmonogramu';
import DatePicker from './DatePicker';
const PanelAdministratora = () => {
const [selectedOption, setSelectedOption] = useState('harmonogramy');
@ -164,23 +165,25 @@ const PanelAdministratora = () => {
<div className="mb-4">
<label htmlFor="startDate" className="block text-lg font-medium text-gray-700 mb-2">Wybierz datę początkową:</label>
<input
<DatePicker
type="datetime-local"
id="startDate"
value={startDate}
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"
maxDate="2099-12-31T23:59"
/>
</div>
<div className="mb-6">
<label htmlFor="endDate" className="block text-lg font-medium text-gray-700 mb-2">Wybierz datę końcową:</label>
<input
<DatePicker
type="datetime-local"
id="endDate"
value={endDate}
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"
maxDate="2099-12-31T23:59"
/>
</div>
@ -261,23 +264,25 @@ const PanelAdministratora = () => {
<div className="mb-4">
<label htmlFor="startDate" className="block text-lg font-medium text-gray-700 mb-2">Wybierz datę początkową:</label>
<input
<DatePicker
type="datetime-local"
id="startDate"
value={startDate}
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"
maxDate="2099-12-31T23:59"
/>
</div>
<div className="mb-6">
<label htmlFor="endDate" className="block text-lg font-medium text-gray-700 mb-2">Wybierz datę końcową:</label>
<input
<DatePicker
type="datetime-local"
id="endDate"
value={endDate}
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"
maxDate="2099-12-31T23:59"
/>
</div>

View File

@ -1,6 +1,7 @@
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import {ReactComponent as KoszIcon} from '../icons/delete.svg';
import DatePicker from './DatePicker';
const Raporty = () => {
const [fromDate, setFromDate] = useState('');
@ -131,23 +132,25 @@ const Raporty = () => {
<div className="mb-6 flex items-center space-x-6">
<div className="flex-1">
<label htmlFor="fromDate" className="block text-lg font-medium text-gray-700 mb-2">Od:</label>
<input
<DatePicker
type="datetime-local"
id="fromDate"
value={fromDate}
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"
maxDate="2099-12-31T23:59"
/>
</div>
<div className="flex-1">
<label htmlFor="toDate" className="block text-lg font-medium text-gray-700 mb-2">Do:</label>
<input
<DatePicker
type="datetime-local"
id="toDate"
value={toDate}
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"
maxDate="2099-12-31T23:59"
/>
</div>
</div>

View File

@ -1,6 +1,7 @@
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { ReactComponent as KoszIcon } from '../icons/delete.svg';
import DatePicker from './DatePicker';
const Wydatki = () => {
const [expenses, setExpenses] = useState([]);
@ -114,12 +115,13 @@ const Wydatki = () => {
<div className="flex space-x-6">
<div className="flex-1">
<label htmlFor="expenseDate" className="block text-sm font-medium text-gray-700">Data</label>
<input
<DatePicker
type="datetime-local"
id="expenseDate"
value={newExpense.date}
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"
maxDate="2099-12-31T23:59"
/>
</div>