Formatting date_input input fields

[DylanBrianBenton]

First Check

• I added a very descriptive title here.
• I have checked the FAQs for a similar question and didn't find it.
• I used the GitHub search to find a similar question and didn't find it.
• I searched the NiceGUI documentation, with the integrated search.
• I already searched online "How to X in NiceGUI" and didn't find any information.

Example Code

from nicegui import ui
import datetime

current = datetime.now().isoformat()
date = ui.date_input(label="Date", value="").props('mask="DD/MM/YYYY"')

ui.run()

Description

Is there a way to format the input/output of the date_input control when it receives a ISO timestamp to only show the date in a specific format?

so the input and output value would be YYYY-MM-DDTHH:MM:SSZ, but the displayed value on the date input would be DD/MM/YYYY. I've tried the mask and other methods to no avail. I've checked all the documentation but I cant see anything solid.

Thanks.

NiceGUI Version

3.3

Python Version

3.12.10

Browser

Chrome

Operating System

Windows

Additional Context

No response

[evnchn]

Hello @DylanBrianBenton

ui.date_input written by yours truly, so I definitely know that there is no provision for showing also the time beside the date.

Checking #4815, ui.date_time_input was in-the-talks but didn't make it. Here is a condensed summary:

• I did not push-forward making a combined ui.date_time_input because I was just getting started, the functionality can be replicated with a pair of ui.date_input and ui.time_input, edge cases such as user choosing the date XOR time, and UI/UX issues.
• @platinops actually proposed a combined ui.date_time_input implementation, but it was just left there because it was out-of-scope for the PR (and generally-speaking we don't take code snippets in comments, we take PRs)

@DylanBrianBenton @platinops Do you think we should pursue ui.date_time_input? Or may we get away with a pair of ui.date_input and ui.time_input? Thanks.

[falkoschindler]

As far as I understood, @DylanBrianBenton tries to feed an ISO string into ui.date_input and display it as a date (not with time). But I couldn't find a solution yet.

[DylanBrianBenton]

That's correct. Id like to initially have my value pulled in (currently in an ISO format) displayed as date in the input as a localised format (ddmmyy etc) and then be able to get the output, as either format, but getting the original format that went in would be advantageous.

[falkoschindler]

If it's ok to hold the value in its localized form, you can convert it initially and adjust the picker mask:

now = datetime.now()
date = ui.date_input('Date', value=datetime.strftime(now, '%d.%m.%Y'))
date.picker.props('mask="DD.MM.YYYY"')

If you want to hold the value in its original form but display it localized, you most probably need to implement your own value element. ui.date_input, which derives from ui.input, usually displays its underlying, untransformed value.

[DylanBrianBenton]

I thought that may be the case. Thank you