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

first hacky approach

Browse Source
This commit is contained in:
Thomas Ruoff
2020-06-28 23:10:08 +02:00
parent 2abaefa25d
commit 788ae303e7
3 changed files with 68 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
pages/_app.js
View File

@@ -1,5 +1,9 @@
import 'react-dates/lib/css/_datepicker.css'
import moment from 'moment'
import deLocale from 'moment/locale/de';
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}

31
pages/index.js
View File

@@ -1,16 +1,9 @@
import Head from 'next/head'
import { useState } from 'react'
import moment from 'moment'
import 'react-dates/initialize'
import { DateRangePicker } from 'react-dates'
import Step1 from './step1';
export default function Home() {
const [startDate, setStartDate] = useState(null);
const [endDate, setEndDate] = useState(null);
const [focusedInput, setFocusedInput ] = useState(null);
return (
<div className="container">
<Head>
@@ -25,27 +18,7 @@ export default function Home() {
Du willst das Pfadi Bussle buchen? Hier bist du richtig!
</p>
<section>
<form>
<label>Ich will das Bussle für</label>
<input type="radio" id="single" name="days" value="singleDay"/>
<label for="single">einen Tag</label>
<input type="radio" id="multiple" name="days" value="multipleDays"/>
<label for="multiple">mehrere Tage</label>
<DateRangePicker
startDate={startDate}
startDateId="bussle_start_date_id"
endDate={endDate}
endDateId="bussle_end_date_id"
onDatesChange={({ startDate, endDate }) => setStartDate(startDate) && setEndDate(endDate)}
focusedInput={focusedInput}
onFocusChange={focusedInput => setFocusedInput(focusedInput)}
minDate={moment()}
/>
</form>
</section>
<Step1/>
</main>

62
pages/step1.js Normal file
View File

@@ -0,0 +1,62 @@
import { useState } from 'react'
import moment from 'moment'
import 'react-dates/initialize'
import { DateRangePicker, SingleDatePicker } from 'react-dates'
export default function Home() {
const [multipleDays, setMultipleDays] = useState(null);
const [startDate, setStartDate] = useState(null);
const [endDate, setEndDate] = useState(null);
const [focusedInput, setFocusedInput ] = useState(null);
return (
<form>
<div>
Ich will das Bussle für
<div>
<input type="radio" id="single" name="days" value="singleDay" onChange={() => setMultipleDays(false)} />
<label for="single">einen Tag</label>
</div>
<div>
<input type="radio" id="multiple" name="days" value="multipleDays" onChange={() => setMultipleDays(true)}/>
<label for="multiple">mehrere Tage</label>
</div>
{' '}mieten
</div>
{ multipleDays === false && (
<div>
<SingleDatePicker
date={startDate}
onDateChange={date => setStartDate(date)}
focused={typeof focusedInput === 'boolean' && focusedInput}
onFocusChange={({ focused }) => setFocusedInput(focused)}
id="your_unique_id"
/>
</div>
) }
{ multipleDays === true && (
<div>
<DateRangePicker
startDate={startDate}
startDateId="bussle_start_date_id"
endDate={endDate}
endDateId="bussle_end_date_id"
onDatesChange={({ startDate, endDate }) => {
setStartDate(startDate)
setEndDate(endDate)
}}
focusedInput={focusedInput}
onFocusChange={focusedInput => setFocusedInput(focusedInput)}
minDate={moment()}
/>
</div>
)}
</form>
)
}