You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
svelte/site/content/examples/19-7guis/03-7guis-flight-booker/App.svelte

60 lines
1.3 KiB

<script>
const tomorrow = new Date(Date.now() + 86400000);
let start = [
tomorrow.getFullYear(),
pad(tomorrow.getMonth() + 1, 2),
pad(tomorrow.getDate(), 2)
].join('-');
let end = start;
let isReturn = false;
$: startDate = convertToDate(start);
$: endDate = convertToDate(end);
function bookFlight() {
const type = isReturn ? 'return' : 'one-way';
let message = `You have booked a ${type} flight, leaving ${startDate.toDateString()}`;
if (type === 'return') {
message += ` and returning ${endDate.toDateString()}`;
}
alert(message);
}
function convertToDate(str) {
const split = str.split('-');
return new Date(+split[0], +split[1] - 1, +split[2]);
}
function pad(x, len) {
x = String(x);
while (x.length < len) x = `0${x}`;
return x;
}
</script>
<style>
select, input, button {
display: block;
margin: 0.5em 0;
font-size: inherit;
}
</style>
<!-- https://github.com/eugenkiss/7guis/wiki#flight-booker -->
<select bind:value={isReturn}>
<option value={false}>one-way flight</option>
<option value={true}>return flight</option>
</select>
<input type=date bind:value={start}>
<input type=date bind:value={end} disabled={!isReturn}>
<button
on:click={bookFlight}
disabled="{isReturn && (startDate >= endDate)}"
>book</button>