Repository: gradio-app/gradio
Pull request: Allow datetime value to be null 
## Description

The clear button wasn't working in datetime because we weren't allowing the value to be null. 

Closes: #9259

## 🎯 PRs Should Target Issues

Before your create a PR, please check to see if there is [an existing issue](https://github.com/gradio-app/gradio/issues) for this change. If not, please create an issue before you create this PR, unless the fix is very small. 

Not adhering to this guideline will result in the PR being closed. 

## Tests

1. PRs will only be merged if tests pass on CI. To run the tests locally, please set up [your Gradio environment locally](https://github.com/gradio-app/gradio/blob/main/CONTRIBUTING.md) and run the tests: `bash scripts/run_all_tests.sh`

2. You may need to run the linters: `bash scripts/format_backend.sh` and `bash scripts/format_frontend.sh`
  


Problem statement:
DateTime component's "Clear" button doesn't work
### Describe the bug

I tried to clear previously picked date by using the left bottom "clear" button and it won't work, i.e., the value is still there.
Clearing input didn't work either.

Please advise.

```


```

### Have you searched existing issues?  🔎

- [X] I have searched and found no existing issues

### Reproduction

```
import gradio as gr

def echo(t):
    return f"date is:{t}"

date = gr.DateTime(include_time=False)
demo = gr.Interface(fn=echo, inputs=[date], outputs="textbox")

if __name__ == "__main__":
    demo.launch()
```


### Screenshot

_No response_

### Logs

_No response_

### System Info

```shell
Gradio Environment Information:
------------------------------
Operating System: Darwin
gradio version: 4.40.0
gradio_client version: 1.2.0

------------------------------------------------
gradio dependencies in your environment:

aiofiles: 23.2.1
anyio: 4.4.0
fastapi: 0.112.0
ffmpy: 0.4.0
gradio-client==1.2.0 is not installed.
httpx: 0.27.0
huggingface-hub: 0.24.5
importlib-resources: 6.4.0
jinja2: 3.1.4
markupsafe: 2.1.5
matplotlib: 3.9.0
numpy: 1.26.4
orjson: 3.10.6
packaging: 24.1
pandas: 2.2.2
pillow: 10.4.0
pydantic: 2.8.2
pydub: 0.25.1
python-multipart: 0.0.9
pyyaml: 6.0.1
ruff: 0.5.6
semantic-version: 2.10.0
tomlkit==0.12.0 is not installed.
typer: 0.12.3
typing-extensions: 4.12.2
urllib3: 2.2.2
uvicorn: 0.30.5
authlib; extra == 'oauth' is not installed.
itsdangerous; extra == 'oauth' is not installed.


gradio_client dependencies in your environment:

fsspec: 2024.6.1
httpx: 0.27.0
huggingface-hub: 0.24.5
packaging: 24.1
typing-extensions: 4.12.2
websockets: 12.0
```


### Severity

I can work around it

Hints from issue discussion:
The same bug is present in Gradio 5.3.0

Commit message: add changeset

Patch to review:
diff --git a/.changeset/empty-humans-invite.md b/.changeset/empty-humans-invite.md
new file mode 100644
index 0000000000..9e2120d839
--- /dev/null
+++ b/.changeset/empty-humans-invite.md
@@ -0,0 +1,6 @@
+---
+"@gradio/datetime": patch
+"gradio": patch
+---
+
+fix:Allow datetime value to be null 
diff --git a/gradio/components/dataframe.py b/gradio/components/dataframe.py
index bca45d4a79..9de6f1f649 100644
--- a/gradio/components/dataframe.py
+++ b/gradio/components/dataframe.py
@@ -54,7 +54,7 @@ class Dataframe(Component):
     Demos: filter_records, matrix_transpose, tax_calculator, sort_records
     """
 
-    EVENTS = [Events.change, Events.input, Events.select]
+    EVENTS = [Events.change, Events.input, Events.select, Events.clear]
 
     data_model = DataframeData
 
diff --git a/js/datetime/Index.svelte b/js/datetime/Index.svelte
index 040ab49e27..f8b3f1cc3d 100644
--- a/js/datetime/Index.svelte
+++ b/js/datetime/Index.svelte
@@ -10,6 +10,7 @@
 	export let gradio: Gradio<{
 		change: undefined;
 		submit: undefined;
+		clear: undefined;
 	}>;
 	export let label = "Time";
 	export let show_label = true;
@@ -54,8 +55,8 @@
 	let datetime: HTMLInputElement;
 	let datevalue = value;
 
-	const date_is_valid_format = (date: string): boolean => {
-		if (date === "") return false;
+	const date_is_valid_format = (date: string | null): boolean => {
+		if (date === null || date === "") return true;
 		const valid_regex = include_time
 			? /^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}$/
 			: /^\d{4}-\d{2}-\d{2}$/;


Code review comments:
diff_hunk: @@ -54,7 +54,7 @@ class Dataframe(Component):
     Demos: filter_records, matrix_transpose, tax_calculator, sort_records
     """
 
-    EVENTS = [Events.change, Events.input, Events.select]
path: gradio/components/dataframe.py
text: @user1:
you meant to do this in datetime not dataframe right

@author:
oop yes i did

diff_hunk: @@ -10,6 +10,7 @@
 	export let gradio: Gradio<{
 		change: undefined;
 		submit: undefined;
+		clear: undefined;
path: js/datetime/Index.svelte
text: @user1:
where do you dispatch this?

@author:
added in latest commit!

@user1:
I don't think it makes sense to add a clear event listener as such. We don't have it in any other "form" type components (textbox, number, dropdown) , they only exist in media type components (image, audio, video) and are meant to signify when an uploaded media type is reset by clicking the X. I'm not sure how you're meant to trigger it in datetime

@user2:
Agreed, I think the original issue was referencing clicking the "clear" button in `gr.Interface`. Since there's no dedicated clear button in `gr.Datetime`, we don't need an event for it

@author:
oh makes sense

@author:
oki removed that logic, thanks both!