MyFit/users-myfit
2
0
Fork 0
Code Issues Pull Requests Releases Activity

added datepicker

Browse Source
This commit is contained in:
Chukwumdiebube
2023-02-11 17:46:48 +01:00
parent 90277ec045
commit ac505a3211
3 changed files with 66 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Helpers/Inputs/InputCom/index.jsx
+2 -2
View File
@@ -21,12 +21,12 @@ export default function InputCom({
{label}
</label>
)}
<div className="input-wrapper border border-light-purple dark:border-[#5356fb29] dark:border-[#5356fb29] w-full rounded-[50px] h-[58px] overflow-hidden relative ">
<div className="input-wrapper border border-light-purple dark:border-[#5356fb29] w-full rounded-[50px] h-[58px] overflow-hidden relative ">
<input
placeholder={placeholder}
value={value}
onChange={inputHandler}
className="input-field placeholder:text-base text-bese px-6 text-dark-gray dark:text-white w-full h-full bg-[#FAFAFA] dark:bg-[#11131F] focus:ring-0 focus:outline-none"
className="input-field placeholder:text-base text-base px-6 text-dark-gray dark:text-white w-full h-full bg-[#FAFAFA] dark:bg-[#11131F] focus:ring-0 focus:outline-none"
type={type}
id={name}
name={name}
src/components/Reminders/AddEditReminder.jsx
+39 -21
View File
@@ -1,12 +1,13 @@
import React, {useState, useEffect} from 'react'
import DatePicker from 'react-date-picker';
import Layout from '../Partials/Layout'
import { Link, useNavigate, useLocation, useParams } from 'react-router-dom'
// import { toast } from 'react-toastify';
import InputCom from "../Helpers/Inputs/InputCom";
import Calendar from 'react-calendar';
import 'react-calendar/dist/Calendar.css';
// import Calendar from 'react-calendar';
// import 'react-calendar/dist/Calendar.css';
import usersService from "../../services/UsersService";
@@ -17,7 +18,7 @@ export default function AddEditReminder({ className }) {
let {reminder_uuid} = useParams() // uuid of single reminder
let location = useLocation()
const [startDate, setStartDate] = useState(new Date());
const [endDate, setEndDate] = useState(new Date());
@@ -36,9 +37,7 @@ export default function AddEditReminder({ className }) {
description: location.state?.reminder.description || '',
notes: location.state?.reminder.notes || '',
category: location.state?.reminder.code || '',
mode: location.state?.reminder.code || '',
'start_date': location.state? new Date(location.state?.reminder.start_date) : startDate,
'end_date': location.state? new Date(location.state?.reminder.end_date) : endDate
mode: location.state?.reminder.code || ''
})
const onReminderInputChange = ({target:{name,value}}) => { //function to run when user changes any input on the add reminder page
@@ -67,12 +66,15 @@ export default function AddEditReminder({ className }) {
const handleAddReminder = async () => { // function to add reminder, after all test cases are met
// toast('Reminder Added')
let infoDetail = reminder
infoDetail.start_date = startDate
infoDetail.end_date = endDate
if(location.state){
reminder.uuid = reminder_uuid
infoDetail.uuid = reminder_uuid
}
setSuccess(true)
setMessage({status: true, message: ''})
let {description, notes, category, mode} = reminder
let {description, notes, category, mode} = infoDetail
//CHECKING IF AN EMPTY FIELD WAS PASSED
if(!description || !notes || !category || !mode){
setSuccess(false)
@@ -81,7 +83,7 @@ export default function AddEditReminder({ className }) {
}
try {
const res = await api.addReminder(reminder);
const res = await api.addReminder(infoDetail);
if(res && res.status == 200){
setSuccess(false)
setMessage({status: true, message: 'Reminder set successfully'})
@@ -140,7 +142,7 @@ export default function AddEditReminder({ className }) {
value={''}
/> */}
<label className="input-label text-dark-gray dark:text-white text-xl font-bold block mb-2.5">Reminder Type</label>
<select value={reminder.category} name='category' className='bg-slate-50 rounded-full pl-4 dark:bg-dark-white text-gray-700 w-full py-5 cursor-pointer focus:outline-none focus:border-none' onChange={onReminderInputChange}>
<select value={reminder.category} name='category' className='bg-[#fafafa] border-light-purple rounded-full pl-4 dark:bg-dark-white text-gray-700 w-full py-5 cursor-pointer focus:outline-none focus:ring-0' onChange={onReminderInputChange}>
<option className='' value="">Select category</option>
{category.length > 0 &&
<>
@@ -161,7 +163,7 @@ export default function AddEditReminder({ className }) {
value={''}
/> */}
<label className="input-label text-dark-gray dark:text-white text-xl font-bold block mb-2.5">Mode</label>
<select value={reminder.mode} name='mode' className='bg-slate-50 rounded-full pl-4 dark:bg-dark-white text-gray-700 w-full py-5 cursor-pointer focus:outline-none focus:border-none' onChange={onReminderInputChange}>
<select value={reminder.mode} name='mode' className='bg-[#fafafa] rounded-full pl-4 dark:bg-dark-white text-gray-700 w-full py-5 cursor-pointer focus:outline-none focus:ring-0' onChange={onReminderInputChange}>
<option className='' value="">Select mode</option>
{category.length > 0 &&
<>
@@ -185,18 +187,33 @@ export default function AddEditReminder({ className }) {
value={''}
/> */}
<label className="input-label text-dark-gray dark:text-white text-xl font-bold block mb-2.5">Start Date</label>
<Calendar onChange={setStartDate} value={reminder.start_date} calendarType="US" />
{/* <Calendar onChange={setStartDate} value={reminder.start_date} calendarType="US" /> */}
<DatePicker
minDate={new Date()}
minDetail="decade"
format="y-MM-dd"
monthPlaceholder="mm"
yearPlaceholder="yyyy"
dayPlaceholder="dd"
range="range"
clearIcon={startDate ? null : 'x'}
value={startDate}
onChange={(date) => setStartDate(date)}
/>
</div>
<div className="field w-full">
{/* <InputCom
label="End Date"
type="text"
name="endDate"
placeholder="10-20-2034"
value={''}
/> */}
<label className="input-label text-dark-gray dark:text-white text-xl font-bold block mb-2.5">End Date</label>
<Calendar onChange={setEndDate} value={reminder.end_date} calendarType="US" />
<DatePicker
minDate={startDate}
minDetail="decade"
format="y-MM-dd"
monthPlaceholder="mm"
yearPlaceholder="yyyy"
dayPlaceholder="dd"
range="range"
value={endDate}
onChange={(date) => setEndDate(date)}
/>
</div>
</div>
@@ -208,7 +225,7 @@ export default function AddEditReminder({ className }) {
<textarea
name='notes'
value={reminder.notes}
placeholder="provide a detailed description of your item."
placeholder="Provide a detailed description of your item."
rows="7"
className="w-full h-full px-7 py-4 border border-light-purple dark:border-[#5356fb29] rounded-[20px] text-dark-gray dark:text-white bg-[#FAFAFA] dark:bg-[#11131F] focus:ring-0 focus:outline-none"
onChange={onReminderInputChange}
@@ -225,6 +242,7 @@ export default function AddEditReminder({ className }) {
<button
type="button"
className="text-18 text-light-red tracking-wide "
onClick={() => navigate('/reminders')}
>
<span className="border-b dark:border-[#5356fb29] border-light-red">
{" "}
src/index.css
+25
View File
@@ -736,4 +736,29 @@ TODO: Responsive ===========================
background: none\9;
padding: 5px\9;
}
}
/* Date Picker */
.react-date-picker__wrapper{
border: 0;
box-shadow: 0 0 0.5em 0 rgb(194 194 194 / 20%);
padding: 1.25rem;
background: #fafafa;
border-radius: 9999px;
}
.dark .react-date-picker__wrapper{
background: #1a3544;
}
.react-date-picker__calendar .react-calendar{
min-height: 18.4rem;
}
.react-date-picker__calendar .react-calendar__tile{
height: 40px !important;
}
.react-date-picker__inputGroup__input{
cursor: pointer;
}