Files
immich/web/src/lib/components/shared-components/search-bar/search-date-section.svelte
2025-09-16 18:31:22 +00:00

45 lines
1.1 KiB
Svelte

<script lang="ts" module>
export interface SearchDateFilter {
takenBefore?: string;
takenAfter?: string;
}
</script>
<script lang="ts">
import DateInput from '$lib/elements/DateInput.svelte';
import { t } from 'svelte-i18n';
interface Props {
filters: SearchDateFilter;
}
let { filters = $bindable() }: Props = $props();
</script>
<div id="date-range-selection" class="grid grid-auto-fit-40 gap-5">
<label class="immich-form-label" for="start-date">
<span class="uppercase">{$t('start_date')}</span>
<DateInput
class="immich-form-input w-full mt-1 hover:cursor-pointer"
type="date"
id="start-date"
name="start-date"
max={filters.takenBefore}
bind:value={filters.takenAfter}
/>
</label>
<label class="immich-form-label" for="end-date">
<span class="uppercase">{$t('end_date')}</span>
<DateInput
class="immich-form-input w-full mt-1 hover:cursor-pointer"
type="date"
id="end-date"
name="end-date"
placeholder=""
min={filters.takenAfter}
bind:value={filters.takenBefore}
/>
</label>
</div>