add gr.datetime a param 'interactive:bool'

gradio/components/datetime.py

@@ -38,6 +38,7 @@ def __init__(
         scale: int | None = None,
         min_width: int = 160,
         visible: bool = True,
+        interactive: bool = True,
         elem_id: str | None = None,
         elem_classes: list[str] | str | None = None,
         render: bool = True,
@@ -76,6 +77,7 @@ def __init__(
         )
         self.type = type
         self.include_time = include_time
+        self.interactive = interactive
         self.time_format = "%Y-%m-%d %H:%M:%S" if include_time else "%Y-%m-%d"
         self.timezone = timezone
 

js/datetime/Index.svelte

@@ -14,6 +14,7 @@
 	export let label = "Time";
 	export let show_label = true;
 	export let info: string | undefined = undefined;
+	export let interactivate = true;
 	export let elem_id = "";
 	export let elem_classes: string[] = [];
 	export let visible = true;
@@ -68,6 +69,7 @@
 	$: valid = date_is_valid_format(entered_value);
 
 	const submit_values = (): void => {
+		if (!interactivate) return;
 		if (entered_value === value) return;
 		if (!date_is_valid_format(entered_value)) return;
 		old_value = value = entered_value;
@@ -87,18 +89,21 @@
 	<div class="label-content">
 		<BlockTitle {root} {show_label} {info}>{label}</BlockTitle>
 	</div>
-	<div class="timebox">
+	<div class="timebox" aria-disabled={!interactivate}>
 		<input
 			class="time"
 			bind:value={entered_value}
 			class:invalid={!valid}
 			on:keydown={(evt) => {
+				if (!interactivate) return;
 				if (evt.key === "Enter") {
 					submit_values();
 					gradio.dispatch("submit");
 				}
 			}}
-			on:blur={submit_values}
+			on:blur={() => {
+				if (interactivate) submit_values();
+			}}
 		/>
 		{#if include_time}
 			<input
@@ -108,6 +113,7 @@
 				bind:this={datetime}
 				bind:value={datevalue}
 				on:input={() => {
+					if (!interactivate) return;
 					const date = new Date(datevalue);
 					entered_value = format_date(date);
 					submit_values();
@@ -121,6 +127,7 @@
 				bind:this={datetime}
 				bind:value={datevalue}
 				on:input={() => {
+					if (!interactivate) return;
 					const date = new Date(datevalue + "T00:00:00");
 					entered_value = format_date(date);
 					submit_values();
@@ -131,6 +138,7 @@
 		<button
 			class="calendar"
 			on:click={() => {
+				if (!interactivate) return;
 				datetime.showPicker();
 			}}><Calendar></Calendar></button
 		>
@@ -182,6 +190,9 @@
 	.time.invalid {
 		color: var(--body-text-color-subdued);
 	}
+	.timebox[aria-disabled] {
+		pointer-events: none;  
+	}
 	.calendar {
 		display: inline-flex;
 		justify-content: center;