diff --git a/demo/partials/forms.html b/demo/partials/forms.html
index 72361b9..6a3723e 100644
--- a/demo/partials/forms.html
+++ b/demo/partials/forms.html
@@ -77,6 +77,45 @@
 		</div>
 	</div>
 
+	<div class="block">
+		<fieldset class="fieldset">
+			<legend class="legend">Date & Time</legend>
+			<div class="form-grid">
+				<div class="form-group">
+					<label class="label">
+						Date
+						<i class="ph ph-calendar-blank"></i>
+						<input type="date" class="input input-date" value="2026-04-23" data-date-picker>
+					</label>
+				</div>
+
+				<div class="form-group">
+					<label class="label">
+						Time
+						<i class="ph ph-clock"></i>
+						<input type="time" class="input input-time" value="14:30" data-date-picker>
+					</label>
+				</div>
+
+				<div class="form-group">
+					<label class="label">
+						Date & time
+						<i class="ph ph-calendar-dots"></i>
+						<input type="datetime-local" class="input input-datetime" value="2026-04-23T14:30" data-date-picker>
+					</label>
+				</div>
+
+				<div class="form-group">
+					<label class="label">
+						Month
+						<i class="ph ph-calendar"></i>
+						<input type="month" class="input input-month" value="2026-04" data-date-picker>
+					</label>
+				</div>
+			</div>
+		</fieldset>
+	</div>
+
 	<div class="block form-group">
 		<label class="label">
 			Text Area
@@ -289,6 +328,27 @@
   &lt;input type="file"&gt;
 &lt;/label&gt;
 
+&lt;fieldset class="fieldset"&gt;
+  &lt;legend class="legend"&gt;Date &amp; Time&lt;/legend&gt;
+  &lt;div class="form-grid"&gt;
+    &lt;label class="label"&gt;
+      Date
+      &lt;i class="ph ph-calendar-blank"&gt;&lt;/i&gt;
+      &lt;input class="input input-date" type="date" value="2026-04-23" data-date-picker&gt;
+    &lt;/label&gt;
+    &lt;label class="label"&gt;
+      Time
+      &lt;i class="ph ph-clock"&gt;&lt;/i&gt;
+      &lt;input class="input input-time" type="time" value="14:30" data-date-picker&gt;
+    &lt;/label&gt;
+    &lt;label class="label"&gt;
+      Date &amp; time
+      &lt;i class="ph ph-calendar-dots"&gt;&lt;/i&gt;
+      &lt;input class="input input-datetime" type="datetime-local" value="2026-04-23T14:30" data-date-picker&gt;
+    &lt;/label&gt;
+  &lt;/div&gt;
+&lt;/fieldset&gt;
+
 &lt;div class="file-upload-panel"&gt;
   &lt;form class="file-upload-form" enctype="multipart/form-data"&gt;
     &lt;div class="file-upload-header"&gt;
diff --git a/src/js/components/input-patterns.js b/src/js/components/input-patterns.js
index 728eb76..2021a5b 100644
--- a/src/js/components/input-patterns.js
+++ b/src/js/components/input-patterns.js
@@ -200,6 +200,24 @@
 		input.dispatchEvent(new Event("change", { bubbles: true }));
 	});
 
+	root.addEventListener("click", event => {
+		const input = event.target.closest("[data-date-picker]");
+
+		if(!input) {
+			return;
+		}
+
+		input.focus();
+
+		if(typeof input.showPicker === "function") {
+			try {
+				input.showPicker();
+			} catch(error) {
+				// Some browsers restrict showPicker() to direct user gestures or supported input types.
+			}
+		}
+	});
+
 	root.addEventListener("change", event => {
 		const input = event.target.closest("[data-file-upload-input]");
 
diff --git a/src/scss/components/_forms.scss b/src/scss/components/_forms.scss
index b9594af..c836a13 100644
--- a/src/scss/components/_forms.scss
+++ b/src/scss/components/_forms.scss
@@ -82,6 +82,44 @@
 				display: none;
 				-webkit-appearance: none;
 			}
+
+			&[type="date"],
+			&[type="time"],
+			&[type="datetime-local"],
+			&[type="month"] {
+				color-scheme: dark;
+				cursor: pointer;
+				min-width: 0;
+				padding-right: $control-height-md;
+				text-transform: uppercase;
+			}
+
+			&[type="date"]::-webkit-calendar-picker-indicator,
+			&[type="time"]::-webkit-calendar-picker-indicator,
+			&[type="datetime-local"]::-webkit-calendar-picker-indicator,
+			&[type="month"]::-webkit-calendar-picker-indicator {
+				width: $control-height-md;
+				height: 100%;
+				margin: 0;
+				padding: 0;
+				background: transparent;
+				cursor: pointer;
+				opacity: 0;
+			}
+
+			&[type="date"]::-webkit-datetime-edit,
+			&[type="time"]::-webkit-datetime-edit,
+			&[type="datetime-local"]::-webkit-datetime-edit,
+			&[type="month"]::-webkit-datetime-edit {
+				padding: 0;
+			}
+
+			&[type="date"]::-webkit-datetime-edit-fields-wrapper,
+			&[type="time"]::-webkit-datetime-edit-fields-wrapper,
+			&[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper,
+			&[type="month"]::-webkit-datetime-edit-fields-wrapper {
+				color: $color-text-light;
+			}
 		}
 
 		textarea.input {