tomru/pfadi-bussle
1
0
Fork 0
mirror of https://github.com/tomru/pfadi-bussle.git synced 2026-03-03 06:27:11 +01:00
Code Issues Packages Projects Releases Wiki Activity

remove multipleDays choice

Browse Source
This commit is contained in:
Thomas Ruoff
2020-08-11 22:51:51 +02:00
parent 99b02e32bf
commit e5bbde90b4
2 changed files with 45 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

136
components/dateSelect.js
View File

@@ -55,7 +55,6 @@ export default function DateSelect() {
toRef.current?.getInput().focus()
}, [range.from])
const { multipleDays } = state.formData
const { from, to } = range
const disabledDays = [dayDisabled]
const modifiers = {
@@ -74,100 +73,55 @@ export default function DateSelect() {
}
return (
<>
<Form.Group controlId="dateSelect">
<Form.Label>
Willst du einen odere mehrere Tage buchen? <Required />
</Form.Label>
<Form.Check
type="radio"
id={'multipleDays-single'}
label="Einen Tag"
name="multipleDays"
value="single"
checked={multipleDays === false}
onChange={() => {
//setFocusedInput(null)
onChange({
multipleDays: false,
startDate: null,
endDate: null,
})
<Form.Group>
<Form.Label component="legend" style={{ display: 'block' }}>
Datum <Required />
</Form.Label>
<Form.Group>
<DayPickerInput
ref={fromRef}
component={Form.Control}
value={from}
placeholder="Von"
formatDate={dateFormat}
parseDate={parseDate}
dayPickerProps={{
className: 'Selectable',
selectedDays: [from, { from, to }],
disabledDays,
modifiers,
numberOfMonths: 1,
}}
onDayChange={(from) => setRange({ ...range, from })}
/>
<Form.Check
type="radio"
id={'multipleDays-multiple'}
label="Mehrere Tage"
name="multipleDays"
value="multiple"
checked={multipleDays === true}
onChange={() => {
//setFocusedInput(null)
onChange({
multipleDays: true,
startDate: null,
endDate: null,
})
<Form.Label className="px-2">bis</Form.Label>
<DayPickerInput
ref={toRef}
component={Form.Control}
inputProps={{ disabled: !from }}
value={to}
placeholder="Bis"
formatDate={dateFormat}
parseDate={parseDate}
dayPickerProps={{
className: 'Selectable',
selectedDays: [from, { from, to }],
disabledDays,
modifiers,
numberOfMonths: 1,
month: from,
fromMonth: from,
}}
onDayChange={(to) => setRange({ ...range, to })}
/>
<Button
className="ml-2"
variant="outline-secondary"
onClick={() => setRange({})}
>
Zurücksetzen
</Button>
</Form.Group>
{multipleDays !== null && (
<Form.Group>
<Form.Label component="legend" style={{ display: 'block' }}>
Datum <Required />
</Form.Label>
{
<>
<Form.Group>
<DayPickerInput
ref={fromRef}
component={Form.Control}
value={from}
placeholder="Von"
formatDate={dateFormat}
parseDate={parseDate}
dayPickerProps={{
className: 'Selectable',
selectedDays: [from, { from, to }],
disabledDays,
modifiers,
numberOfMonths: 1,
}}
onDayChange={(from) => setRange({ ...range, from })}
/>
<Form.Label className="px-2">bis</Form.Label>
<DayPickerInput
ref={toRef}
component={Form.Control}
inputProps={{ disabled: !range.from }}
value={to}
placeholder="Bis"
formatDate={dateFormat}
parseDate={parseDate}
dayPickerProps={{
className: 'Selectable',
selectedDays: [from, { from, to }],
disabledDays,
modifiers,
numberOfMonths: 1,
month: from,
fromMonth: from,
}}
onDayChange={(to) => setRange({ ...range, to })}
/>
<Button
className="ml-2"
variant="outline-secondary"
onClick={() => setRange({})}
>
Zurücksetzen
</Button>
</Form.Group>
</>
}
</Form.Group>
)}
</>
</Form.Group>
)
}