86 lines
1.7 KiB
Svelte
86 lines
1.7 KiB
Svelte
<script>
|
|
import { dateFormat, timeFormat } from '$lib/stores.svelte';
|
|
import { getReadableDate, getReadableTime } from '$lib/utils.svelte';
|
|
|
|
let previewDate = $state(getReadableDate(new Date()));
|
|
let previewTime = $state(getReadableTime(new Date()));
|
|
|
|
dateFormat.subscribe((v) => {
|
|
if (v === '') {
|
|
$dateFormat = 'y-m-d';
|
|
return;
|
|
}
|
|
previewDate = getReadableDate(new Date());
|
|
});
|
|
|
|
timeFormat.subscribe((v) => {
|
|
if (v === '') {
|
|
$timeFormat = 'h:m:s';
|
|
return;
|
|
}
|
|
previewTime = getReadableTime(new Date());
|
|
});
|
|
</script>
|
|
|
|
<div class="format-container">
|
|
<div class="format-group">
|
|
<label>Date Format</label>
|
|
Available format letters:
|
|
<ul>
|
|
<li><b>y</b>: year (2024)</li>
|
|
<li><b>m</b>: month (01-12)</li>
|
|
<li><b>d</b>: day (01-31)</li>
|
|
</ul>
|
|
<input
|
|
bind:value={$dateFormat}
|
|
placeholder="y-m-d"
|
|
type="text"
|
|
/>
|
|
<div class="preview">Preview: {previewDate}</div>
|
|
</div>
|
|
|
|
<div class="format-group">
|
|
<label>Time Format</label>
|
|
Available format letters:
|
|
<ul>
|
|
<li><b>h</b>: hour (00-23 or 01-12 if 'a' is used)</li>
|
|
<li><b>m</b>: minute (00-59)</li>
|
|
<li><b>s</b>: second (00-59)</li>
|
|
<li><b>a</b>: adds AM/PM and switches to 12h format</li>
|
|
</ul>
|
|
<input
|
|
bind:value={$timeFormat}
|
|
placeholder="h:m:s"
|
|
type="text"
|
|
/>
|
|
<div class="preview">Preview: {previewTime}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
li {
|
|
list-style: none;
|
|
}
|
|
|
|
.format-container {
|
|
display: flex;
|
|
gap: 2rem;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.format-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
flex: 1;
|
|
}
|
|
|
|
label {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.preview {
|
|
font-size: 0.9rem;
|
|
font-style: italic;
|
|
}
|
|
</style>
|