tomru/pfadi-bussle
1
0
Fork 0
mirror of https://github.com/tomru/pfadi-bussle.git synced 2026-03-04 15:07:13 +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

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>