Added date of birth filter.

assets/components/actors/actors.vue

@@ -81,6 +81,31 @@
 								<template v-slot:start><Icon icon="flower" /></template>
 								<template v-slot:end><Icon icon="pipe" /></template>
 							</RangeFilter>
+
+							<div class="filter-section">
+								<label class="filter-label">
+									<span class="label">
+										<Checkbox
+											:checked="dobRequired"
+											class="checkbox"
+											@change="(checked) => updateValue('dobRequired', checked, true)"
+										/>Date of birth
+									</span>
+								</label>
+
+								<div
+									class="input-container"
+									@click="() => updateValue('dobRequired', true, true)"
+								>
+									<input
+										v-model="dob"
+										:disabled="!dobRequired"
+										type="date"
+										class="input"
+										@change="updateFilters"
+									>
+								</div>
+							</div>
 						</template>
 					</Tooltip>
 				</li>
@@ -202,8 +227,11 @@
 </template>
 
 <script>
+import dayjs from 'dayjs';
+
 import Actor from './tile.vue';
 import Gender from './gender.vue';
+import Checkbox from '../form/checkbox.vue';
 import RangeFilter from './filter-range.vue';
 import Pagination from '../pagination/pagination.vue';
 
@@ -220,6 +248,7 @@ function updateFilters() {
 			h: this.heightRequired ? this.height.join(',') : undefined,
 			w: this.weightRequired ? this.weight.join(',') : undefined,
 			age: this.ageRequired ? this.age.join(',') : undefined,
+			dob: this.dobRequired ? this.dob : undefined,
 		},
 	});
 }
@@ -241,6 +270,7 @@ async function fetchActors(scroll) {
 		letter: this.letter.replace('all', ''),
 		gender: curatedGender === 'other' ? null : curatedGender,
 		age: this.ageRequired && this.age,
+		dob: this.dobRequired && this.dob,
 		boobSize: this.boobSizeRequired && this.boobSize,
 		naturalBoobs: toggleValues[this.naturalBoobs] ?? null,
 		height: this.heightRequired && this.height,
@@ -280,6 +310,7 @@ async function mounted() {
 export default {
 	components: {
 		Actor,
+		Checkbox,
 		Gender,
 		RangeFilter,
 		Pagination,
@@ -293,6 +324,8 @@ export default {
 			letters: ['all'].concat(Array.from({ length: 26 }, (value, index) => String.fromCharCode(index + 97).toUpperCase())),
 			age: this.$route.query.age?.split(',') || [18, 100],
 			ageRequired: !!this.$route.query.age,
+			dob: this.$route.query.dob || dayjs().subtract(21, 'years').format('YYYY-MM-DD'),
+			dobRequired: !!this.$route.query.dob,
 			boobSizes,
 			boobSize: this.$route.query.bs?.split(',') || ['A', 'Z'],
 			boobSizeRequired: !!this.$route.query.bs,
@@ -480,6 +513,10 @@ export default {
 	font-weight: bold;
 	font-size: .9rem;
 
+	.checkbox {
+		margin: 0 .75rem 0 0;
+	}
+
 	.label {
 		display: inline-flex;
 		align-items: center;
@@ -487,6 +524,15 @@ export default {
 	}
 }
 
+.input-container {
+	box-sizing: border-box;
+	padding: 0 .5rem .5rem .5rem;
+
+	.input {
+		width: 100%;
+	}
+}
+
 .toggle-container,
 .range-container {
 	display: flex;

assets/css/_inputs.scss

@@ -1,3 +1,16 @@
+.input {
+	box-sizing: border-box;
+	padding: .5rem;
+	border: solid 1px var(--shadow-weak);
+	color: var(--shadow-strong);
+	background: var(--background);
+	font-size: 1rem;
+
+	&::-webkit-calendar-picker-indicator {
+		opacity: .5;
+	}
+}
+
 .select {
     color: var(--shadow-strong);
     background: var(--background);

assets/js/actors/actions.js

@@ -269,6 +269,7 @@ function initActorActions(store, router) {
 		letter,
 		gender,
 		age,
+		dob,
 		naturalBoobs,
 		boobSize,
 		height,
@@ -300,6 +301,8 @@ function initActorActions(store, router) {
 			]
 		` : '';
 
+		const dobFilter = dob ? `dateOfBirth: { equalTo: "${dob}" }` : '';
+
 		const heightFilter = height ? `height: { greaterThanOrEqualTo: ${height[0]}, lessThanOrEqualTo: ${height[1]} }` : '';
 		const weightFilter = weight ? `weight: { greaterThanOrEqualTo: ${weight[0]}, lessThanOrEqualTo: ${weight[1]} }` : '';
 		const cupFilter = boobSize ? `cup: { greaterThanOrEqualTo: "${boobSize[0]}", lessThanOrEqualTo: "${boobSize[1]}" }` : '';
@@ -324,6 +327,7 @@ function initActorActions(store, router) {
                         }
 						${genderFilter}
 						${ageFilter}
+						${dobFilter}
 						${heightFilter}
 						${weightFilter}
 						${cupFilter}