Add a `Time` selection component

[iulkm]

I would like to ask if there is a convenient way to implement a time selection function that can be input and output like a Textbox

[abidlabs]

Related: #2029

[iulkm]

import gradio as gr

with gr.Blocks() as app:
    h = gr.HTML("""<input type="datetime-local" id="datetime" name="datetime">""")
    b = gr.Button()
    x = gr.Textbox()
    b.click(None, None, x, _js='(x) => {return (document.getElementById("datetime")).value;}')
    t = gr.Textbox()
app.queue(concurrency_count=5)
app.launch()

I have found that HTML components and JS can be relatively simple to solve this problem.

[imflash217]

import gradio as gr

with gr.Blocks() as app:
    h = gr.HTML("""<input type="datetime-local" id="datetime" name="datetime">""")
    b = gr.Button()
    x = gr.Textbox()
    b.click(None, None, x, _js='(x) => {return (document.getElementById("datetime")).value;}')
    t = gr.Textbox()
app.queue(concurrency_count=5)
app.launch()

I have found that HTML components and JS can be relatively simple to solve this problem.

Thanks so much @iulkm. Very Helpful.

[abidlabs]

Hey! We've now made it possible for Gradio users to create their own custom components -- meaning that you can write some Python and JavaScript (Svelte), and publish it as a Gradio component. You can use it in your own Gradio apps, or share it so that anyone can use it in their Gradio apps. Here are some examples of custom Gradio components:

• A "Rich Textbox" that allows you to write bold/italics/colored text
• A "Folium Map Viewer" component that allows you to use interactive maps

You can see the source code for those components by clicking the "Files" icon and then clicking "src". The complete source code for the backend and frontend is visible. In particular, its very fast if you want to build off an existing component. We've put together a Guide: https://www.gradio.app/guides/five-minute-guide, and we're happy to help. Hopefully this will help address this issue.

[abidlabs]

I'll go ahead and close this issue since we are not planning to include this in the core Gradio library. But happy to help if you are interested in making this a custom Gradio component (feel free to ask questions in this issue).