Add gr.datetime a param interactive:bool (#10013)

* add gr.datetime a param 'interactive:bool'

* update html with `container`

* repair

* add changeset

* changes

* changes

---------

Co-authored-by: Abubakar Abid <abubakar@huggingface.co>
Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
Co-authored-by: Ali Abid <aliabid94@gmail.com>

.changeset/curvy-masks-lose.md

@@ -0,0 +1,6 @@
+---
+"@gradio/datetime": minor
+"gradio": minor
+---
+
+feat:Add `gr.datetime` a param `interactive:bool`

gradio/components/datetime.py

@@ -38,6 +38,7 @@ class DateTime(FormComponent):
         scale: int | None = None,
         min_width: int = 160,
         visible: bool = True,
+        interactive: bool | None = None,
         elem_id: str | None = None,
         elem_classes: list[str] | str | None = None,
         render: bool = True,
@@ -76,6 +77,7 @@ class DateTime(FormComponent):
         )
         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,8 @@
 	export let label = "Time";
 	export let show_label = true;
 	export let info: string | undefined = undefined;
+	export let interactive: boolean;
+	$: disabled = !interactive;
 	export let elem_id = "";
 	export let elem_classes: string[] = [];
 	export let visible = true;
@@ -99,6 +101,7 @@
 				}
 			}}
 			on:blur={submit_values}
+			{disabled}
 		/>
 		{#if include_time}
 			<input
@@ -112,6 +115,7 @@
 					entered_value = format_date(date);
 					submit_values();
 				}}
+				{disabled}
 			/>
 		{:else}
 			<input
@@ -125,15 +129,19 @@
 					entered_value = format_date(date);
 					submit_values();
 				}}
+				{disabled}
 			/>
 		{/if}
 
-		<button
-			class="calendar"
-			on:click={() => {
-				datetime.showPicker();
-			}}><Calendar></Calendar></button
-		>
+		{#if interactive}
+			<button
+				class="calendar"
+				{disabled}
+				on:click={() => {
+					datetime.showPicker();
+				}}><Calendar></Calendar></button
+			>
+		{/if}
 	</div>
 </Block>
 
@@ -179,6 +187,11 @@
 		border-bottom-left-radius: var(--input-radius);
 		box-shadow: var(--input-shadow);
 	}
+	.time:disabled {
+		border-right: var(--input-border-width) solid var(--input-border-color);
+		border-top-right-radius: var(--input-radius);
+		border-bottom-right-radius: var(--input-radius);
+	}
 	.time.invalid {
 		color: var(--body-text-color-subdued);
 	}