teach/atsebay.t
Archived
1
0
Fork 0
Code Issues Pull requests Releases Activity

Use datetime field to edit start/end time

Browse source
This commit is contained in:
nemunaire 2022-09-16 10:56:55 +02:00
parent 3bb6f0374c
commit 85d9f1e280
5 changed files with 39 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

21
ui/src/components/DateTimeInput.svelte Normal file
View file

@ -0,0 +1,21 @@
<script>
import dayjs from 'dayjs';
export let format = 'YYYY-MM-DD HH:mm';
export let date = new Date();
let className = '';
export { className as class };
export let id = null;
let internal;
const input = (x) => (internal = dayjs(x).format(format));
const output = (x) => (date = dayjs(x, format).toDate().toISOString());
$: input(date)
$: output(internal)
</script>
<input type="datetime-local" class={className} id={id} bind:value={internal}>

5
ui/src/components/SurveyAdmin.svelte
View file

@ -3,6 +3,7 @@
import { goto } from '$app/navigation';
import { getQuestions } from '../lib/questions';
import DateTimeInput from './DateTimeInput.svelte';
import { ToastsStore } from '../stores/toasts';
const dispatch = createEventDispatcher();
@ -108,7 +109,7 @@
<label for="start_availability" class="col-form-label col-form-label-sm">Date de début</label>
</div>
<div class="col-sm-8">
<input type="text" class="form-control form-control-sm" id="start_availability" bind:value={survey.start_availability}>
<DateTimeInput class="form-control form-control-sm" id="start_availability" bind:date={survey.start_availability} />
</div>
</div>
@ -117,7 +118,7 @@
<label for="end_availability" class="col-form-label col-form-label-sm">Date de fin</label>
</div>
<div class="col-8">
<input type="text" class="form-control form-control-sm" id="end_availability" bind:value={survey.end_availability}>
<DateTimeInput class="form-control form-control-sm" id="end_availability" bind:date={survey.end_availability} />
</div>
</div>

5
ui/src/components/WorkAdmin.svelte
View file

@ -2,6 +2,7 @@
import { createEventDispatcher } from 'svelte';
import { goto } from '$app/navigation';
import DateTimeInput from './DateTimeInput.svelte';
import { ToastsStore } from '../stores/toasts';
const dispatch = createEventDispatcher();
@ -102,7 +103,7 @@
<label for="start_availability" class="col-form-label col-form-label-sm">Date de début</label>
</div>
<div class="col-sm-8">
<input type="text" class="form-control form-control-sm" id="start_availability" bind:value={work.start_availability}>
<DateTimeInput class="form-control form-control-sm" id="start_availability" bind:date={work.start_availability} />
</div>
</div>
@ -111,7 +112,7 @@
<label for="end_availability" class="col-form-label col-form-label-sm">Date de fin</label>
</div>
<div class="col-8">
<input type="text" class="form-control form-control-sm" id="end_availability" bind:value={work.end_availability}>
<DateTimeInput class="form-control form-control-sm" id="end_availability" bind:date={work.end_availability} />
</div>
</div>